4. 建立flutter專案

1. 入口檔：/lib/main.dart
2. 決定要載入android或IOS的風格（二選一即可）

   import 'package:flutter/cupertino.dart'; //IOS
   import 'package:flutter/material.dart'; //Android

    

3. Dart的入口函數：main()，flutter的入口函數為 runApp()（由 package:flutter/material.dart 提供）

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MaterialApp(home: HomePage()));
   }
   
   class HomePage extends StatefulWidget {
     @override
     _HomePageState createState() => _HomePageState();
   }
   
   class _HomePageState extends State<HomePage> {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(
             'Phoho Show',
             style: TextStyle(color: Color(0xFFFFF600)),
           ),
         ),
         body: Column(
           children: [
             Image.network(
                 'https://cdn.pixabay.com/photo/2016/12/11/12/02/bled-1899264_960_720.jpg'),
             Image.network(
                 'https://cdn.pixabay.com/photo/2017/01/19/23/46/panorama-1993645_960_720.jpg'),
             Image.network(
                 'https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072_960_720.jpg'),
           ],
         ),
       );
     }
   }
   

    

4. runApp()函數可以將根組件填滿整個螢幕（不用程式也會跑，只是螢幕上啥都沒有），可視為flutter框架的入口

   1. MaterialApp()則是套用Material風格的app入口，源自 C:\src\flutter\packages\flutter\lib\src\material\app.dart
   2. home 參數用來設定首頁頁面的Widget
   3. Widget 是 flutter 的主角，大大小小的東西都是 Widget
   4. Dart 2.1 以後，無須再用 new 來建立 class，不然應該要寫 new HomePage()
5. StatelessWidget 是無狀態組件（不需要改變物件狀態時使用，較省資源）：所有屬性均不可變，所有值都是final（如：MyApp）
6. StatefulWidget 是有狀態組件（物件狀態會被改變時使用，系統需隨時監控狀態，所以稍耗資源）：可在Widget生命周期間發生變化，實現StatefulWidget 至少需要兩個類
   • StatefulWidget：裡面只要有個createState()即可。
   • State：在Widget生命周期間始終存在（如：_MyHomePageState ）
     • build() 用來繪製畫面
     • Scaffold() 是設定好的畫面鷹架
       • appBar：定義App標題，可以用 AppBar() 來定義App上方標題的外觀及內容
