摘要：是啥是谷歌推出的一套視覺設(shè)計語言。比如有的可以換皮膚，而每一套皮膚就是一種設(shè)計語言，有古典風呀炫酷風呀極簡風呀神馬的，而就是谷歌風，有興趣的同學可以學習了解一下官方原版和中文翻譯版，這是每一個產(chǎn)品經(jīng)理的必修教材。

flutter環(huán)境和運行環(huán)境搭建好之后，可以開始擼碼了，然而當你打開VScode，在打開項目文件夾后，擺在你面前的是main.dart被打開的樣子，里面七七八八的已經(jīng)寫好了一堆代碼，是不是很懵逼？

不要緊，人家官方文檔上說了，flutter的玩家不需要Dart和移動端語言開發(fā)經(jīng)驗，只需要熟悉面向?qū)ο缶幊碳纯伞?br>神馬？面向?qū)ο笠膊欢窟€是百度打打基礎(chǔ)去吧。。。

簡單了解下上圖中的幾個標記的編號：
A. main.dart
此文件是每一個flutter項目的默認入口文件，也就是說每個flutter項目啟動的時候，默認先運行這個文件的代碼，這個入口文件理論上應(yīng)該是可以配置的，不過我還不知道在哪配，大神請留言，嘿嘿。注意看它所在的路徑，在項目根目錄的lib文件下，而文件的后綴名.dart是flutter文件的格式，是不是很容易聯(lián)想到flutter使用的dart語言。

B.import "package:flutter/material.dart";
每一個.dart文件的第一行都會導入flutter/material.dart包，這個包是Flutter實現(xiàn)Material Design設(shè)計風格的基礎(chǔ)包，里面有文本輸入框(Text)、圖標(Icon)、圖片(Image)、行排列布局(Align)、列排列布局(Column)、Decoration(我也不知道是啥)、異步（%#￥@暈倒..）、動畫等等等等控件，大家可以理解為網(wǎng)頁中的按鈕、標題、選項框呀等等控件庫吧。

Material Design是啥？是谷歌推出的一套視覺設(shè)計語言。比如有的APP可以換皮膚，而每一套皮膚就是一種設(shè)計語言，有古典風呀炫酷風呀極簡風呀神馬的，而Material Design就是谷歌風，有興趣的同學可以學習了解一下Material Design官方原版和Material Design中文翻譯版，這是每一個產(chǎn)品經(jīng)理的必修教材。

C.void main() => runApp(new MyApp());
有點像ES6語法的箭頭函數(shù)是不是？對學習過前端開發(fā)的同學是不是很熟悉呀，意思等同于：

void main() {
   return runApp(Widget app);
}

這里的main()函數(shù)是Dart程序的入口，也就是說，F(xiàn)lutter程序在運行的時候，第一個執(zhí)行的函數(shù)就是main()函數(shù)，結(jié)合A的入口文件，flutter項目默認執(zhí)行的第一句代碼，就是main.dart文件里的void main() => runApp(new MyApp());

D和E.StatelessWidget和StatefulWidget
這是flutter最基礎(chǔ)的的兩種控件類，分別叫無狀態(tài)類和有狀態(tài)類，兩者的差別在于是否有狀態(tài)，玩家創(chuàng)建的所有控件都繼承自這兩個控件。當你想展示的內(nèi)容只需要改動控件本身的配置信息就可以實現(xiàn)時，例如文本、圖片等，可以考慮使用無狀態(tài)控件（StatelessWidget）。如果你想展示的內(nèi)容是可以動態(tài)改變才能實現(xiàn)時，例如滾動列表、動畫效果等，可以考慮使用有狀態(tài)控件（StatefulWidget）。

其實我也不是很明白，StatefulWidget還有生命周期一說，具體怎么回事，大家可以參考何小有的《Flutter框架基礎(chǔ)》，如果你悟性好，分分鐘貫通也說不定。

前面寫了一大堆廢話，高手們已經(jīng)不耐煩，萌新們看不懂我也不管了，擼一管官方萌新教程先~

把main.dart里的代碼替換成這個：

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"),
        ),
      ),
    );
  }
}

保存之后，到終端里輸入這個：

