iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

從零開始的Flutter世界系列 第 12

Day12 第一支 Flutter App

  • 分享至 

  • xImage
  •  

在範例專案的main.dart 檔案裡,有很多預設的英文註釋,解釋專案各個地方是在做什麼、有什麼作用等等,如果對範例程式碼有興趣的人,之後也可以自己看看註解嘗試去瞭解看看內容,但接下來我們先把main.dart 的內容清掉,來從頭寫一支專案試試看吧

在開始前,我們先介紹以下幾個基本的觀念:

Material Design

Material Design 是由 Google 於 2014 推出,為一種UI 的設計風格,定義的範圍很廣,例如:按鈕、AppBar、過場動畫等等

Basic Widget

MaterialApp

將多個經常使用Material Design 的Widget 包裝起來,可以配置該Material Design widget的主題顏色,控制元件的樣式等等

將Material Design widget 透過建構參數 home 傳入MaterialApp

Center

一個置中的layout 佈局, 將widget 透過建構參數 child 傳入Center

Text

文字的widget,可透過 TextStyle 設定文字的樣式

小技巧:

有時候設計多個widget 時,排版不清楚,讓我們很難一眼看出是怎麼設計的,此時可以透過在結尾的小括弧的前面加上逗號,按下儲存時(前面有設定儲存時會自動排版),系統會自動幫我們將多個widget 做縮排

https://ithelp.ithome.com.tw/upload/images/20200925/20118479WRPLfpvaTm.png

加上逗號,按下儲存

https://ithelp.ithome.com.tw/upload/images/20200925/20118479tlvFxVV9oq.png

當完成部分程式碼,想要收縮起來,我們可以按下左側的 -鍵,將該scope 的程式碼收縮起來

https://ithelp.ithome.com.tw/upload/images/20200925/20118479JnAOYmhWby.png

按下左側的 +鍵,將收縮的scope 的程式碼展開

https://ithelp.ithome.com.tw/upload/images/20200925/201184791PX3NN4AOn.png

(快捷鍵是展開: command + + 、收縮: command + - )

然後執行我們的專案,一個Hello Flutter 的畫面就出來了

https://ithelp.ithome.com.tw/upload/images/20200925/20118479eAc4bhntgg.png

Scaffold

為我們常用的Material Design 中的一個模板,主要包含appBarbody以及floatingActionButton等等

https://ithelp.ithome.com.tw/upload/images/20200925/20118479qrgtajuBQz.png

將AppBar widget 透過建構參數 appBar 傳入,body 的widget 透過 body傳入等等,也可以透過backgroundColor設定Scaffold 的顏色

Image

下面我們來介紹,如何把圖片拉進我們的App並使用圖片,圖片下載

在我們的專案目錄對我們專案創建一個 images 資料夾

https://ithelp.ithome.com.tw/upload/images/20200925/20118479sLrMMnMhtG.png

把我們要的圖片檔放進去images 資料夾裡後

開啟pubspec.yaml,我們會看到很多註解,不同於我們之前的//以及/**/,而是用#,因為它不是.Dart,而是.yaml,主要是幫忙配置我們的專案,我們在yaml 裡,找到配置flutter 的地方

https://ithelp.ithome.com.tw/upload/images/20200925/20118479I60wjZ8xHU.png

配置我們的圖片進flutter

https://ithelp.ithome.com.tw/upload/images/20200925/20118479IXE8gzJ6QO.png

pubspec.yaml 也可以清掉註解並整理,配置專案內容在兩個上下階級間,以兩個空白鍵做區分

https://ithelp.ithome.com.tw/upload/images/20200925/20118479WVHyfP1CVP.png

之後在main.dart 設計我們的UI

https://ithelp.ithome.com.tw/upload/images/20200925/20118479RKdOMRHndC.png

成果:
https://ithelp.ithome.com.tw/upload/images/20200925/20118479pSOQbSyIQx.png

Hot Reload

  • Hot reload

    https://ithelp.ithome.com.tw/upload/images/20200925/20118479Wg3A6ZAJAc.png

    在做此範例時,有些人如果有按hot reload 按鍵時,會發現沒有反應,那是因為要Hot Reload,Flutter 必須知道widget 內部所發生的改變,因此我們必須包在 stateless widget, or stateful widget (後面會再來介紹StatelessWidgetStatefulWidget),就

    可以hot reload

    main.dart:

    import 'package:flutter/material.dart'; 
    
    void main() {
      runApp(StatelessApp());
      //或者 runApp(StatefulApp());
    }
    
    class StatefulApp extends StatefulWidget {
      @override
      _StatefulAppState createState() => _StatefulAppState();
    }
    
    class _StatefulAppState extends State<StatefulApp> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            backgroundColor: Colors.blueGrey,
            appBar: AppBar(
              title: Text(
                'First Flutter Project',
              ),
              backgroundColor: Colors.black45,
            ),
            body: Center(
              child: Image(
                image: AssetImage(
                  'images/taiwan.jpg',
                ),
              ),
            ),
          ),
        );
      }
    }
    
    class StatelessApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            backgroundColor: Colors.blueGrey,
            appBar: AppBar(
              title: Text(
                'First Flutter Project',
              ),
              backgroundColor: Colors.black45,
            ),
            body: Center(
              child: Image(
                image: AssetImage(
                  'images/taiwan.jpg',
                ),
              ),
            ),
          ),
        );
      }
    }
    
  • Hot restart

    https://ithelp.ithome.com.tw/upload/images/20200925/20118479YRHvSWdtN0.png

    會清空app 的狀態,並重新啟動

StatelessWidget、StatefulWidget

  • StatelessWidget

    是一種不需要更改狀態的Widget,StatelessWidget不用管理它的內部狀態,是無狀態的Widget

  • StatefulWidget

    是一種可變狀態的Widget,StatefulWidget它有需要管理的內部狀態,並使用setState來管理狀態的改變

    Widget是有狀態的還是無狀態的,取決於是否依賴狀態的變化:

    會因為互動或者資料改變導致Widget改變 → 有狀態,StatefulWidget,例如一個計數器

    沒有任何狀態,也不會被改變的Widget → 無狀態,StatelessWidget

官方推薦首選使用StatelessWidget,因為StatefulWidget在狀態改變時,其裡面的Widget都會重建,如果濫用setState,會導致過多的頁面被重新整理,其StatefulWidget最好用在子節點,同時儘量減少它的子節點

總結

先以幾個簡單的 widget 作為範例完成我們簡單的demo,Basic widgets 有很多範例,但一個一個講會花太久時間,前面程式基礎已經花掉太多天了,所以從明天開始我們以一個登入UI 作為範例,我們就邊講解各個widget 邊直接去實用它吧


上一篇
Day11 認識並設置 Android Studio 環境
下一篇
Day13 Onboarding、Login、Sign Up (一)
系列文
從零開始的Flutter世界30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言