Dart基本語法學(xué)的差不多了以后就可以開始學(xué)習(xí)Flutter了，就像OC學(xué)完了就可以開發(fā)iOS一樣，觸類旁通，F(xiàn)lutter開發(fā)需要掌握的基本技能無外乎也是那幾個(gè)東西，界面布局，網(wǎng)絡(luò)請(qǐng)求，數(shù)據(jù)加載，第三方庫的使用，學(xué)會(huì)這些基本可以完成一些簡單的Flutter模塊的開發(fā)了，寫文章是為了記錄，學(xué)習(xí)語言最主要的還是得多敲多練，在實(shí)戰(zhàn)中磨煉才是王道。

配環(huán)境創(chuàng)建項(xiàng)目啥的就不講了，是需要花一點(diǎn)時(shí)間，也有一些坑，下次要是再有重新搭環(huán)境的機(jī)會(huì)可以把坑記錄一下。

1.Hello World

每次學(xué)一門新語言的時(shí)候，打印出來Hello World的那一刻我就感覺這門語言我已經(jīng)學(xué)會(huì)了。

#import  'package:flutter/material.dart';

main(List<String> args) {
  runApp(
      Text("Hello World", 
           textDirection: TextDirection.ltr
      )
  );
}

這段代碼執(zhí)行后會(huì)在屏幕左上角顯示Hello World。
對(duì)這段代碼稍微分析一下：
1.import package:flutter/material.dart此行代碼作用是導(dǎo)入了Material UI組件庫，Material是一種標(biāo)準(zhǔn)的移動(dòng)端和web端的視覺設(shè)計(jì)語言， Flutter默認(rèn)提供了一套豐富的Material風(fēng)格的UI組件。
2.應(yīng)用入口是一個(gè)main函數(shù)，和OC一樣，main函數(shù)里調(diào)用了runApp()方法，runApp()方法接收一個(gè)widget參數(shù)，這個(gè)widget就是Flutter的核心所在。
3.在Flutter里可以說一切能看見的東西都是widget，翻譯過來叫做組件。
4.Text組件類似于OC中的UILabel，可以展示文字，它的類定義如下：

class Text extends StatelessWidget {
  const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  });
}

利用前面學(xué)到的Dart知識(shí)可以看到，這個(gè)Text類繼承自一個(gè)叫StatelessWidget的東西，它有一個(gè)常量構(gòu)造方法，接收一個(gè)必傳參數(shù)data，和一堆命名可選參數(shù)，關(guān)于widget后面再細(xì)講。

2.計(jì)數(shù)器應(yīng)用示例

官網(wǎng)為我們提供了一個(gè)計(jì)數(shù)器程序示例，該計(jì)數(shù)器示例中，每點(diǎn)擊一次右下角帶“+”號(hào)的懸浮按鈕，屏幕中央的數(shù)字就會(huì)加1。

計(jì)數(shù)器

這段程序代碼如下：
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

1. 這個(gè)程序的runApp返回的是一個(gè)MyApp類，MyApp類代表Flutter應(yīng)用，它繼承了StatelessWidget類，這也就意味著應(yīng)用本身也是一個(gè)widget。
2. MyApp類內(nèi)部調(diào)用了build方法，F(xiàn)lutter在構(gòu)建頁面時(shí)，會(huì)調(diào)用組件的build方法，widget的主要工作是提供一個(gè)build()方法來描述如何構(gòu)建UI界面（通常是通過組合、拼裝其它基礎(chǔ)widget）。
3. build方法內(nèi)部又返回了一個(gè)MaterialApp，它是Material庫中提供的Flutter APP框架，通過它可以設(shè)置應(yīng)用的名稱、主題、語言、首頁及路由列表等。同樣的，MaterialApp也是一個(gè)widget。
4. MaterialApp接收一個(gè)home參數(shù)，傳入的是MyHomePage，繼承自StatefulWidget，到這里我們已經(jīng)見到了兩種常用的widget類型，StatelessWidget和StatefulWidget。
5. 在MyHomePage類里初始化賦值了一個(gè)_MyHomePageState的類，這個(gè)類繼承自State<MyHomePage> ，字面意思就是一種狀態(tài)，從這里也可以初步分析出來Statefulwidget是包含狀態(tài)變化的。
6. _MyHomePageState類中同樣包含了一個(gè)build方法，從這里也可以初步看出來，StatelessWidget的build方法是直接包含在widget類中的，而Statefulwidget的build方法是在State類中的，這兩點(diǎn)也是兩種widget的顯著不同，后面再細(xì)講。
7. _MyHomepage類中有一個(gè)記錄點(diǎn)擊次數(shù)的變量counter和一個(gè)_incrementCounter方法，方法里調(diào)用了setState()方法，刷新counter的值，setState方法的作用是通知Flutter框架，有狀態(tài)發(fā)生了改變，F(xiàn)lutter框架收到通知后，會(huì)執(zhí)行build方法來根據(jù)新的狀態(tài)重新構(gòu)建界面， Flutter 對(duì)此方法做了優(yōu)化，使重新執(zhí)行變的很快，所以你可以重新構(gòu)建任何需要更新的東西，而無需分別去修改各個(gè)widget。
8. build方法返回了一個(gè)Scaffold的東西，這個(gè)翻譯過來是個(gè)腳手架的意思，它提供了默認(rèn)的導(dǎo)航欄、標(biāo)題和包含主屏幕widget樹的body屬性，這個(gè)就像蓋樓時(shí)候的腳手架一樣，你可以用這個(gè)腳手架構(gòu)建不同的樓層，也就是App頁面的大體框架。
9. 腳手架里包含了一個(gè)body和floatingActionButton屬性，body里展示了兩段text，分別是一段文字和計(jì)數(shù)器的次數(shù)，floatingActionButton就是右下角的那個(gè)加號(hào)按鈕，按鈕的onPressed回調(diào)傳入的是_incrementCounter方法，也就是讓_counter++。

現(xiàn)在，我們將整個(gè)計(jì)數(shù)器執(zhí)行流程串起來：當(dāng)右下角的floatingActionButton按鈕被點(diǎn)擊之后，會(huì)調(diào)用_incrementCounter方法。在_incrementCounter方法中，首先會(huì)自增_counter計(jì)數(shù)器（狀態(tài)），然后setState會(huì)通知Flutter框架狀態(tài)發(fā)生變化，接著，F(xiàn)lutter框架會(huì)調(diào)用build方法以新的狀態(tài)重新構(gòu)建UI，最終顯示在設(shè)備屏幕上。

至此一個(gè)簡單的Flutter頁面講解完了，看了一下其實(shí)也能讀懂，和iOS一樣，跟界面打交道最難的是要用一些系統(tǒng)提供的基本組件和自定義的組件來完成各種各樣的布局，F(xiàn)lutter和iOS不同的是，他的系統(tǒng)為我們提供了很多現(xiàn)成的組件，很多稍微復(fù)雜的布局可以直接使用，提供給我們更多的API，寫起來非常輕松，但官方提供給我們這些便利的同時(shí)也帶給我們了解這些各式各樣widget的難度，widget的數(shù)量繁多，需要我們花更多的時(shí)間去學(xué)習(xí)和運(yùn)用這些widget，最終能夠在不同的場(chǎng)景熟練運(yùn)用不同的widget，大概先說這些。

參考資料：
Flutter實(shí)戰(zhàn)