Flutter學習指南：編寫第一個Flutter應用

本文由 愛學園平臺 進行聯合編輯整理輸出

原做者：愛學園——莫比烏斯環

這是 Flutter 系列文章的第二篇，關於 Flutter 的相關學習文章後面還有不少，若是您喜歡的話，請持續關注 ，謝謝！

Flutter 是 Google 推出的移動端跨平臺開發框架，使用的編程語言是Dart，是繼 React Native 以後開發者對跨平臺解決方案的又一探索，追其根源，本質上以移動端的統一爲走向，縮短人力、物力、時間！這是開發者、企業的共同目標。本篇咱們以一個簡單的 Flutter 應用，爲你們講解 Flutter 應用的開發流程。

咱們本篇的主旨是讓用戶對 Flutter 應用的建立、調試、打包、安裝等過程有一個直觀的認識。在你們的記憶中是否是學習一門語言，都是以 Hello World 開始的，Flutter 也不例外，今天咱們以一個 Hello Flutter 應用開啓咱們的第一次～，界面很是簡單，主要就是界面上展現一個計數器，隨着用戶的點擊累加。

建立工程

在建立項目以前，你須要配置開發環境，若是你尚未完成此操做，請移步開發環境搭建，若是已完成，請跳過，這裏咱們經過Android Studio編譯器來建立工程。

1. 選擇 File>New Flutter Project
2. 選擇 Flutter application 做爲 project 類型, 而後點擊 Next
3. 輸入項目名稱 (如 flutter-app)，存儲路徑，Flutter SDK 路徑選擇, 而後點擊 Next
4. 建立包名（小寫、字母、數字、下劃線），點擊Finish，
5. 等待 Android Studio 建立項目（第一次可能須要點時間）

1.工程目錄結構

1. android Android 平臺相關代碼
2. ios IOS 平臺相關代碼
3. build 項目編譯產生的目錄，此時不須要關心（後期編譯的安裝包輸出在該目錄下）
4. lib 跨平臺代碼，也是 Flutter 項目主要關心的目錄
5. test 測試相關代碼
6. pubspec.yaml 項目描述文件，至關於 NodeJs 項目的 package.json,裏面包含了項目的描述信息以及所須要的依賴的庫

2.Flutter工程入口文件——lib/main.dart

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
        body: new Center(
          child: new Text('Hello Flutter'),
        ),
      ),
    );,
    );
  }
}
複製代碼

3.運行上述代碼，效果以下：

分析

• 默認示例建立一個Material APP。Material是一種標準的移動端和web端的視覺設計語言。Flutter提供了一套豐富的Material widgets。
• main 函數（執行入口）使用了（=>）符號，這是Dart中單行函數或方法的簡寫。
• 該應用程序繼承 StatelessWidget ，這說明應用自己也是一個 Widget。
• Scaffold 是Material library中提供的一個widget，它提供了默認的導航欄、標題和包含主屏幕widget樹的body屬性。
• 從上能夠看出Widget的主要工做是提供一個build()方法來描述如何根據其餘較低級別的widget來顯示本身。
• 本事例中的body的widget樹中包含了一個Center widget，Center widget又包含了一個Text子widget。Center widget能夠將其子widget樹對齊到屏幕中心。

修改工程

修改工程使其按照咱們的設想變動，在屏幕上添加一個展現文本控件和一個可點擊按鈕，所以咱們須要按照以下步驟修改入口文件：lib/main.dart。

1.添加一個有狀態的部件（Stateful widget）

這裏咱們須要明白如下幾個概念：

• Stateless widgets 是不可變的，這意味着它們的屬性不能改變--全部的值都是最終的。
• Stateful widgets 持有的狀態可能在widget生命週期中發生變化。實現一個stateful widget至少須要兩個類：
  1. 一個StatefulWidget類。
  2. 一個State類。StatefulWidget類自己是不可變的，可是 State 類在widget生命週期中始終存在。

在這一步，添加一個有狀態的widget--MyHomePage，它建立其State類_MyHomePageState。這裏咱們將MyHomePage做爲一個widget添加到現有的無狀態widget--MyApp內部。

