環境搭建請參考之前寫的一篇文章：Flutter_初體驗_創建第一個應用
1、創建項目
采用AndroidStudio構建本項目，FIle>New>New Flutter Project…
創建后的項目如下圖所示：
我們着重需要注意一下幾個文件夾,其他的暫時不用理會
| 文件夾 | 作用 |
|---|---|
| android | android平台相關代碼 |
| ios | ios平台相關代碼 |
| lib | flutter相關代碼，我們主要編寫的代碼就在這個文件夾 |
| pubspec.yaml | 配置文件，一般存放一些第三方的依賴。 |
2、編寫入口文件
flutter 中的入口文件為 main.dart，該文件位於 lib 文件夾中。
默認創建的項目已經給我帶了一些測試代碼，運行起來看一下：
接下來要開始我們自己的項目書寫了。
2.1 建立主頁文件和目錄結構
我們在 lib 目錄下建立一個 pages 目錄，這個目錄主要放置項目所用的所有 UI 界面的文件，在 page 目錄下，建立 index_page.dart 文件。
有了這個文件，我們先建立一個靜態 Widget，主要是檢驗我們的入口文件是否可用。
index_page.dart 代碼：
import 'package:flutter/material.dart';
class IndexPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text("百姓生活+"),),
body: new Center(
child: Text("我是居中的文本內容"),
),
);
}
}
代碼寫完后，需要在 main.dart(入口文件)，用 impoart 引入 index_page.dart 文件。
import './pages/index_page.dart';
main.dart 全部代碼：
import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/index_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
child:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: new IndexPage(),
)
);
}
}
我們再次運行起來看一下：
3、最后補充
跟着學習，以及在整理這個系列筆記中，關於文中一些基礎部分不再累贅，比如 StatefulWidget/StateLessWidget區別、Container/Center/Text基礎控件等。