Flutter入坑指南:編寫第一個Flutter應用

莫比烏斯環發表於2018-11-12

這是 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.執行上述程式碼,效果如下:

Hello Flutter

分析

  • 預設示例建立一個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. 重啟應用程式。模擬器上的行為應該變更如下,展示一個計數器和按鈕,點選按鈕,文字計數增加(這裡樣式做了下調整),效果如下:

    demo

  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應用應該完成了吧。如果遇到問題可以留言我們一起討論,謝謝!

相關文章