XOOPS輕鬆架

Dart 及 flutter 初體驗
==================

1. 入口檔：`/lib/main.dart`
2. 決定要載入android或IOS的風格（二選一即可） 
    ```dart
    import 'package:flutter/cupertino.dart'; //IOS
    import 'package:flutter/material.dart'; //Android
    ```
3. Dart的入口函數：`main()`，flutter的入口函數為 `runApp()`（由 package:flutter/material.dart 提供） 
    ```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`中定義的屬於全局主題）： 
    ```dart
    new MaterialApp(
        title: 'Flutter Demo',
        theme: new ThemeData(
            primarySwatch: Colors.blue,
        ),
    );
    ```
    
    詳情可參考：<https://flutterchina.club/cookbook/design/themes/>
    
     <table> <thead> <tr> <th>屬性</th> <th>解釋</th> </tr> </thead> <tbody> <tr> <td>brightness</td> <td>Brightness類型，應用程序的整體主題亮度。用於按鈕等小部件，以確定在不使用主色（primaryColor）或強調色（accentColor）時選擇什麼顏色。當亮度較暗時，畫布、卡片和原色都較暗。當亮度為光時，畫布和卡片的顏色是明亮的，原色的暗度根據原色亮度變化。當亮度較暗時，原色（primaryColor）與卡片和畫布顏色的對比度較差;當亮度較暗時，用白色或亮藍色來對比。</td> </tr> <tr> <td>primaryColor</td> <td>Color類型，App主要部分的背景色（ToolBar,Tabbar等）</td> </tr> <tr> <td>primaryColorBrightness</td> <td>Brightness類型，primaryColor的亮度，用於確定設置在primaryColor上部的文本和圖標顏色(如:工具欄文本(toolbar text))。</td> </tr> <tr> <td>primaryColorLight</td> <td>Color類型，primaryColor的較淺版本</td> </tr> <tr> <td>primaryColorDark</td> <td>Color類型，primaryColor的較深版本</td> </tr> <tr> <td>accentColor</td> <td>Color類型，前景色(按鈕、文本、覆蓋邊緣效果等)</td> </tr> <tr> <td>accentColorBrightness</td> <td>Brightness類型，accentColor的亮度。用於確定位於accentColor上部的文本和圖標顏色(例如，浮動操作按鈕(FloatingButton)上的圖標)</td> </tr> <tr> <td>canvasColor</td> <td>Color類型，MaterialType.canvas Material的默認顏色。</td> </tr> <tr> <td>scaffoldBackgroundColor</td> <td>Color類型，作為Scaffold下的Material默認顏色，用於materia應用程序或app內頁面的背景色。</td> </tr> <tr> <td>bottomAppBarColor</td> <td>Color類型，bottomAppBarColor的默認顏色。這可以通過指定BottomAppBar.color來覆蓋。</td> </tr> <tr> <td>cardColor</td> <td>Color類型，用在卡片(Card)上的Material的顏色。</td> </tr> <tr> <td>dividerColor</td> <td>Color類型，分隔符(Dividers)和彈窗分隔符(PopupMenuDividers)的顏色，也用於ListTiles和DataTables的行之間。要創建使用這種顏色的合適的邊界，請考慮Divider.createBorderSide。</td> </tr> <tr> <td>highlightColor</td> <td>Color類型，用於墨水噴濺動畫或指示菜單被選中時的高亮顏色</td> </tr> <tr> <td>splashColor</td> <td>Color類型，墨水濺出的顏色</td> </tr> <tr> <td>splashFactory</td> <td>InteractiveInkFeatureFactory類型，定義InkWall和InkResponse產成的墨水噴濺時的外觀。</td> </tr> <tr> <td>selectedRowColor</td> <td>Color類型，用於高亮選定行的顏色。</td> </tr> <tr> <td>unselectedWidgetColor</td> <td>Color類型，小部件處於非活動(但啟用)狀態時使用的顏色。例如，未選中的複選框。通常與accentColor形成對比。</td> </tr> <tr> <td>disabledColor</td> <td>Color類型，無效的部件(widget)的顏色，不管它們的狀態如何。例如，一個禁用的複選框(可以選中或不選中)。</td> </tr> <tr> <td>buttonColor</td> <td>Color類型，Material中RaisedButtons使用的默認填充色。</td> </tr> <tr> <td>buttonTheme</td> <td>ButtonThemeData類型，定義按鈕小部件的默認配置，如RaisedButton和FlatButton。</td> </tr> <tr> <td>secondaryHeaderColor</td> <td>Color類型，有選定行時PaginatedDataTable標題的顏色</td> </tr> <tr> <td>textSelectionColor</td> <td>Color類型，文本字段(如TextField)中文本被選中的顏色。</td> </tr> <tr> <td>cursorColor</td> <td>Color類型，在 Material-style 文本字段(如TextField)中光標的顏色。</td> </tr> <tr> <td>textSelectionHandleColor</td> <td>Color類型，用於調整當前選定文本部分的句柄的顏色。</td> </tr> <tr> <td>backgroundColor</td> <td>Color類型，與primaryColor對比的顏色(例如 用作進度條的剩餘部分)。</td> </tr> <tr> <td>dialogBackgroundColor</td> <td>Color類型，Color類型，Dialog元素的背景色</td> </tr> <tr> <td>indicatorColor</td> <td>Color類型，TabBar中選項選中的指示器顏色。</td> </tr> <tr> <td>hintColor</td> <td>Color類型，用於提示文本或佔位符文本的顏色，例如在TextField中。</td> </tr> <tr> <td>errorColor</td> <td>Color類型，用於輸入驗證錯誤的顏色，例如在TextField中。</td> </tr> <tr> <td>toggleableActiveColor</td> <td>Color類型，用於突出顯示切換Widget（如Switch，Radio和Checkbox）的活動狀態的顏色。</td> </tr> <tr> <td>fontFamily</td> <td>String類型，字體類型</td> </tr> <tr> <td>textTheme</td> <td>TextTheme類型，與卡片和畫布對比的文本顏色</td> </tr> <tr> <td>primaryTextTheme</td> <td>TextTheme類型，與primary color形成對比的文本主題。</td> </tr> <tr> <td>accentTextTheme</td> <td>TextTheme類型，與accent color形成對比的文本主題。</td> </tr> <tr> <td>inputDecorationTheme</td> <td>InputDecorationTheme類型，InputDecorator、TextField和TextFormField的默認InputDecoration值基於此主題。</td> </tr> <tr> <td>iconTheme</td> <td>IconThemeData類型，與卡片和畫布顏色形成對比的圖標主題。</td> </tr> <tr> <td>primaryIconTheme</td> <td>IconThemeData類型，與原色(primary color)形成對比的圖標主題。</td> </tr> <tr> <td>accentIconTheme</td> <td>IconThemeData類型,與前景色(accent color)形成對比的圖標主題。</td> </tr> <tr> <td>sliderTheme</td> <td>SliderThemeData類型，SliderThemeData類型，用於渲染Slider的顏色和形狀。</td> </tr> <tr> <td>tabBarTheme</td> <td>TabBarTheme類型, 一個主題，用於自定義選項卡欄指示器的尺寸、形狀和顏色。</td> </tr> <tr> <td>chipTheme</td> <td>ChipThemeData類型,用於Chip的顏色和樣式</td> </tr> <tr> <td>platform</td> <td>TargetPlatform類型,widget應該適應目標的平台。</td> </tr> <tr> <td>materialTapTargetSize</td> <td>MaterialTapTargetSize類型,配置特定材料部件的hit測試大小。</td> </tr> <tr> <td>pageTransitionsTheme</td> <td>PageTransitionsTheme類型,每個目標平台的默認MaterialPageRoute轉換。</td> </tr> <tr> <td>colorScheme</td> <td>ColorScheme類型,一組13種顏色，可用於配置大多數組件的顏色屬性。</td> </tr> <tr> <td>typography</td> <td>Typography類型,用於配置TextTheme、primaryTextTheme和accentTextTheme的顏色和幾何文本主題值。</td> </tr> </tbody> </table>
8. 局部主題：若只有某些地方會用得到的話，有兩種方式，第一種是建立一個特有的主題：
    
     
    ```dart
    new Theme(
        data: new ThemeData(
            primarySwatch: Colors.blue,
        ),
        child: new FloatingActionButton(
            onPressed: () {},
            child: new Icon(Icons.add),
        ),
    );
    ```
    
    第二種是擴展父主題（主要是用`copyWith`方法）：
    
     
    ```dart
    new Theme(
        data: Theme.of(context).copyWith(accentColor: Colors.yellow),
        child: new FloatingActionButton(
            onPressed: null,
            child: new Icon(Icons.add),
        ),
    );
    ```
    
    函數`Theme.of(context)`會通過內文來取得主題設定（如果找不到，就會找全局主題）
9. 完整範例
    
     
    ```bash
    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.
        );
      }
    }
    
    ```

書籍目錄

展開 | 闔起

快速登入

進階搜尋

計數器

今天：
昨天：
總計：

主內容區域

MarkDown

左邊區域內容

書籍目錄

快速登入

右邊區域內容

計數器

頁尾區域