【Flutter 程式設計入門實戰 30 天】Day 4:第一支 Flutter 應用程式,Hello World


【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

哈囉~大家好,我是 KT ,今天實戰第四天,KT 將為大家來介紹,開發第一支 Flutter APP 應用程式,Hello World。

最簡單的 Flutter 應用程式

我們這次範例,要試著在畫面正中間,顯示文字「第一個APP」。
// 載入 material 函式庫
import 'package:flutter/material.dart';

// main 是 Dart 程式,最一開始的進入點
void main() {
// runApp 是 Flutter 程式進入點,若沒有載入上方 material 函式庫,將會不認識 runApp。
// 放在 Center 容器裡面 Text 的元件,將會被放置在畫面的正中間
  runApp(Center(
    child: Text(
      '第一個APP',
      textDirection: TextDirection.ltr,
    ),
  ));
}

執行畫面

小技巧:格式化程式碼(Reformat Code)

格式化程式碼(Reformat Code),程式碼快速整齊排版,可以至 Preferences 內,設定快捷鍵: Reformat Code。

Material 設計指南

Flutter 是由 Google 主導研發出來的開源跨平台軟體框架,所以畫面設計樣式風格,官方當然也建議採用 Material Design。
Material Design ,材質設計是由 Google 開發的設計語言 。定義畫面中的的布局方式、回應動畫與過渡、填充、深度效果(如光線和陰影)等。詳細可以參考 Material Design 官網介紹:https://material.io/design/

使用 Material 樣式主題

我們這次範例,要試著採用 Material 樣式主題,在畫面上方顯示頁面名稱,在畫面正中間,顯示文字「第一個APP」。初次看到 Flutter 程式結構可能會有點茫,可以搭配下方 Widget 階層關係圖,一起來看這一次的程式結構,會更容易了解。
程式最一開始進入 main 後,會執行 runApp ,裡面我們宣告使用了 MaterialApp。而裡面的 home 屬性你可以想像成是整個手機的畫面,我們透過 Scaffold 鷹架來將畫面切割成上、下兩個部分。上面 appBar 為畫面頭的部分可以用來顯示我們當前這個頁面的名稱,我們此頁定義顯示「第一個APP」。下面部分 body 為畫面身體的部分,我們加入 Center 置中容器,讓我們等一下加入的 Text 文字標籤可以顯示在畫面中央。
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('第一個APP'),
      ),
      body: Center(
        child: Text('HKT線上教室'),
      ),
    ),
  ));
}

執行畫面

Widget 階層關係圖

這裡 KT 附上 Widget 階層關係圖,來輔助大家可以對 Flutter 程式結構能有進一步的認識。

Widget 階層關係圖(一)

Widget 階層關係圖(二)

補充:Dart 基礎知識

若對上方程式碼寫法有點茫,還不熟悉 Dart 程式語言,可以參考:【從零開始學 Dart 程式設計】線上教學課程目錄 Flutter 先修班 , Dart 程式語言基礎入門課程。

Dart 類別 - 構造方法

class DemoClass {
  int intVal;

  DemoClass() {
    intVal = -1;
  }
}

void main() {
  //創建物件,使用無參數,構造方法
  DemoClass d1 = new DemoClass();
  print(d1.intVal);
}

Dart 方法 - 有參數的方法

void sample(String x) {
  print(x);
}

void main() {
  sample('HKT線上教室');
}

Dart 方法 - 可選命名參數方法

使用大括號{},包覆參數名稱,呼叫此函數時,即可選擇命名參數呼叫使用
void setData({int x, int y}){
  print('x: $x , y: $y');
}

void main() {
  setData(x:100,y:66);
  setData(y:66,x:100);
  setData(y:66);
}

那今天就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com
維基百科:Material Design
https://zh.wikipedia.org/wiki/质感设计

留言

這個網誌中的熱門文章

16天記下7000單字

Costco 好市多 AFTERSHOKZ 骨傳導 藍牙運動耳機 AS650 開箱實測評價與心得

2019 最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄 (7/5 更新囉~)