阿里巴巴集團內(nèi)也有越來越多的業(yè)務和團隊開始嘗試 Flutter 技術棧，從閑魚的一支獨秀引領潮流，到如今淘寶特價版、優(yōu)酷、飛豬等BU業(yè)務相繼入局，Flutter的業(yè)務應用在集團內(nèi)也已經(jīng)逐漸形成趨勢。

有幸從一位朋友那里得到阿里內(nèi)部出品強推的“Flutter進階筆記”，秉承好東西的當然要共享的原則，今天就來秀一把，試試這“Flutter進階筆記”是否也能讓你事半功倍！

第一章 為什么Flutter是跨平臺開發(fā)的終極之選

---

跨平臺開發(fā)是當下最受歡迎、應用最廣泛的框架之一。能實現(xiàn)跨平臺開發(fā)的框架也五花八門，讓人眼花繚亂。

最流行的跨平臺框架有 Xamarin、PhoneGap、Ionic、Titanium、Monaca、Sencha、jQuery Mobile、React native、Flutter 等等。但這些工具的表現(xiàn)也是高低有別，各有千秋。

在這些流行的框架中，有很多也已經(jīng)消失在了歷史的長河中被人漸漸遺忘了。但 React native
和 Flutter 這倆框架地位依舊堅挺，備受歡迎。

因為它們倆分別由最強大的科技巨頭 Facebook 和谷歌背書支持。

第二章 在Windows上搭建Flutter開發(fā)環(huán)境

---

• 使用鏡像

• 系統(tǒng)要求

• 獲取Flutter SDK

• 編輯器設置

• Android設置

• 起步: 配置編輯器

• 起步: 體驗

• 體驗熱重載

第三章 編寫您的第一個 Flutter App

---

第1步: 創(chuàng)建 Flutter app

創(chuàng)建一個簡單的、基于模板的Flutter應用程序，按照[創(chuàng)建您的第一個Flutter應用中的指南的步驟， 然后將項目命名為startup_namer（而不是myapp)，接下來你將會修改這個應用來完成最終的APP。

在這個示例中，你將主要編輯Dart代碼所在的lib/main.dart 文件,

提示: 將代碼粘貼到應用中時，縮進可能會變形。您可以使用Flutter工具自動修復此問題:

Android Studio / IntelliJ IDEA: 右鍵單擊Dart代碼，然后選擇Reformat Code with dartfmt.

VS Code: 右鍵單擊并選擇Format Document.

Terminal: 運行flutter format .

1.替換 lib/main.dart. 刪除lib / main.dart中的所有代碼，然后替換為下面的代碼，它將在屏幕的中心顯示“Hello World”.

import’package:flutter/material.dart’;

voidmain()=>runApp(newMyApp());

classMyAppextendsStatelessWidget{

@override

Widgetbuild(BuildContextcontext){

returnnewMaterialApp(

title:‘Welcome to Flutter’,

home:newScaffold(

appBar:newAppBar(

title:newText(‘Welcome to Flutter’),

),

body:newCenter(

child:newText(‘Hello World’),

),

),

);

}}

2.運行應用程序，你應該看到如下界面.

分析

本示例創(chuàng)建一個Material APP。Material是一種標準的移動端和web端的視覺設計語言。 Flutter提供了一套豐富的Material widgets。

main函數(shù)使用了(=>)符號, 這是Dart中單行函數(shù)或方法的簡寫。

該應用程序繼承了 StatelessWidget，這將會使應用本身也成為一個widget。 在Flutter中，大多數(shù)東西都是widget，包括對齊(alignment)、填充(padding)和布局(layout)

Scaffold 是 Material library 中提供的一個widget, 它提供了默認的導航欄、標題和包含主屏幕widget樹的body屬性。widget樹可以很復雜。

widget的主要工作是提供一個build()方法來描述如何根據(jù)其他較低級別的widget來顯示自己。

本示例中的body的widget樹中包含了一個Center widget, Center widget又包含一個 Text 子widget。 Center widget可以將其子widget樹對其到屏幕中心。

第2步: 使用外部包(package)

在這一步中，您將開始使用一個名為english_words的開源軟件包 ，其中包含數(shù)千個最常用的英文單詞以及一些實用功能.

您可以 在pub.dartlang.org上找到english_words軟件包以及其他許多開源軟件包

1.pubspec文件管理Flutter應用程序的assets(資源，如圖片、package等)。 在pubspec.yaml中，將english_words（3.1.0或更高版本）添加到依賴項列表，如下面高亮顯示的行：

dependencies:

flutter:

sdk: flutter

cupertino_icons:^0.1.0

english_words:^3.1.0

2.在Android Studio的編輯器視圖中查看pubspec時，單擊右上角的 Packages get，這會將依賴包安裝到您的項目。您可以在控制臺中看到以下內(nèi)容：

flutter packages get

Running "flutter packages get"in startup_namer…