1. 建立一個State類，添加到main.dart的底部：

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key key, this.title}) : super(key: key);
   
     // This widget is the home page of your application. It is stateful, meaning
     // that it has a State object (defined below) that contains fields that affect
     // how it looks.
   
     // This class is the configuration for the state. It holds the values (in this
     // case the title) provided by the parent (in this case the App widget) and
     // used by the build method of the State. Fields in a Widget subclass are
     // always marked "final".
   
     final String title;
   
     @override
     _MyHomePageState createState() => new _MyHomePageState();
   }
   複製代碼

2. 添加 _MyHomePageState 類，該應用程序的大部分邏輯和狀態管理代碼都在該類中，這個類保存屏幕上用戶點擊的次數，隨着用戶的點擊，次數不斷增長，且展現在界面上，代碼以下：

   class _MyHomePageState extends State<MyHomePage> {
   	int _counter = 0;
   
     void _incrementCounter() {
       setState(() {
         _counter++;
       });
     }
   
     @override
     Widget build(BuildContext context) { 
       return new Scaffold(
         appBar: new AppBar(
           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.display1,
               ),
             ],
           ),
         ),
         floatingActionButton: new FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: new Icon(Icons.add),
         ), // This trailing comma makes auto-formatting nicer for build methods.
       );
     }
   }
   複製代碼

3. 替換MyApp中的build方法內部home參數爲新定義的MyHomePage widget，代碼以下：

   class MyApp extends StatelessWidget {
     // This widget is the root of your application.
     @override
     Widget build(BuildContext context) {
       return new MaterialApp(
         title: 'Welcome to Flutter',
         theme: new ThemeData(
       primarySwatch: Colors.green,//變動主題樣式
     ),
         home: new MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   複製代碼

4. 重啓應用程序。模擬器上的行爲應該變動以下，展現一個計數器和按鈕，點擊按鈕，文本計數增長（這裏樣式作了下調整），效果以下：

   

5. 修改界面代碼，樣式，保存後界面數字並無從零開始，這說明熱重載與重啓的區別，它只是單純的改變相應的變化，State的狀態會持續保存。

到此咱們應用就改造完畢！代碼很簡單，咱們這裏主要想讓讀者明白的是建立一個Flutter應用的流程、組成部分和一些簡單配置。

調試（debug）

一種採用debug模式調試，中止當前應用，點擊頂部工具欄Debug main.dart 小按鈕，啓動應用，你能夠在您須要監測代碼處像原生同樣打個斷點，這裏同原生並沒有兩樣，不作詳細講解。 另外一種log日誌輸出方式調試：

debugPrint("message info ...")
複製代碼

這裏只簡單介紹下，不是本章的重點，此處不作詳細分析，更多的調試方法讀者能夠根據須要查看https://flutter.io/debugging/ 進一步學習。

獲取apk安裝包

應用通過運行、測試，最後確定須要安裝到真機上，所以須要打包apk分發給用戶使用。以下咱們將分析Flutter如何進行項目打包（Android）。

1. 查看android包下的清單配置文件AndroidManifest.xml。這是個模版生成文件，用戶可根據須要進行修改；
2. 構建文件build.gradle,這裏同上同樣也可作一些配置，好比說自動化簽名配置，資源壓縮，代碼混淆配置等等；
3. 啓動圖標的替換；
4. 編譯apk。執行以下命令flutter build apk，輸出apk安裝包到build/app/outputs/apk/release/app-release.apk;
5. 安裝，在根目錄下執行flutter install就能夠安裝這個apk了。

總結

閱讀完上述步驟我想您在下面幾個方面會有深刻的思考：

1. 從頭開始建立一個Flutter應用。
2. 編寫Dart代碼。
3. 使用熱重載加快開發週期。
4. 一個有狀態的widget建立過程和概念。
5. 如何打包和調試app

對於IOS的開發，讀者能夠看https://flutter.io/ios-release/，這裏就再也不詳細描述了。好吧到這裏您的第一個Flutter應用應該完成了吧。若是遇到問題能夠留言咱們一塊兒討論，謝謝！