Flutter入門教程從零構建電商應用（一）

在這個系列中，我們將學習如何使用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好了。

[上傳失敗...(image-ae37e3-1544662561857)]

對話方塊的最後一步，會要求我們填寫應用的包名：

接下來flutter sdk就會為應用建立乙個初始的目錄結構，main.dart是應用執行的入口。

2. 編寫並測試應用**

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

import 'package:flutter/material.dart';
@override
widget build(buildcontext context) 
}

現在啟動android模擬器：

[站外上傳中...(image-343cff-1544662561857)]

body: center(
child: text('hello world'),
)

flutter中的布局元素（也是widget）可以根據其是否支援包含多個widget，而簡單地歸類為兩種型別。例如，container、padding只能包含乙個子widget，而row、column則可以包含多個。

現在我們在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) 
}

同時，在文字下面插入乙個按鈕widget，修改後的**執行結果如下：

[站外上傳中...(image-d874b4-1544662561857)]

class timer extends statefulwidget 
}class timerstate extends state
}

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

raisedbutton(
child: text(isactive ? 'stop' : 'start'),
onpressed: () );},)

static const duration = const duration(seconds:1);

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入門教程從零構建電商應用（一）

Flutter入門教程從零構建電商應用（一）

Flutter 入門教程

Flutter教程從零構建電商應用（一）

Flutter入門教程 從零構建電商應用（一）

Flutter入門教程 從零構建電商應用（一）

Flutter 入門教程

Flutter教程 從零構建電商應用（一）

相關推薦

Flutter入門教程從零構建電商應用（一）

Flutter入門教程從零構建電商應用（一）

Flutter教程從零構建電商應用（一）