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

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

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

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

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

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

C.void main() => runApp(new MyApp());
有點(diǎn)像ES6語(yǔ)法的箭頭函數(shù)是不是？對(duì)學(xué)習(xí)過(guò)前端開(kāi)發(fā)的同學(xué)是不是很熟悉呀，意思等同于：

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

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

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

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

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

把main.dart里的代碼替換成這個(gè)：

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

保存之后，到終端里輸入這個(gè)：

flutter doctor
flutter run

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

牢記這一點(diǎn)，flutter中的一切都是控件（Widget，有的文章稱呼組件，就當(dāng)作一個(gè)意思吧），控件是可以嵌套的，嵌套后就會(huì)形成組件樹(shù)。

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

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

你會(huì)看到終端有動(dòng)作：

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

這時(shí)控制臺(tái)的_問(wèn)題_欄也會(huì)彈出一個(gè)提示：

這是flutter的一個(gè)擼碼規(guī)則，為了保證代碼的高效和簡(jiǎn)潔，避免引入無(wú)用的包造成程序臃腫、運(yùn)行效率低下，然后我們?cè)傩薷囊幌麓a并保存：

這時(shí)候APP里的Hello World變成了下面這個(gè)樣子：

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

這次來(lái)點(diǎn)有難度的，用到了StatefulWidget控件，請(qǐng)將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 駝峰樣式，字符串中的每個(gè)單詞的首字母都會(huì)大寫
              child: new RandomWords(),  //定義子控件為有狀態(tài)控件RandomWords的實(shí)例
        ),
      ),
    );
  }
}
//定義了一個(gè)有狀態(tài)控件，繼承自StatefulWidget
class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();  //為StatefulWidget控件RandomWords定義一個(gè)狀態(tài)類
}
//定義了一個(gè)狀態(tài)控件，繼承自狀態(tài)類State，指明這個(gè)狀態(tài)控件是RandomWords控件的
class RandomWordsState extends State {
    @override
    Widget build(BuildContext context) {
      final wordPair = new WordPair.random();
      return new Text(wordPair.asPascalCase);
    }
}

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

經(jīng)過(guò)這么一折騰，我也對(duì)StatefulWidget和StatelessWidget的特性有個(gè)了一個(gè)簡(jiǎn)單的認(rèn)識(shí)，不知道小伙伴們感覺(jué)如何呀，如果還有不明白的地方，請(qǐng)?jiān)诹粞灾刑釂?wèn)，flutter圈子說(shuō)不定哪個(gè)大牛心情好會(huì)有解答喲。

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

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