Flutter 系列（四）基礎UI實踐

您好，歡迎關注我，本篇文章是關於 Flutter 的系列文，從簡單的 Flutter 介紹開始，一步步帶你瞭解進入 Flutter 的世界。你最好有必定的移動開發經驗，若是沒有也不要擔憂，在個人專欄底部給我留言，我會盡個人能力給你解答。

上篇文章咱們介紹了Flutter的總體架構，相信你們必定印象深入，本篇文章介紹 Flutter UI的基礎構建，從主題、提示、圖片加載和動畫四個方向介紹。

一.使用主題管理顏色和字體樣式
使用主題能夠在應用中採用統一的顏色和樣式。定義主題有兩種方式：內建主題或自定義Theme類。

1.內建主題

new MaterialApp(
  title: title,
  theme: new ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);

2.自定義主題

new Theme(
  // Create a unique theme with "new ThemeData"
  data: new ThemeData(
    accentColor: Colors.yellow,
  ),
);

3.使用主題

經過以上兩種方式建立主題後，咱們能夠在Widget的build方法中經過Theme.of(context)函數使用主題。

new Container(
  color: Theme.of(context).accentColor,
  child: new Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.title,
  ),
);

經過ThemeData文檔能夠查看到主題裏面支持預約義的顏色

經過TextTheme能夠查看系統預製的字體樣式。例如示例中提到的theme.textTheme.title就是這個樣子的：

SnackBar
在Android中有Toast彈出提示這個概念，可是在Flutter中沒有Toast，取而代之的是SnackBar。

想要建立一個SnackBar，咱們須要用到Scaffold容器，以前文章有講過Scaffold是一個包含Material Design的容器。

Scaffold(
  appBar: AppBar(
    title: Text('SnackBar Demo'),
  ),
  body: SnackBarPage(), // We'll fill this in below!
);

點擊按鈕的時候顯示SnackBar:

void _showSnackBar() {
    final snackBar = SnackBar(
            content: Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {
                // Some code to undo the change!
              },
            ),
          );

    Scaffold.of(context).showSnackBar(snackBar);
}

二.從網絡加載圖片
在Flutter中直接使用Image.network就能夠加載圖片了

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Image.network(
          'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
        ),
      ),
    );
  }
}

該方法還能夠直接加載GIF圖片

Image.network(
  'https://github.com/flutter/plugins/raw/master/packages/video_player/doc/demo_ipod.gif?raw=true',
);

經過placeholder屬性能夠增長一個佔位圖：

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

值得注意的是用Image.network加載的圖片並無緩存，若是想加載圖片並緩存，須要使用：

CachedNetworkImage(
  placeholder: CircularProgressIndicator(),
  imageUrl: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

若是對Flutter的圖片緩存策略感興趣，請繼續關注本專欄，以後的文章中我會分享給你們
三.動畫
本段只簡單的介紹動畫入門，以後有文章會詳細介紹Flutter動畫。
上篇文章說到過在Flutter中全部的東西都是Widget，包括動畫也不例外，若是你想讓某個Widget包含動畫屬性，那麼你須要用AnimatedOpacity將其包裹起來，AnimatedOpacity也是一個Widget。

AnimatedOpacity(
  // If the Widget should be visible, animate to 1.0 (fully visible). If
  // the Widget should be hidden, animate to 0.0 (invisible).
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  // The green box needs to be the child of the AnimatedOpacity
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
);

咱們使用一個StatefulWidget來調用setState()方法刷新_visible的值，就能顯示動畫了,是否是很簡單？

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Opacity Demo';
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

// The StatefulWidget's job is to take in some data and create a State class.
// In this case, our Widget takes in a title, and creates a _MyHomePageState.
class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// The State class is responsible for two things: holding some data we can
// update and building the UI using that data.
class _MyHomePageState extends State<MyHomePage> {
  // Whether the green box should be visible or invisible
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
          // If the Widget should be visible, animate to 1.0 (fully visible). If
          // the Widget should be hidden, animate to 0.0 (invisible).
          opacity: _visible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          // The green box needs to be the child of the AnimatedOpacity
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Make sure we call setState! This will tell Flutter to rebuild the
          // UI with our changes!
          setState(() {
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

本篇文章從主題、提示、圖片加載和動畫四個方面簡單的介紹了Flutter的UI建立過程，爲了不文章太長致使可讀性較差，因此只簡單的講了這四個方面，還有更多內容會在以後的文章裏介紹。相信本篇文章讀完以後，你已經知道如何使用Flutter Widget了，下一篇專欄來點實戰，我會教你們如何實現一個輪播指示器。

想學習更多Android方面的技術或者flutter相關內容均可以加個人交流羣：羣號：925019412
進羣領取以下免費資料學習