在這個系列中，我們將學習如何使用google的移動開發框架flutter創建一個電商應用。本文是flutter框架系列教程的第一部分，將學習如何安裝Flutter開發環境并創建第一個Flutter應用，并學習Flutter應用開發中的核心概念，例如widget、狀態等。

本系列教程包含如下四個部分，敬請期待：

1. 如何從零構建flutter應用
2. 如何在flutter中布局元素
3. 如何在flutter中組織數據
4. 如何在flutter中展示數據

1. 開發環境安裝與Flutter項目創建

Flutter的開發文檔相當出色，請參考官方文檔先安裝開發環境。

一旦開發環境安裝好，我們可以創建一個新的測試項目。我傾向于使用android studio，因為它為flutter應用的開發提供了一個完備的集成開發環境。你需要在Android studio中安裝一個Dard語言插件。

現在啟動Android Studio，你會看到初始化Flutter項目的選項：

從配置列表中選擇Flutter Application 。

可以為你的第一個Flutter應用起一個酷炫的名字，不過如果你和我一樣不善于起名，就用timer好了。

對話框的最后一步，會要求我們填寫應用的包名：

接下來Flutter SDK就會為應用創建一個初始的目錄結構，main.dart是應用執行的入口。

2. 編寫并測試應用代碼

在Flutter中，一切都是控件（widget）。Flutter應用中的圖像、圖標和文本都是widget。布局元素例如行、列、柵格等用來安排其他widget的位置、大小和對齊，而這些布局元素本身也是widget。

參考如下代碼修改你的main.dart文件：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(appBar: AppBar(title: Text('Welcome to Flutter'),),body: Center(child: Text('Hello World'),),),);}
}

現在啟動Android模擬器：

注意widget的焦點，我們接下來將修改MaterialApp的內容。先看一下原始版本：

body: Center(child: Text('Hello World'),
)

Flutter中的布局元素（也是widget）可以根據其是否支持包含多個widget，而簡單地歸類為兩種類型。例如，Container、Padding只能包含一個子widget，而Row、Column則可以包含多個。

現在我們在Row布局中引入三個文本widget：

body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text('0'),Text('0'),Text('0'),],),
),

現在看起來是這樣：

在我們開始設置組件的樣式之前，建議先創建一個新的widget來處理樣式問題，以便遵循DRY（Don't Repeat Yoursel）原則。

將三個子widget用一個自定義widget（后面解釋）替換。現在main.dart文件變成：

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(appBar: AppBar(title: Text('Timer'),),body: Center(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[CustomTextContainer(),CustomTextContainer(),CustomTextContainer(),],),),),);}
}class CustomTextContainer extends StatelessWidget {@overrideWidget build(BuildContext context) {return Text('00');}
}

我不是很擅長用戶界面，但是我們還是盡力吧，加點背景色，留點空白：

class CustomTextContainer extends StatelessWidget {CustomTextContainer({this.label, this.value});final String label;final String value;@overrideWidget build(BuildContext context) {return Container(margin: EdgeInsets.symmetric(horizontal: 5),padding: EdgeInsets.all(20),decoration: new BoxDecoration(borderRadius: new BorderRadius.circular(10),color: Colors.black87,),child: Column(mainAxisSize: MainAxisSize.min,children: <Widget>[Text('$value',style: TextStyle(color: Colors.white,fontSize: 54,fontWeight: FontWeight.bold,),),Text('$label',style: TextStyle(color: Colors.white70,),)],),);}
}

同時，在文本下面插入一個按鈕widget，修改后的代碼運行結果如下：

現在到了app最不可或缺的部分了：狀態。狀態將持有timer的當前值和運行標識。我
補充了一個TimerState類，它負責維護狀態，同時構建widget樹。

class Timer extends StatefulWidget {@overrideState<StatefulWidget> createState() {return new TimerState();}
}class TimerState extends State<Timer> {int secondsPassed = 0;bool isActive = false;@overrideWidget build(BuildContext context) {// Return Widget Tree}
}

按鈕用來切換timer的運行或者停止：

RaisedButton(child: Text(isActive ? 'STOP' : 'START'),onPressed: () {setState(() {isActive = !isActive;});},
)

Dart有個用于異步操作的優雅的模塊。我們可以使用其Timer類來實現讀秒。修改后的TimerAppState代碼如下，注意我們已經重構Timer類并改名為TimerApp以避免與異步模塊中的Timer類混淆：

class TimerAppState extends State<TimerApp> {static const duration = const Duration(seconds:1);int secondsPassed = 0;bool isActive = false;Timer timer;void handleTick() {if (isActive) {setState(() {secondsPassed = secondsPassed + 1;});}}@overrideWidget build(BuildContext context) {if (timer == null)timer = Timer.periodic(duration, (Timer t) {handleTick();});int seconds = secondsPassed % 60;int minutes = secondsPassed ~/ 60;int hours = secondsPassed ~/ (60*60);return MaterialApp(...)}
}

好了，我們已經完成了第一個Flutter應用，完整的Dard代碼可以在這里下載。

原文鏈接：【Flutter教程】從零構建電商應用（一）

匯智網翻譯整理，轉載請標明出處。