Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。

試用了一下，樣例展示還不錯，相容多個開發環境，一次編碼，完成兩個平臺應用的生成，有點意思！

樣例連結：https://flutterchina.club/get-started/codelab/

環境搭建，除錯安裝，那些就不寫了，這裡只看完成後，這個樣例應用的組成和各個物件的分工

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.deepPurpleAccent
    ),
      home: new RandomWords(),
    );
  }
}

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  
  final _suggestions = <WordPair>[];
  final _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon:new Icon(Icons.list),onPressed: _pushSaved),
        ]
      ),
      body: _buildSuggestions(),
      );
  }

  Widget _buildSuggestions() {
    return new ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: (context, i) {
        if (i.isOdd) return new Divider();
        final index = i ~/ 2;
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10));
        }
        return _buildRow(_suggestions[index]);
      },
    );
  }

  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);
    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: (){
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      }
    );
  }
  void _pushSaved(){
    Navigator.of(context).push(
      new MaterialPageRoute(
          builder: (context){
            final tiles = _saved.map(
                (pair){
                  return new ListTile(
                    title: new Text(
                      pair.asPascalCase,
                      style: _biggerFont,
                    )
                  );
                }
            );
            final divided = ListTile
              .divideTiles(
                context: context,
                tiles: tiles
            )
            .toList();

            return new Scaffold(
              appBar: new AppBar(
                title: new Text('Saved Suggestions'),
              ),
              body: new ListView(children: divided),
            );
          }
      )
    );
  }
}
 

為了後面比較各個屬性的設定，後續code會有所調整，但都以此為模板，再此基礎上修改，我們來看APP的改變情況；

1. 引用了兩個庫：

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

第一個material.dart內容：

......
export 'src/material/theme.dart';
export 'src/material/theme_data.dart';
export 'src/material/time.dart';
export 'src/material/time_picker.dart';
export 'src/material/toggleable.dart';
export 'src/material/tooltip.dart';
export 'src/material/two_level_list.dart';
export 'src/material/typography.dart';
export 'src/material/user_accounts_drawer_header.dart';
export 'widgets.dart';
 

為應用程式提供了一些基礎功能,例如標題欄,material 圖示和主題

第二個 english_words.dart 作為庫來使用

是一個名為english_words的開源軟體包 ，其中包含數千個最常用的英文單詞以及一些實用功能.

使用方法：

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies: english_words: ^3.1.5

2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

Alternatively, your editor might support pub get or flutter packages get. 

3. Import it

Now in your Dart code, you can use:

import 'package:english_words/english_words.dart';

本樣例中關鍵點是向配置中新增這個庫的引用

即：在pubspec.yaml中，將english_words（3.1.0或更高版本）新增到依賴項列表

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

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

main函式使用了(=>)符號, Dart中單行函式或方法的簡寫

2.StatelessWidget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(
        primaryColor: Colors.deepPurpleAccent
      ),
      home: new RandomWords(),
    );
  }
}

APP繼承 StatelessWidget，應用本身也成為一個widget

可以通過如下屬性修改主介面標題欄的背景顏色：

     theme: new ThemeData(
        primaryColor: Colors.amber    //主題黃色
    ),
      theme: new ThemeData(
        primaryColor: Colors.deepPurpleAccent      //主題紫色
      ),

如圖：

Flutter框架中，控制元件類又細分為有狀態控制元件類（繼承StatefulWidget抽象類）和無狀態控制元件類（繼承StatelessWidget抽象類），兩者的差別在於是否有狀態

class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

隨機單詞的來源，詳細定義如下：

class RandomWordsState extends State<RandomWords> {
  
  final _suggestions = <WordPair>[];
  final _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Startup Name Generator'),
        actions: <Widget>[
          new IconButton(icon:new Icon(Icons.list),onPressed: _pushSaved),
        ]
      ),
      body: _buildSuggestions(),
      );
  }

修改 title值：

title: new Text('Startup Name RandomWords Generator'),

展示如下：

標題名稱被修改了

修改內容字型大小

final _biggerFont = const TextStyle(fontSize: 8.0);

字型被縮小了很多。

源自：

https://flutterchina.club/get-started/codelab/