在這個系列中，我們將學習如何使用google的移動開發框架flutter建立乙個電商應用。本文是flutter框架系列教程的第一部分，將學習如何安裝flutter開發環境並建立第乙個flutter應用，並學習flutter應用開發中的核心概念，例如widget、狀態等。
本系列教程包含如下四個部分，敬請期待：
如何從零構建flutter應用
如何在flutter中布局元素
如何在flutter中組織資料
如何在flutter中展示資料
1. 開發環境安裝與flutter專案建立
flutter的開發文件相當出色，請參考官方文件先安裝開發環境。
一旦開發環境安裝好，我們可以建立乙個新的測試專案。我傾向於使用android studio，因為它為flutter應用的開發提供了乙個完備的整合開發環境。你需要在android studio中安裝乙個dard語言外掛程式。
現在啟動android studio，你會看到初始化flutter專案的選項：
可以為你的第乙個flutter應用起乙個酷炫的名字，不過如果你和我一樣不善於起名，就用timer好了。
對話方塊的最後一步，會要求我們填寫應用的包名：
接下來flutter sdk就會為應用建立乙個初始的目錄結構，main.dart是應用執行的入口。
2. 編寫並測試應用**
在flutter中，一切都是控制項（widget）。flutter應用中的影象、圖示和文字都是widget。布局元素例如行、列、柵格等用來安排其他widget的位置、大小和對齊，而這些布局元素本身也是widget。
import 'package:flutter/material.dart';
@override
widget build(buildcontext context)
}複製**
body: center(
child: text('hello world'),
)複製**
現在我們在row布局中引入三個文字widget：
body: center(
child: row(
mainaxisalignment: mainaxisalignment.center,
children: [
text('0'),
text('0'),
text('0'),
],),
),複製**
在我們開始設定元件的樣式之前，建議先建立乙個新的widget來處理樣式問題，以便遵循dry（don't repeat yoursel）原則。
將三個子widget用乙個自定義widget（後面解釋）替換。現在main.dart檔案變成：
import 'package:flutter/material.dart';
@override
widget build(buildcontext context)
}class customtextcontainer extends statelesswidget
}複製**
class customtextcontainer extends statelesswidget );
final string label;
final string value;
@override
widget build(buildcontext context)
}複製**
class timer extends statefulwidget
}class timerstate extends state
}複製**
raisedbutton(
child: text(isactive ? 'stop' : 'start'),
onpressed: () );
},)複製**
int secondspassed = 0;
bool isactive = false;
timer timer;
void handletick
() );
}} @override
widget build(buildcontext context) );
int seconds = secondspassed % 60;
int minutes = secondspassed ~/ 60;
int hours = secondspassed ~/ (60*60);
}}複製**
Flutter教程 從零構建電商應用（一）
在這個系列中，我們將學習如何使用google的移動開發框架flutter建立乙個電商應用。本文是flutter框架系列教程的第一部分，將學習如何安裝flutter開發環境並建立第乙個flutter應用，並學習flutter應用開發中的核心概念，例如widget 狀態等。本系列教程包含如下四個部分，敬...
Flutter入門教程 從零構建電商應用（一）
在這個系列中，我們將學習如何使用google的移動開發框架flutter建立乙個電商應用。本文是flutter框架系列教程的第一部分，將學習如何安裝flutter開發環境並建立第乙個flutter應用，並學習flutter應用開發中的核心概念，例如widget 狀態等。本系列教程包含如下四個部分，敬...
Flutter入門教程 從零構建電商應用（一）
在這個系列中，我們將學習如何使用google的移動開發框架flutter建立乙個電商應用。本文是flutter框架系列教程的第一部分，將學習如何安裝flutter開發環境並建立第乙個flutter應用，並學習flutter應用開發中的核心概念，例如widget 狀態等。本系列教程包含如下四個部分，敬...