Process finished with exit code 0

3.在 lib/main.dart 中, 引入 english_words, 如高亮顯示的行所示:

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

在您輸入時，Android Studio會為您提供有關庫導入的建議。然后它將呈現(xiàn)灰色的導入字符串，讓您知道導入的庫尚未使用（到目前為止）

4.使用 English words 包生成文本來替換字符串“Hello World”.

Tip: “駝峰命名法” (稱為 “upper camel case” 或 “Pascal case” ), 表示字符串中的每個單詞（包括第一個單詞）都以大寫字母開頭。所以，“uppercamelcase” 變成 “UpperCamelCase”

進行以下更改, 如高亮部分所示:

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

voidmain()=>runApp(newMyApp());

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

final wordPair =new WordPair.random();

returnnewMaterialApp(

title:‘Welcome to Flutter’,

home:newScaffold(

appBar:newAppBar(

title:newText(‘Welcome to Flutter’),

),

body:newCenter(

//child: new Text(‘Hello World’),

child:newText(wordPair.asPascalCase),

),

),

);

}}

5.如果應用程序正在運行，請使用熱重載按鈕新正在運行的應用程序。每次單擊熱重載或保存項目時，都會在正在運行的應用程序中隨機選擇不同的單詞對。 這是因為單詞對是在build 方法內(nèi)部生成的。每次MaterialApp需要渲染時或者在Flutter Inspector中切換平臺時build 都會運行.

遇到問題?

如果您的應用程序運行不正常，請查找是否有拼寫錯誤。如果需要，使用下面鏈接中的代碼來對比更正。

· pubspec.yaml (The pubspec.yaml file won’t change again.)

· lib/main.dart

第3步: 添加一個有狀態(tài)的部件（Stateful widget）

Stateless widgets 是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.

Stateful widgets 持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實現(xiàn)一個 stateful widget 至少需要兩個類:

1.一個 StatefulWidget類。

2.一個 State類。 StatefulWidget類本身是不變的，但是 State類在widget生命周期中始終存在.

在這一步中，您將添加一個有狀態(tài)的widget-RandomWords，它創(chuàng)建其State類RandomWordsState。State類將最終為widget維護建議的和喜歡的單詞對。

1.添加有狀態(tài)的 RandomWords widget 到 main.dart。 它也可以在MyApp之外的文件的任何位置使用，但是本示例將它放到了文件的底部。RandomWords widget除了創(chuàng)建State類之外幾乎沒有其他任何東西

classRandomWordsextendsStatefulWidget{

@override

createState()=>newRandomWordsState();}

2.添加 RandomWordsState 類.該應用程序的大部分代碼都在該類中， 該類持有RandomWords widget的狀態(tài)。這個類將保存隨著用戶滾動而無限增長的生成的單詞對， 以及喜歡的單詞對，用戶通過重復點擊心形 ?? 圖標來將它們從列表中添加或刪除。

你會一步一步地建立這個類。首先，通過添加高亮顯示的代碼創(chuàng)建一個最小類

class RandomWordsState extends State{}

3.在添加狀態(tài)類后，IDE會提示該類缺少build方法。接下來，您將添加一個基本的build方法，該方法通過將生成單詞對的代碼從MyApp移動到RandomWordsState來生成單詞對。

將build方法添加到RandomWordState中，如下面高亮代碼所示

classRandomWordsStateextendsState{

@override

Widget build(BuildContext context){

final wordPair =new WordPair.random();

returnnew Text(wordPair.asPascalCase);

}}

4.通過下面高亮顯示的代碼，將生成單詞對代的碼從MyApp移動到RandomWordsState中

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

final wordPair =new WordPair.random();// 刪除此行

returnnewMaterialApp(

title:‘Welcome to Flutter’,

home:newScaffold(

appBar:newAppBar(

title:newText(‘Welcome to Flutter’),

),

body:newCenter(

//child: new Text(wordPair.asPascalCase),

child:newRandomWords(),

),

),

);

}}

重新啟動應用程序。如果您嘗試熱重載，則可能會看到一條警告：

Reloading…

Not all changed program elements ran during view reassembly; consider

restarting.

這可能是誤報，但考慮到重新啟動可以確保您的更改在應用界面中生效。

應用程序應該像之前一樣運行，每次熱重載或保存應用程序時都會顯示一個單詞對。

遇到問題?

如果您的應用程序運行不正常，可以使用下面鏈接中的代碼來對比更正。

· lib/main.dart

第4步: 創(chuàng)建一個無限滾動ListView

在這一步中，您將擴展（繼承）RandomWordsState類，以生成并顯示單詞對列表。 當用戶滾動時，ListView中顯示的列表將無限增長。 ListView的builder工廠構造函數(shù)允許您按需建立一個懶加載的列表視圖。

1.向RandomWordsState類中添加一個_suggestions列表以保存建議的單詞對。 該變量以下劃線（_）開頭，在Dart語言中使用下劃線前綴標識符，會強制其變成私有的。

