本文由 愛學園平臺 進行聯合編輯整理輸出
原作者：愛學園——莫比烏斯環
這是 Flutter 系列文章的第二篇，關於 Flutter 的相關學習文章後面還有很多，如果您喜歡的話，請持續關注 ，謝謝！
Flutter 是 Google 推出的移動端跨平臺開發框架，使用的程式語言是Dart，是繼 React Native 之後開發者對跨平臺解決方案的又一探索，追其根源，本質上以移動端的統一為走向，縮短人力、物力、時間！這是開發者、企業的共同目標。本篇我們以一個簡單的 Flutter 應用，為大家講解 Flutter 應用的開發流程。
我們本篇的主旨是讓使用者對 Flutter 應用的建立、除錯、打包、安裝等過程有一個直觀的認識。在大家的記憶中是不是學習一門語言，都是以 Hello World 開始的，Flutter 也不例外，今天我們以一個 Hello Flutter 應用開啟我們的第一次～，介面非常簡單，主要就是介面上展示一個計數器，隨著使用者的點選累加。
建立工程
在建立專案之前，你需要配置開發環境，如果你還沒有完成此操作，請移步開發環境搭建，如果已完成，請跳過，這裡我們通過Android Studio編譯器來建立工程。
- 選擇 File>New Flutter Project
- 選擇 Flutter application 作為 project 型別, 然後點選 Next
- 輸入專案名稱 (如 flutter-app)，儲存路徑，Flutter SDK 路徑選擇, 然後點選 Next
- 建立包名（小寫、字母、數字、下劃線），點選Finish，
- 等待 Android Studio 建立專案（第一次可能需要點時間）
1.工程目錄結構
androidAndroid 平臺相關程式碼iosIOS 平臺相關程式碼build專案編譯產生的目錄，此時不需要關心（後期編譯的安裝包輸出在該目錄下）lib跨平臺程式碼，也是 Flutter 專案主要關心的目錄test測試相關程式碼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至少需要兩個類：
- 一個StatefulWidget類。
- 一個State類。StatefulWidget類本身是不可變的，但是 State 類在widget生命週期中始終存在。
在這一步，新增一個有狀態的widget--MyHomePage，它建立其State類_MyHomePageState。這裡我們將MyHomePage作為一個widget新增到現有的無狀態widget--MyApp內部。
-
建立一個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(); } 複製程式碼 -
新增 _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. ); } } 複製程式碼 -
替換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'), ); } } 複製程式碼 -
重啟應用程式。模擬器上的行為應該變更如下，展示一個計數器和按鈕，點選按鈕，文字計數增加（這裡樣式做了下調整），效果如下：
-
修改介面程式碼，樣式，儲存後介面數字並沒有從零開始，這說明熱過載與重啟的區別，它只是單純的改變相應的變化，State的狀態會持續儲存。
到此我們應用就改造完畢！程式碼很簡單，我們這裡主要想讓讀者明白的是建立一個Flutter應用的流程、組成部分和一些簡單配置。
除錯（debug）
一種採用debug模式除錯，停止當前應用，點選頂部工具欄Debug main.dart 小按鈕，啟動應用，你可以在您需要監測程式碼處像原生一樣打個斷點，這裡同原生並無兩樣，不做詳細講解。
另一種log日誌輸出方式除錯：
debugPrint("message info ...")
複製程式碼這裡只簡單介紹下，不是本章的重點，此處不做詳細分析，更多的除錯方法讀者可以根據需要檢視https://flutter.io/debugging/ 進一步學習。
獲取apk安裝包
應用經過執行、測試，最後肯定需要安裝到真機上，因此需要打包apk分發給使用者使用。如下我們將分析Flutter如何進行專案打包（Android）。
- 檢視android包下的清單配置檔案AndroidManifest.xml。這是個模版生成檔案，使用者可根據需要進行修改；
- 構建檔案
build.gradle,這裡同上一樣也可做一些配置，比如說自動化簽名配置，資源壓縮，程式碼混淆配置等等； - 啟動圖示的替換；
- 編譯apk。執行如下命令
flutter build apk，輸出apk安裝包到build/app/outputs/apk/release/app-release.apk; - 安裝，在根目錄下執行
flutter install就可以安裝這個apk了。
總結
閱讀完上述步驟我想您在下面幾個方面會有深入的思考：
- 從頭開始建立一個Flutter應用。
- 編寫Dart程式碼。
- 使用熱過載加快開發週期。
- 一個有狀態的widget建立過程和概念。
- 如何打包和除錯app
對於IOS的開發，讀者可以看https://flutter.io/ios-release/，這裡就不再詳細描述了。好吧到這裡您的第一個Flutter應用應該完成了吧。如果遇到問題可以留言我們一起討論，謝謝！