Day 4：第一支 Flutter 應用程式，Hello World

11th鐵人賽

HKT 線上教室

2019-09-19 08:39:42

6199 瀏覽

分享至

2024 最新 Flutter 教學－ Flutter 終極指南：連結
從零開始學 Dart 程式設計：連結
Flutter 程式設計入門實戰 30 天：連結

哈囉～大家好，我是 KT ，今天【iT邦幫忙鐵人賽】挑戰第四天，KT 將為大家來介紹，開發第一支 Flutter APP 應用程式，Hello World。

最簡單的 Flutter 應用程式

我們這次範例，要試著在畫面正中間，顯示文字「第一個APP」。

// 載入 material 函式庫
import 'package:flutter/material.dart';

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

執行畫面

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(new MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('第一個APP'),
      ),
      body: Center(
        child: Text('HKT線上教室'),
      ),
    ),
  ));
}