各位好 上一個鐵人因為忘記發而斷更 趁9/15之前趕快重新開始發這系列文章。

大家好，今天我們要來介紹flutter基本概念。首先我們要知道flutter 是一個由 Google 開發的開源 UI 軟體開發工具包，用於開發跨平台的應用程式。它使用 Dart 語言，允許開發者寫一份程式碼就能實現 iOS、Android、Web 和桌面應用程式。

而首先要介紹的是widget。在 Flutter 中，widget 是組成頁面的基本元素。

常見具體的widget有以下幾種:

Text

用於顯示文字內容

Text(
  'Hello, World!',
);

Image

用於顯示圖片

Image.network('https://example.com/image.jpg');

Icon

用於顯示圖示

Icon(Icons.favorite, color: Colors.red, size: 30);

Button

用於顯示按鈕，而常見的按鈕又分為下列三種

• ElevatedButton：具有陰影和背景顏色的按鈕。
• TextButton：無陰影的文字按鈕。
• IconButton：僅包含圖示的按鈕。

ElevatedButton(
  onPressed: () {},
  child: Text('Click Me'),
);

Row 和 Column

用於水平（Row）或垂直（Column）排列其子 widget。

Row(
  children: [
    Icon(Icons.star),
    Text('Star'),
  ],
);

Column(
  children: [
    Text('Item 1'),
    Text('Item 2'),
  ],
);

Container

是一個大容器的概念，裡面可以裝各種設定屬性。例如:padding、color、child 等等。

Container(
  padding: EdgeInsets.all(16),
  color: Colors.blue,
  child: Text('Hello, Container!'),
);

Scaffold

提供應用程式的基本結構以及框架，是一個非常重要的widget，包含許多常見UI元素，如 AppBar、Drawer、BottomNavigationBar 等等。

Scaffold(
  appBar: AppBar(title: Text('My App')),
  body: Center(child: Text('Hello, Scaffold!')),
);

AppBar

是在Scaffold 中常見的 UI 元素之一，用於顯示應用程式的標題和操作按鈕。

AppBar(
  title: Text('App Bar'),
  actions: [IconButton(icon: Icon(Icons.settings), onPressed: () {})],
);

Form 和 TextFormField

建立表單以及管理用戶輸入表單。

Form(
  child: Column(
    children: [
      TextFormField(decoration: InputDecoration(labelText: 'Username')),
      TextFormField(decoration: InputDecoration(labelText: 'Password'), obscureText: true),
    ],
  ),
);

這些都是flutter 中常見的widget ，也是我們程式的基礎架構。利用這些 widget，我們可以快速建構應用程式的基本框架，例如使用 Scaffold 來定義整體架構，使用 AppBar 來設置應用程式的標題和按鈕，使用 Column 和 Row 來實現垂直和水平的佈局，通過 Container 來控制各單位的樣式和大小。

我們明天見~