另外，添加一個biggerFont變量來增大字體大小

classRandomWordsStateextendsState{

final _suggestions =[];

final _biggerFont =constTextStyle(fontSize:18.0);

…}

2.向RandomWordsState類添加一個 _buildSuggestions() 函數(shù). 此方法構建顯示建議單詞對的ListView。

ListView類提供了一個builder屬性，itemBuilder 值是一個匿名回調(diào)函數(shù)， 接受兩個參數(shù)- BuildContext和行迭代器i。迭代器從0開始， 每調(diào)用一次該函數(shù)，i就會自增1，對于每個建議的單詞對都會執(zhí)行一次。該模型允許建議的單詞對列表在用戶滾動時無限增長。

添加如下高亮的行:

classRandomWordsStateextendsState{

…

Widget _buildSuggestions(){

returnnew 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)returnnew Divider();

// 語法 “i ~/ 2” 表示i除以2，但返回值是整形（向下取整），比如i為：1, 2, 3, 4, 5

// 時，結果為0, 1, 1, 2, 2， 這可以計算出ListView中減去分隔線后的實際單詞對數(shù)量

final index = i ~/2;

// 如果是建議列表中最后一個單詞對

if(index >= _suggestions.length){

// …接著再生成10個單詞對，然后添加到建議列表

_suggestions.addAll(generateWordPairs().take(10));

}

return_buildRow(_suggestions[index]);

}

);

}}

3.對于每一個單詞對，_buildSuggestions函數(shù)都會調(diào)用一次_buildRow。 這個函數(shù)在ListTile中顯示每個新詞對，這使您在下一步中可以生成更漂亮的顯示行

在RandomWordsState中添加一個_buildRow函數(shù) :

classRandomWordsStateextendsState{

…

Widget _buildRow(WordPair pair){

returnnew ListTile(

title:new Text(

pair.asPascalCase,

style: _biggerFont,

),

);

}}

4.更新RandomWordsState的build方法以使用_buildSuggestions()，而不是直接調(diào)用單詞生成庫。 更改后如下面高亮部分：

classRandomWordsStateextendsState{

…

@override

Widget build(BuildContext context){

final wordPair =new WordPair.random();// 刪除這兩行

returnnew Text(wordPair.asPascalCase);

returnnew Scaffold (

appBar:new AppBar(

title:new Text(‘Startup Name Generator’),

),

body:_buildSuggestions(),

);

}

…

}

5.更新MyApp的build方法。從MyApp中刪除Scaffold和AppBar實例。 這些將由RandomWordsState管理，這使得用戶在下一步中從一個屏幕導航到另一個屏幕時， 可以更輕松地更改導航欄中的的路由名稱。

用下面高亮部分替換最初的build方法：

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

returnnew MaterialApp(

title:‘Startup Name Generator’,

home:new RandomWords(),

);

}}

重新啟動應用程序。你應該看到一個單詞對列表。盡可能地向下滾動，您將繼續(xù)看到新的單詞對。

遇到問題?

如果你的應用沒有正常運行，你可以使用一下鏈接中的代碼對比更正。

· lib/main.dart

第5步: 添加交互

在這一步中，您將為每一行添加一個可點擊的心形 ?? 圖標。當用戶點擊列表中的條目，切換其“收藏”狀態(tài)時，將該詞對添加到或移除出“收藏夾”。

1.添加一個 _saved Set(集合) 到RandomWordsState。這個集合存儲用戶喜歡（收藏）的單詞對。 在這里，Set比List更合適，因為Set中不允許重復的值。

從MyApp中刪除Scaffold和AppBar實例。 這些將由RandomWordsState管理，這使得用戶在下一步中從一個屏幕導航到另一個屏幕時， 可以更輕松地更改導航欄中的的路由名稱。

用下面高亮部分替換最初的build方法：

classMyAppextendsStatelessWidget{

@override

Widget build(BuildContext context){

returnnew MaterialApp(

title:‘Startup Name Generator’,

home:new RandomWords(),

);

}}

重新啟動應用程序。你應該看到一個單詞對列表。盡可能地向下滾動，您將繼續(xù)看到新的單詞對。

遇到問題?

如果你的應用沒有正常運行，你可以使用一下鏈接中的代碼對比更正。

· lib/main.dart

第5步: 添加交互

在這一步中，您將為每一行添加一個可點擊的心形 ?? 圖標。當用戶點擊列表中的條目，切換其“收藏”狀態(tài)時，將該詞對添加到或移除出“收藏夾”。

1.添加一個 _saved Set(集合) 到RandomWordsState。這個集合存儲用戶喜歡（收藏）的單詞對。 在這里，Set比List更合適，因為Set中不允許重復的值。

總結

以上是生活随笔為你收集整理的ALI Flutter进阶笔记，移动手机app开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。