flutter doctor
flutter run

看看你的測試機都發(fā)生了什么，好了，恭喜！你的flutter人生的第一個hallo world告成~！

牢記這一點，flutter中的一切都是控件（Widget，有的文章稱呼組件，就當作一個意思吧），控件是可以嵌套的，嵌套后就會形成組件樹。

上面的代碼可以簡單看看，能懂多少是多少吧，對熟悉面向?qū)ο蟮耐瑢W應(yīng)該沒有難度。

打開文件pubspec.yaml，在這里加一句代碼english_words: ^3.1.0并保存：

你會看到終端有動作：

再回到*main.dart文件，加一句代碼import "package:english_words/english_words.dart";：

這時控制臺的_問題_欄也會彈出一個提示：

這是flutter的一個擼碼規(guī)則，為了保證代碼的高效和簡潔，避免引入無用的包造成程序臃腫、運行效率低下，然后我們再修改一下代碼并保存：

這時候APP里的Hello World變成了下面這個樣子：

到終端中按 r 鍵，在APP中發(fā)現(xiàn)什么變化都沒有，而按 R 鍵，APP重啟，屏幕中央的字符串隨機改變了，說明APP一旦啟動后，玩家創(chuàng)建的無狀態(tài)控件實例中的屬性值定義后，刷新頁面不會再更新，官方的說法是無狀態(tài)控件實例中的屬性值為final類型，意味著一旦定義將無法變更，只有APP重啟后，重新執(zhí)行代碼，這時候重生了控件實例，所以屏幕中央的字符串改變了，但是用 r 還是不會變。

這次來點有難度的，用到了StatefulWidget控件，請將main.dart的代碼替換為：

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) {
    // final wordPair = new WordPair.random();
    return new MaterialApp(
      title: "Welcome to Flutter",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Hello Flutter"),
        ),
        body: new Center(
          // child: new Text("Hello World"),
          // child: new Text(wordPair.asPascalCase), //asPascalCase 駝峰樣式，字符串中的每個單詞的首字母都會大寫
              child: new RandomWords(),  //定義子控件為有狀態(tài)控件RandomWords的實例
        ),
      ),
    );
  }
}
//定義了一個有狀態(tài)控件，繼承自StatefulWidget
class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();  //為StatefulWidget控件RandomWords定義一個狀態(tài)類
}
//定義了一個狀態(tài)控件，繼承自狀態(tài)類State，指明這個狀態(tài)控件是RandomWords控件的
class RandomWordsState extends State {
    @override
    Widget build(BuildContext context) {
      final wordPair = new WordPair.random();
      return new Text(wordPair.asPascalCase);
    }
}

保存代碼后，再到終端，每按一次 r 鍵，APP中央的字符串就會隨機改變，這就是StatefulWidget類的特性，其實例內(nèi)的屬性值可以在對象實例化后隨意變更，一個StatefulWidget控件至少包含兩個類，一個是用于實例化的StatefulWidget類，一個是它的State狀態(tài)類。純粹的StatefulWidget控件本身是不可變的，但是它的State類會在StatefulWidget控件的整個生命周期持續(xù)存在。

經(jīng)過這么一折騰，我也對StatefulWidget和StatelessWidget的特性有個了一個簡單的認識，不知道小伙伴們感覺如何呀，如果還有不明白的地方，請在留言中提問，flutter圈子說不定哪個大牛心情好會有解答喲。

本篇就介紹到這里，大家可以自行敲敲代碼，多體驗體驗，從知道flutter到現(xiàn)在36小時，而我能寫到這里，首先感謝技術(shù)達人狐神的大力支持，幫我拉來了flutter先驅(qū)何小有和一梭子前端大神，再者感謝何小有在flutter圈子的入門掃盲貼投稿，也感謝大家的支持，我也就不再廢話什么自我激勵了，總之 加油~！

再啰嗦一句廣告，對flutter感興趣的小伙伴可以關(guān)注我，歡迎大家到Flutter圈子中投稿，也可以聯(lián)系管理員加入我們的flutter微信群嗨聊，謝謝捧場~！
flutter 中文社區(qū)（官方QQ群：338252156）