原文引用：Flutter中文網(wǎng)
本文將構(gòu)建一個簡單的如下功能的APP：為一個創(chuàng)業(yè)公司生成建議的名稱。用戶可以選擇和取消選擇的名稱、保存（收藏）喜歡的名稱。該代碼一次生成十個名稱，當(dāng)用戶滾動時(shí)，會生成一新批名稱。用戶可以點(diǎn)擊導(dǎo)航欄右邊的列表圖標(biāo)，以打開到僅列出收藏名稱的新頁面。
注：本篇是基于Flutter中文網(wǎng)的案例，為了更加詳細(xì)易懂，我添加了更多的圖片示例說明，所以篇幅較長，但其實(shí)實(shí)際步驟并沒有太多內(nèi)容，不要怕。
包含知識點(diǎn)：
1.Flutter應(yīng)用程序的基本結(jié)構(gòu).
2.查找和使用packages來擴(kuò)展功能.
3.使用熱重載加快開發(fā)周期.
4.如何實(shí)現(xiàn)有狀態(tài)的widget.
5.如何創(chuàng)建一個無限的、延遲加載的列表.
6.如何創(chuàng)建并導(dǎo)航到第二個頁面.
7.如何使用主題更改應(yīng)用程序的外觀.
第一步：創(chuàng)建Flutter App
根據(jù)上篇文章的方式，新建一個項(xiàng)目，命名為startip_namer
Flutter開發(fā)：環(huán)境配置與新建項(xiàng)目
1.替換lib/main.dart
刪除lib / main.dart中的所有代碼，然后替換為下面的代碼，它將在屏幕的中心顯示“Hello World”.
import 'package:flutter/material.dart';?
void main()=>runApp(new MyApp());
class MyApp extends StatelessWidget{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?@override
Widget build (BuildContext context){
return new MaterialApp(
title:'Welcome to Flutter',
home:new Scaffold(
? ? ? ? ? ?appBar:new AppBar(
? ? ? ? ? ? ? ? ? ? ? ? ? title:new Text('Welcome to Flutter'),),
? ? ? ? ? ?body:new Center(
? ? ? ? ? ? ? ? ? ? ? ? ? child:new Text('Hello World'),),
),
);
}}
提示:?將代碼粘貼到應(yīng)用中時(shí)，縮進(jìn)可能會變形。您可以使用Flutter工具自動修復(fù)此問題:
Android Studio / IntelliJ IDEA: 右鍵單擊Dart代碼，然后選擇?Reformat Code with dartfmt.
VS Code: 右鍵單擊并選擇?Format Document.
Terminal: 運(yùn)行?flutter format <filename>.
2.運(yùn)行應(yīng)用程序，你應(yīng)該看到如下界面.
分析
? 本示例創(chuàng)建一個Material APP。Material是一種標(biāo)準(zhǔn)的移動端和web端的視覺設(shè)計(jì)語言。 Flutter提供了一套豐富的Material widgets。
? main函數(shù)使用了(=>)符號, 這是Dart中單行函數(shù)或方法的簡寫。
? 該應(yīng)用程序繼承了 StatelessWidget，這將會使應(yīng)用本身也成為一個widget。 在Flutter中，大多數(shù)東西都是widget，包括對齊(alignment)、填充(padding)和布局(layout)
? Scaffold 是 Material library 中提供的一個widget, 它提供了默認(rèn)的導(dǎo)航欄、標(biāo)題和包含主屏幕widget樹的body屬性。widget樹可以很復(fù)雜。
? widget的主要工作是提供一個build()方法來描述如何根據(jù)其他較低級別的widget來顯示自己。
? 本示例中的body的widget樹中包含了一個Center widget, Center widget又包含一個 Text 子widget。 Center widget可以將其子widget樹對其到屏幕中心。
第2步: 使用外部包(package)
在這一步中，您將開始使用一個名為english_words的開源軟件包 ，其中包含數(shù)千個最常用的英文單詞以及一些實(shí)用功能.
可以在pub.dartlang.org上面找到其他許多開源軟件包
1.在如下圖的位置(dependencies 中)添加依賴
pubspec文件管理Flutter應(yīng)用程序的assets(資源，如圖片、package等)。?在pubspec.yaml中，將依賴包添加到項(xiàng)目
english_words:^3.1.0
2.加入后點(diǎn)擊Packages get,將依賴包安裝到項(xiàng)目中.
3.在?lib/main.dart?中, 引入?english_words
import'package:english_words/english_words.dart';
圖中灰色是因?yàn)闆]有使用過，此時(shí)在我們輸入時(shí)便會有該庫的相關(guān)提示。
4.使用 English words 包生成文本來替換字符串“Hello World”.
為方便復(fù)制，我將需要的代碼粘貼過來：
final wordPair = new WordPair.random();
child: new Text(wordPair.asPascalCase),
5.使用熱更新
如果你之前的應(yīng)用程序正在運(yùn)行，界面是之前的hello world，即可點(diǎn)擊工具欄中的閃電圖標(biāo)進(jìn)行熱更新，這樣可以更快速地將代碼更新到手機(jī)或虛擬機(jī)
第3步: 添加一個?有狀態(tài)的部件（Stateful widget）
Stateless?widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
Stateful?widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實(shí)現(xiàn)一個 stateful widget 至少需要兩個類: 一個 StatefulWidget類。一個 State類。 StatefulWidget類本身是不變的，但是 State類在widget生命周期中始終存在.
在這一步中，將添加一個有狀態(tài)的widget-RandomWords，它創(chuàng)建其State類RandomWordsState。State類將最終為widget維護(hù)生成的隨機(jī)單詞對和選中的單詞對。
1.添加有狀態(tài)的 RandomWords widget 到 main.dart
它也可以在MyApp之外的文件的任何位置使用，但是本示例將它放到了文件的底部。RandomWords widget除了創(chuàng)建State類之外幾乎沒有其他任何東西
class RandomWords extends StatefulWidget {
? ? ? ? ? @override
? ? ? ? ? createState() => new RandomWordsState();
}
2.添加 RandomWordsState 類
該應(yīng)用程序的大部分代碼都在該類中， 該類持有RandomWords widget的狀態(tài)。這個類將保存隨著用戶滾動而無限增長的生成的單詞對， 以及喜歡的單詞對，用戶通過重復(fù)點(diǎn)擊心形 ?? 圖標(biāo)來將它們從列表中添加或刪除。
class RandomWordsState extends State<RandomWords> {
@override
Widget build(BuildContext context) {
? ? ? ? ? ? ? final wordPair = new WordPair.random();
? ? ? ? ? ? ? return new Text(wordPair.asPascalCase);
? ? ? ? ? ? ? ?}
}
3.生成單詞對代的碼從MyApp移動到RandomWordsState中
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random(); // 刪除此行
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
? ? ? ? ? appBar: new AppBar( title: new Text('Welcome to Flutter'), ),
? ? ? ? ? body: new Center(
? ? ? ? ? ? ? ? ? ?//child: new Text(wordPair.asPascalCase),
? ? ? ? ? ? ? ? ? ?child: new RandomWords(),
), ), );
}
}
最終main.dart文件如下圖所示：
第4步: 創(chuàng)建一個無限滾動ListView
在這一步中，我們將擴(kuò)展（繼承）RandomWordsState類，以生成并顯示單詞對列表。 當(dāng)用戶滾動時(shí)，ListView中顯示的列表將無限增長。 ListView的builder工廠構(gòu)造函數(shù)允許您按需建立一個懶加載的列表視圖。
1.向RandomWordsState類中添加一個_suggestions列表以保存建議的單詞對。 該變量以下劃線（_）開頭，在Dart語言中使用下劃線前綴標(biāo)識符，會強(qiáng)制其變成私有的。另外，添加一個biggerFont變量來增大字體大小
class RandomWordsState extends State<RandomWords> {
? ? ? ? final _suggestions = <WordPair>[];
? ? ? ? final _biggerFont = const TextStyle(fontSize: 18.0);
? ? ? ? ...
}
2.向RandomWordsState類添加一個?_buildSuggestions()?函數(shù). 此方法構(gòu)建顯示建議單詞對的ListView。
ListView類提供了一個builder屬性，itemBuilder?值是一個匿名回調(diào)函數(shù)， 接受兩個參數(shù)- BuildContext和行迭代器i。迭代器從0開始， 每調(diào)用一次該函數(shù)，i就會自增1，對于每個建議的單詞對都會執(zhí)行一次。該模型允許建議的單詞對列表在用戶滾動時(shí)無限增長。
class RandomWordsState extends State<RandomWords> {
...
? ? Widget _buildSuggestions() {
? ? ? ? ? ?return new ListView.builder(
? ? ? ? ? ? ? ? ? ? padding: const EdgeInsets.all(16.0),
// 對于每個建議的單詞對都會調(diào)用一次itemBuilder，然后將單詞對添加到ListTile行中
// 在偶數(shù)行，該函數(shù)會為單詞對添加一個ListTile row.
// 在奇數(shù)行，該函數(shù)會添加一個分割線widget，來分隔相鄰的詞對。
// 注意，在小屏幕上，分割線看起來可能比較吃力。
? ? ? ? ? ? ? ? ? itemBuilder: (context, i) {
// 在每一列之前，添加一個1像素高的分隔線widget
? ? ? ? ? ? ? ? ? ? ? ? ? if (i.isOdd) return new Divider();
// 語法 "i ~/ 2" 表示i除以2，但返回值是整形（向下取整），比如i為：1, 2, 3, 4, 5
// 時(shí)，結(jié)果為0, 1, 1, 2, 2， 這可以計(jì)算出ListView中減去分隔線后的實(shí)際單詞對數(shù)量? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? final index = i ~/ 2;
// 如果是建議列表中最后一個單詞對
? ? ? ? ? ? ? ? ? ? ? ? ? if (index >= _suggestions.length) {
// ...接著再生成10個單詞對，然后添加到建議列表? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? _suggestions.addAll(generateWordPairs().take(10));
}
? ? ? ? ? ? ? ? ? ? ? ? ?return _buildRow(_suggestions[index]);
} ); }}
3.在RandomWordsState中添加一個_buildRow函數(shù) :
對于每一個單詞對，_buildSuggestions函數(shù)都會調(diào)用一次_buildRow。 這個函數(shù)在ListTile中顯示每個新詞對，這使您在下一步中可以生成更漂亮的顯示行
class RandomWordsState extends State<RandomWords> {
...
? ? ? ? ?Widget _buildRow(WordPair pair) {
? ? ? ? ? ? ? ? ? ? ? ?return new ListTile(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? title: new Text(
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?pair.asPascalCase,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?style: _biggerFont,
), ); }}
4.更新RandomWordsState的build方法以使_buildSuggestions()，而不是直接調(diào)用單詞生成庫。
class RandomWordsState extends State<RandomWords> {
...
@override
Widget build(BuildContext context) {
//final wordPair = new WordPair.random(); // 刪除這兩行
//return new Text(wordPair.asPascalCase);
return new Scaffold (
appBar: new AppBar(
title: new Text('Startup Name Generator'), ),
body: _buildSuggestions(),
); }
...
}
5.更新MyApp的build方法。從MyApp中刪除Scaffold和AppBar實(shí)例。
用下面部分替換最初的build方法：
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
home: new RandomWords(),
); }}
第四步最終代碼：第四步代碼
第5步: 添加交互
在這一步中，您將為每一行添加一個可點(diǎn)擊的心形 ?? 圖標(biāo)。當(dāng)用戶點(diǎn)擊列表中的條目，切換其“收藏”狀態(tài)時(shí)，將該詞對添加到或移除出“收藏夾”。
1.添加一個?_saved?Set(集合) 到RandomWordsState。
這個集合存儲用戶喜歡（收藏）的單詞對。 在這里，Set比List更合適，因?yàn)镾et中不允許重復(fù)的值。
class RandomWordsState extends State<RandomWords> {
final _suggestions = <WordPair>[];
final _saved = new Set<WordPair>();
final _biggerFont = const TextStyle(fontSize: 18.0);
...
}
2.在?_buildRow?方法中添加?alreadySaved來檢查確保單詞對還沒有添加到收藏夾中。
final alreadySaved = _saved.contains(pair);
3.同時(shí)在?_buildRow()中， 添加一個心形 ?? 圖標(biāo)到 ListTiles以啟用收藏功能。
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,),
); }
4.在?_buildRow中讓心形??圖標(biāo)變得可以點(diǎn)擊。
如果單詞條目已經(jīng)添加到收藏夾中， 再次點(diǎn)擊它將其從收藏夾中刪除。當(dāng)心形??圖標(biāo)被點(diǎn)擊時(shí)，函數(shù)調(diào)用setState()通知框架狀態(tài)已經(jīng)改變。
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); } }); },?
); }
此時(shí)可以看到界面：
對比源碼：第五步代碼
第6步: 導(dǎo)航到新頁面
在這一步中，您將添加一個顯示收藏夾內(nèi)容的新頁面（在Flutter中稱為路由(route)）。您將學(xué)習(xí)如何在主路由和新路由之間導(dǎo)航（切換頁面）。
在Flutter中，導(dǎo)航器管理應(yīng)用程序的路由棧。將路由推入（push）到導(dǎo)航器的棧中，將會顯示更新為該路由頁面。 從導(dǎo)航器的棧中彈出（pop）路由，將顯示返回到前一個路由。
1.在RandomWordsState的build方法中為AppBar添加一個列表圖標(biāo)。當(dāng)用戶點(diǎn)擊列表圖標(biāo)時(shí)，包含收藏夾的新路由頁面入棧顯示。
appBar: new AppBar(
title: new Text('Startup Name Generator'),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved), ], ),
2.向RandomWordsState類添加一個?_pushSaved()?方法.
當(dāng)用戶點(diǎn)擊導(dǎo)航欄中的列表圖標(biāo)時(shí)，建立一個路由并將其推入到導(dǎo)航管理器棧中。此操作會切換頁面以顯示新路由。
新頁面的內(nèi)容在在MaterialPageRoute的builder屬性中構(gòu)建，builder是一個匿名函數(shù)。
添加Navigator.push調(diào)用，這會使路由入棧（以后路由入棧均指推入到導(dǎo)航管理器的棧）
添加MaterialPageRoute及其builder。 現(xiàn)在，添加生成ListTile行的代碼。ListTile的divideTiles()方法在每個ListTile之間添加1像素的分割線。 該?divided?變量持有最終的列表項(xiàng)。
builder返回一個Scaffold，其中包含名為“Saved Suggestions”的新路由的應(yīng)用欄。 新路由的body由包含ListTiles行的ListView組成; 每行之間通過一個分隔線分隔。
class RandomWordsState extends State<RandomWords> {
...
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), ); }, ), );?}
}
此時(shí)界面如圖:
第7步：使用主題更改UI
在這最后一步中，您將會使用主題。主題控制您應(yīng)用程序的外觀和風(fēng)格。您可以使用默認(rèn)主題，該主題取決于物理設(shè)備或模擬器，也可以自定義主題以適應(yīng)您的品牌。
您可以通過配置ThemeData類輕松更改應(yīng)用程序的主題。 您的應(yīng)用程序目前使用默認(rèn)主題，下面將更改primary color顏色為白色。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Startup Name Generator',
theme: new ThemeData( primaryColor: Colors.white, ),
home: new RandomWords(),
); } }
實(shí)現(xiàn)效果如圖，可見標(biāo)題欄變?yōu)榘咨珮邮?/p>
這里放我本人的最終實(shí)現(xiàn)代碼截圖，每張截圖最下方是下一張截圖的上方，也可以根據(jù)代碼行數(shù)對比。方便查找。同學(xué)們可以對比實(shí)現(xiàn)