7. 建立Flutter主題：為了統一風格，並套用某種外觀設定（在MaterialApp中定義的屬於全局主題）：

   new MaterialApp(
       title: 'Flutter Demo',
       theme: new ThemeData(
           primarySwatch: Colors.blue,
       ),
   );

   詳情可參考：https://flutterchina.club/cookbook/design/themes/

   屬性	解釋
   brightness	Brightness類型，應用程序的整體主題亮度。用於按鈕等小部件，以確定在不使用主色（primaryColor）或強調色（accentColor）時選擇什麼顏色。當亮度較暗時，畫布、卡片和原色都較暗。當亮度為光時，畫布和卡片的顏色是明亮的，原色的暗度根據原色亮度變化。當亮度較暗時，原色（primaryColor）與卡片和畫布顏色的對比度較差;當亮度較暗時，用白色或亮藍色來對比。
   primaryColor	Color類型，App主要部分的背景色（ToolBar,Tabbar等）
   primaryColorBrightness	Brightness類型，primaryColor的亮度，用於確定設置在primaryColor上部的文本和圖標顏色(如:工具欄文本(toolbar text))。
   primaryColorLight	Color類型，primaryColor的較淺版本
   primaryColorDark	Color類型，primaryColor的較深版本
   accentColor	Color類型，前景色(按鈕、文本、覆蓋邊緣效果等)
   accentColorBrightness	Brightness類型，accentColor的亮度。用於確定位於accentColor上部的文本和圖標顏色(例如，浮動操作按鈕(FloatingButton)上的圖標)
   canvasColor	Color類型，MaterialType.canvas Material的默認顏色。
   scaffoldBackgroundColor	Color類型，作為Scaffold下的Material默認顏色，用於materia應用程序或app內頁面的背景色。
   bottomAppBarColor	Color類型，bottomAppBarColor的默認顏色。這可以通過指定BottomAppBar.color來覆蓋。
   cardColor	Color類型，用在卡片(Card)上的Material的顏色。
   dividerColor	Color類型，分隔符(Dividers)和彈窗分隔符(PopupMenuDividers)的顏色，也用於ListTiles和DataTables的行之間。要創建使用這種顏色的合適的邊界，請考慮Divider.createBorderSide。
   highlightColor	Color類型，用於墨水噴濺動畫或指示菜單被選中時的高亮顏色
   splashColor	Color類型，墨水濺出的顏色
   splashFactory	InteractiveInkFeatureFactory類型，定義InkWall和InkResponse產成的墨水噴濺時的外觀。
   selectedRowColor	Color類型，用於高亮選定行的顏色。
   unselectedWidgetColor	Color類型，小部件處於非活動(但啟用)狀態時使用的顏色。例如，未選中的複選框。通常與accentColor形成對比。
   disabledColor	Color類型，無效的部件(widget)的顏色，不管它們的狀態如何。例如，一個禁用的複選框(可以選中或不選中)。
   buttonColor	Color類型，Material中RaisedButtons使用的默認填充色。
   buttonTheme	ButtonThemeData類型，定義按鈕小部件的默認配置，如RaisedButton和FlatButton。
   secondaryHeaderColor	Color類型，有選定行時PaginatedDataTable標題的顏色
   textSelectionColor	Color類型，文本字段(如TextField)中文本被選中的顏色。
   cursorColor	Color類型，在 Material-style 文本字段(如TextField)中光標的顏色。
   textSelectionHandleColor	Color類型，用於調整當前選定文本部分的句柄的顏色。
   backgroundColor	Color類型，與primaryColor對比的顏色(例如 用作進度條的剩餘部分)。
   dialogBackgroundColor	Color類型，Color類型，Dialog元素的背景色
   indicatorColor	Color類型，TabBar中選項選中的指示器顏色。
   hintColor	Color類型，用於提示文本或佔位符文本的顏色，例如在TextField中。
   errorColor	Color類型，用於輸入驗證錯誤的顏色，例如在TextField中。
   toggleableActiveColor	Color類型，用於突出顯示切換Widget（如Switch，Radio和Checkbox）的活動狀態的顏色。
   fontFamily	String類型，字體類型
   textTheme	TextTheme類型，與卡片和畫布對比的文本顏色
   primaryTextTheme	TextTheme類型，與primary color形成對比的文本主題。
   accentTextTheme	TextTheme類型，與accent color形成對比的文本主題。
   inputDecorationTheme	InputDecorationTheme類型，InputDecorator、TextField和TextFormField的默認InputDecoration值基於此主題。
   iconTheme	IconThemeData類型，與卡片和畫布顏色形成對比的圖標主題。
   primaryIconTheme	IconThemeData類型，與原色(primary color)形成對比的圖標主題。
   accentIconTheme	IconThemeData類型,與前景色(accent color)形成對比的圖標主題。
   sliderTheme	SliderThemeData類型，SliderThemeData類型，用於渲染Slider的顏色和形狀。
   tabBarTheme	TabBarTheme類型, 一個主題，用於自定義選項卡欄指示器的尺寸、形狀和顏色。
   chipTheme	ChipThemeData類型,用於Chip的顏色和樣式
   platform	TargetPlatform類型,widget應該適應目標的平台。
   materialTapTargetSize	MaterialTapTargetSize類型,配置特定材料部件的hit測試大小。
   pageTransitionsTheme	PageTransitionsTheme類型,每個目標平台的默認MaterialPageRoute轉換。
   colorScheme	ColorScheme類型,一組13種顏色，可用於配置大多數組件的顏色屬性。
   typography	Typography類型,用於配置TextTheme、primaryTextTheme和accentTextTheme的顏色和幾何文本主題值。

8. 局部主題：若只有某些地方會用得到的話，有兩種方式，第一種是建立一個特有的主題：

   new Theme(
       data: new ThemeData(
           primarySwatch: Colors.blue,
       ),
       child: new FloatingActionButton(
           onPressed: () {},
           child: new Icon(Icons.add),
       ),
   );

   第二種是擴展父主題（主要是用copyWith方法）：

   new Theme(
       data: Theme.of(context).copyWith(accentColor: Colors.yellow),
       child: new FloatingActionButton(
           onPressed: null,
           child: new Icon(Icons.add),
       ),
   );

   函數Theme.of(context)會通過內文來取得主題設定（如果找不到，就會找全局主題）

9. 完整範例

   import 'package:flutter/foundation.dart';
   import 'package:flutter/material.dart';
   
   void main() => runApp(new MyApp());
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       final appName = '自定義主題';
       return new MaterialApp(
         title: appName,
         theme: new ThemeData(
           brightness: Brightness.light,
           primaryColor: Colors.lightGreen[600],
           accentColor: Colors.orange[600],
         ),
         home: new MyHomePage(
           title: appName,
         ),
       );
     }
   }
   
   class MyHomePage extends StatelessWidget {
     final String title;
   
     MyHomePage({Key key, this.title}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return new Scaffold(
         appBar: new AppBar(
           title: new Text(title),
         ),
         body: new Center(
           child: new Container(
             color: Theme.of(context).accentColor,
             child: new Text(
               '套用背景顏色的文字組件',
               style: Theme.of(context).textTheme.title,
             ),
           ),
         ),
         floatingActionButton: new Theme(
           data: Theme.of(context).copyWith(accentColor: Colors.grey),
           child: new FloatingActionButton(
             onPressed: null,
             child: new Icon(Icons.add),
           ),
         ), // This trailing comma makes auto-formatting nicer for build methods.
       );
     }
   }