谈谈如何学习flutter之flutter成神之路
文章目錄
- 為什么要使用Flutter?
- path 環境變量
- 運行 `flutter doctor`
- 安裝 Android Studio或者VScode
- Bonus: Move Bottom Panel to the side.
- [高效 Dart 語言指南：API 設計](https://dart.cn/guides/language/effective-dart/design)
- StatelessWidget 是無狀態控件，沒有自己的私有數據，是純展示型的控件，基本定義過程如下：
- 定義有狀態的控件StatefulWidget
- 定義繼承自 `State` 的狀態類
- 定義和修改私有數據
- 學習widget
- 性能優化
- 優化
- 選擇
- 我的系列內容主要包括
為什么要使用Flutter?
為什么學習flutter是很多人的疑問，在我個人看來
- 提高開發效率
- 同一份代碼開發iOS和Android
- 用更少的代碼做更多的事情
- 輕松迭代
- 在應用程序運行時更改代碼并重新加載（通過熱重載）
- 修復崩潰并繼續從應用程序停止的地方進行調試
- 創建美觀，高度定制的用戶體驗
- 受益于使用Flutter框架提供的豐富的Material Design和Cupertino（iOS風格）的widget
- 實現定制、美觀、品牌驅動的設計，而不受原生控件的限制
作為一個零基礎的同學。學習flutter無非就是從安裝配置環境開始，這個是作為編程人員最基礎的了，在這兒，記住一個地址：https://flutter.cn/
path 環境變量
如果你想在 Windows 控制臺中運行 Flutter 命令，需要按照下面的步驟來將 Flutter 的運行文件路徑加入到 PATH 環境變量。
- 在開始菜單的搜索功能鍵入「env」，然后選擇 編輯系統環境變量。
- 在 用戶變量 一欄中，檢查是否有 Path 這個條目：
- 如果存在這個條目，以 ; 分隔已有的內容，加入 flutter\bin 目錄的完整路徑。
- 如果不存在的話，在用戶環境變量中創建一個新的 Path 變量，然后將 flutter\bin 所在的完整路徑作為新變量的值。
運行 flutter doctor
安裝 Android Studio或者VScode
我用 VScode，畢竟輕量化，這兒有幾個插件值得推薦
Bonus: Move Bottom Panel to the side.
Right looks infinitely better.
Having the Panel at the bottom takes up a lot of space that you could use to read more code. Move your panel to the side instead (your code shouldn’t exceed 80 chars anyway) to use space more efficiently. Open Settings by hitting Ctrl + ,. Then, search for "Panel location". Change it from bottom to right.
這個時候環境搭建基本完成，就開始學習吧，學習flutter，建議首先看看dart語法相關的東西
高效 Dart 語言指南：API 設計
以及類型之間的相互轉換，
List Set Map 還是要重點理解一下，
關于流程控制語句，if else while do while break container switch case 都是有必要的
接下來就是對dart 的一些庫的了解
庫重名的解決，as ，以及show 屏蔽其他，hide顯示其他
學習完這些，再去學習flutter相關的，
相信很快就能做一款自己的app了，
flutter相關的，其實也就是一個widget的學習了，widget，分為兩種
Flutter 中的自定義控件分為兩類：
- StatelessWidget 無狀態控件
- 純展示型控件，沒有自己的私有數據和業務邏輯
- StatefulWidget 有狀態控件
- 業務邏輯控件，可以定義自己的私有數據和業務邏輯
StatelessWidget 是無狀態控件，沒有自己的私有數據，是純展示型的控件，基本定義過程如下：
class MyMidget extends StatelessWidget {// 構造函數：// 其中的 this.title 定義的是命名參數// @required 用來規定某個數據在初始化的時候是必須要提供的，否則會報錯。MyApp({Key key, @required this.title}) : super(key: key);// final：用于修飾變量，表示單賦值（single-assignment），// 使用final修飾的變量必須進行初始化，一旦被賦值之后，不能夠再次被賦值,否則編譯會報錯。final String title;// build 函數相當于 react.js 中的 render 函數// 必須 return 一個 UI 結構，用來構建當前控件對應的UI界面// 在 StatelessWidget 控件中，build 函數是必須的@overrideWidget build(BuildContext context) {return Text(title);} }基本使用過程如下：
void main() => runApp(// MyApp() 函數的調用，是 new MyApp() 的簡寫形式，// 其中 title 是構造函數的參數，// 且必須傳遞 title 數據，因為它已被標記為 @required 必填項MyApp(title: 'Flutter初體驗鴨') );StatefulWidget 是有狀態控件，這樣的控件擁有自己的私有數據和業務邏輯，基本定義過程如下：
定義有狀態的控件StatefulWidget
// 定義一個 電影詳情 控件，繼承自 StatefulWidget class MovieDetail extends StatefulWidget {// 構造函數，初始化當前組件必須的 id 屬性MovieDetail({Key key, @required this.id}) : super(key: key);// 電影的Id值final String id;// StatefulWidget 控件必須實現 createState 函數// 在 createState 函數中，必須返回一個繼承自 State<T> 狀態類的對象// 這里的 _MovieDetailState 就繼承自 State<T>_MovieDetailState createState() => new _MovieDetailState(); }定義繼承自 State<T> 的狀態類
// 這個繼承自 State<T> 的類，專門用來定義有狀態控件的 業務邏輯 和 私有數據 class _MovieDetailState extends State<MovieDetail> {// build 函數是必須的，用來渲染當前有狀態控件對應的 UI 結構@overrideWidget build(BuildContext context) {// 注意：在這個 _MovieDetailState 狀態類中，可以使用 widget 對象訪問到 StatefulWidget 控件中的數據并直接使用// 例如：widget.idreturn Text('MovieDetail --' + widget.id);} }定義和修改私有數據
// 這個繼承自 State<T> 的類，專門用來定義有狀態控件的 業務邏輯 和 私有數據 class _MovieDetailState extends State<MovieDetail> {// 1. 定義私有狀態數據【以 _ 開頭的數據，是當前類的私有數據】int _count;// 2. 通過 initState 生命周期函數，來初始化私有數據@overridevoid initState() {super.initState();// 2.1 把 _count 的值初始化為 0_count = 0;}// build 函數是必須的，用來渲染當前有狀態控件對應的 UI 結構@overrideWidget build(BuildContext context) {// 注意：在這個 _MovieDetailState 狀態類中，可以使用 widget 對象訪問到 StatefulWidget 控件中的數據并直接使用// 例如：widget.idreturn Column(children: <Widget>[Text('MovieDetail --' + widget.id + ' --- ' + _count.toString()),RaisedButton(child: Icon(Icons.add),// 3. 指定點擊事件的處理函數為 _addonPressed: _add,)],);}// 4. 定義 _count 自增的函數【以 _ 開頭的函數，是私有函數】void _add() {// 如果要為私有數據重新賦值，必須調用 setState() 函數setState(() {// 讓私有數據 _count 自增 +1_count++;});} }兩種狀態的Widget學習完了，就是對其他的widget的學習了，
學習widget
只要記住在他的核心里面，萬物皆可widget
我常用的也就是例如Container、Padding、Center、Align、Row、Column、Stack、ListView等也有上十種。
Flutter單節點布局控件功能分類：
對于這些，一定要會理解，會用，當然，前期的使用還是比較簡單的。控件雖然這么多，但是大部分不會挨個去嘗試。對于大部分人而言，都是佛系的用法，一個控件能夠使用，就一直用到死。在布局上，大方向還是不停的拆，把一張設計圖，拆成一棵樹，每個節點根據需要，選擇合適的控件，然后從根部開始不停嵌套，布局就完成了。到了后期，就不僅僅是頁面的布局了，而在于對控件的選擇
控件種類繁多，真正使用的時候該如何去選擇呢？有萬金油的做法，不管啥都用Container，這也是很多初接觸的人經常干的方式。這么做的確可以按照設計圖把布局給實現了，但是會涉及到一些性能上的問題。在我看來，控件的選擇，按照控件最小功能的標準去選擇。例如需要將子節點居中，可以使用Container設置alignment的方式，也可以使用Center。但是從功能上，Center是最小級別的，因此選擇它的話，額外的開銷會最小。將UI實現了，這只是最基本的，當達到這一步了，應該更多的去思考，如何更好的布局，使得性能更高。
而在我對于以下我稱為多節點控件
- 列表：GridView、ListView；
- 單列單行或者多列多行：Row、Column、Flow、Wrap、ListBody、Table；
- 顯示位置相關：Stack、IndexedStack、CustomMultiChildLayout。
這幾個空間還是應該學細一點，GridView、ListView、Row、Column、Stack，這幾個控件基本上涵蓋了大部分的布局了。所以更應該重點把握。
性能優化
剛才也提到，性能優化，關于性能優化，可能仁者見仁，并沒有一個統一的說法，畢竟現在Flutter各方面都還不完善。但是，大方向還是有的，盡量使用功能集更小的控件，這個對于渲染效率上還是有所幫助的。
優化
在這里我試著去列舉一些，并不一定都正確。
- 如果一個布局多個控件都可以完成，則使用功能最小的，可以參照上面控件分類中的功能劃分來做取舍；
- 對于多節點控件，如果單節點控件滿足需求的話，則去使用單節點控件進行布局；
- 對于ListView，標準構造函數適用于條目比較少的情況，如果條目較多的話，盡量使用ListView.builder；
- 對于GridView，如果需要展示大量的數據的話，盡量使用GridView.builder；
- Flow、Wrap、Row、Column四個控件，單純論效率的話，Flow是最高效的，但是使用起來是最復雜的；
- 如果是單行或者單列的話，Row、Column比Table更高效；
- Stack和CustomMultiChildLayout如果同時滿足需求的話，CustomMultiChildLayout在某些時候效率會更高一些，但是取決于Delegate的實現，且使用起來更加的復雜；
上面所列的比較雜，但是歸納起來，無非這幾點：
- 功能越少的控件，效率越高；
- ListView以及GridView的builder構造函數效率更高；
- 實現起來比較復雜的控件，效率一般會更高。
選擇
控件的選擇，個人覺得把握大方向就夠了。如果時間緊急，以實現效率最優先，如果時間充裕的話，可以按照一些優化細則，去做一些選擇。單純控件層面，帶來性能上的改進畢竟十分有限。
可能需要組建的封裝之類的了，良好的代碼封裝，你會發現可讀性不僅好，還能提高編碼的樂趣，所以我的目標就是寫出詩歌一樣的代碼。
比如寫一個登陸頁面：
利用stack結合Positioned，實現相對定位，你就會發現，代碼結構好看不說，也利于后期的維護
@overrideWidget build(BuildContext context) {return Scaffold(///填充布局body: Container(width: double.infinity,height: double.infinity,//點擊空白區域 隱藏鍵盤child: GestureDetector(onTap: () {_userNameFocusNode.unfocus();_passwordFocusNode.unfocus();},child: Stack(children: [//第一層 背景buildBackgroundWidget(),//第二層 氣泡Positioned.fill(child: BubbleWidget(),),//第三層 高斯模糊buildFliterWidget(),//第四層 logobuildLogoWidget(),//第五層來個輸入層buildInputWidget(context),//第六層 關閉按鈕buildCloseWidget(context)],),)),);這也僅僅是頁面布局，后期很重要的就是與后端的數據進行交互了。在這個時候，或許用http也可以，但是還是強烈建議，利用dio
至于其他的一些插件，比如 shared_preferences，share，permission_handler，provider等等插件
之后對于Android和ios底層還要有一些理解，這樣，對于個性化需求，也就不成問題了，學習是個漫長的過程，需要不斷堅持，
后期我會結合我的學習，工作出一個系列，希望大家繼續關注
我的系列內容主要包括
1.各個組建的用法，走一步，看一步，畢竟組件挺多的
2.我平時用到的三方插件，目前就有36種，我會出一個專欄
3.平時用到的一些經驗，我會利用Demo進行演示
4.遇到的一些報錯，以及解決方案
如果大家還有什么想看的，歡迎在評論區留言，就讓我們一起利他共享，求實精進。
明天會出 一個提綱，大家的喜歡和點贊就是我最大的鼓勵哦。
總結
以上是生活随笔為你收集整理的谈谈如何学习flutter之flutter成神之路的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： flutter中state详解
- 下一篇： 让Android Studio代码提示不