:::

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.
        );
      }
    }
    

     


:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D42%26tbdsn%3D1353

計數器

今天: 2336233623362336
昨天: 3438343834383438
總計: 7392665739266573926657392665739266573926657392665