介紹 Flutter

Flutter 是 Google 開發的開源移動應用軟件開發工具包（SDK），用于快速在 iOS 和 Android 上構建高質量的原生界面。Flutter 的一大特點是其跨平臺功能，讓開發者能夠使用同一套代碼基礎為兩個平臺構建應用。這一點通過 Flutter 的核心設計理念 “一次編寫，處處運行” 得以實現。

Flutter 使用 Dart 語言進行編程，這是一種由 Google 開發的現代語言，旨在提供高性能和快速開發。Flutter 的另一個亮點是其快速的渲染引擎和可定制的組件庫，讓開發者能夠創建流暢且吸引人的用戶界面。

Flutter 的主要優勢

• 跨平臺開發：單一代碼庫適用于 iOS 和 Android。
• 豐富的組件庫：廣泛的可定制組件簡化了界面開發。
• 高性能：接近原生應用的執行效率。
• 熱重載：實時查看更改效果，提高開發效率。
• 強大的社區支持：大量的包和插件可供使用。

開始一個簡單的 Flutter 項目

環境搭建

要開始使用 Flutter，首先需要在你的機器上安裝 Flutter SDK。前往 Flutter 官網 選擇適合你的操作系統的安裝指南。

創建一個新項目

一旦安裝了 Flutter SDK 和相應的編輯器（推薦使用 Visual Studio Code 或 Android Studio），你可以創建一個新的 Flutter 項目。打開終端或命令行界面，運行以下命令：

flutter create my_flutter_app
cd my_flutter_app

運行你的應用

要在模擬器或真實設備上運行你的應用，請確保已啟動一個設備或模擬器，然后執行：

flutter run

示例：簡單的待辦事項應用

讓我們構建一個簡單的待辦事項應用，以覆蓋常用的 Flutter 使用場景。

1. 定義主界面

打開 lib/main.dart 文件，并替換為以下代碼：

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Todo App',home: TodoList(),);}
}

2. 創建 Todo 列表界面

接下來，創建一個新的 Dart 文件 lib/todo_list.dart，定義一個簡單的待辦事項列表界面：

import 'package:flutter/material.dart';class TodoList extends StatefulWidget {@override_TodoListState createState() => _TodoListState();
}class _TodoListState extends State<TodoList> {final List<String> _todoItems = [];void _addTodoItem(String task) {setState(() {_todoItems.add(task);});}Widget _buildTodoList() {return ListView.builder(itemBuilder: (context, index) {if (index < _todoItems.length) {return _buildTodoItem(_todoItems[index]);}},);}Widget _buildTodoItem(String title) {return ListTile(title: Text(title),);}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Todo List'),),body: _buildTodoList(),floatingActionButton: FloatingActionButton(onPressed: () => _addTodoItem('New Task'),tooltip: 'Add task',child: Icon(Icons.add),),);}
}

3. 連接 TodoList 到應用

回到 lib/main.dart，在頂部添加導入語句：

import 'todo_list.dart';

現在，你已經將 TodoList 類添加到了 lib/todo_list.dart 文件中，并且在 lib/main.dart 中已經引用了這個新創建的組件。現在，當你運行應用時，應該可以看到一個帶有一個浮動按鈕的基本界面，但點擊按鈕時并不會出現任何交互。接下來，我們將添加一個對話框來輸入新的待辦事項，并將其添加到列表中。

4. 添加新待辦事項的功能

在 _TodoListState 類中，我們已經有了一個方法 _addTodoItem 用于添加新的待辦事項。現在，我們需要修改這個方法，使其能夠通過一個對話框接收用戶輸入。

首先，添加一個新的方法 _pushAddTodoScreen，該方法將會在用戶點擊浮動按鈕時被調用：

void _pushAddTodoScreen() {Navigator.of(context).push(MaterialPageRoute(builder: (context) {return Scaffold(appBar: AppBar(title: Text('Add a new task')),body: TextField(autofocus: true,onSubmitted: (val) {_addTodoItem(val);Navigator.pop(context); // 關閉對話框},decoration: InputDecoration(hintText: 'Enter something to do...',contentPadding: EdgeInsets.all(16.0)),),);},),);
}

然后，更新浮動按鈕的 onPressed 屬性，讓它調用 _pushAddTodoScreen：

floatingActionButton: FloatingActionButton(onPressed: _pushAddTodoScreen,tooltip: 'Add task',child: Icon(Icons.add),
),

5. 運行應用并測試功能

現在，當你點擊浮動按鈕時，應用將顯示一個新頁面，其中包含一個文本框。輸入一些文本并提交，你應該會看到文本被添加到首頁的待辦事項列表中。

結論

通過這個簡單的例子，我們展示了如何使用 Flutter 構建一個基本的待辦事項應用。我們覆蓋了一些常用的 Flutter 概念和組件，包括：

• 使用 MaterialApp 和 Scaffold 創建基本的應用結構。
• 管理狀態通過 StatefulWidget。
• 導航和路由管理。
• 處理用戶輸入。

Flutter 的強大之處在于其高度的可定制性和豐富的組件庫，這使得開發高質量的移動應用成為可能。隨著你對 Flutter 的進一步學習和探索，你將能夠利用更多高級功能來構建更復雜的應用程序。

希望這個簡單的入門指南能幫助你開始你的 Flutter 開發之旅！

---

入門項目推薦

在開始使用Flutter進行開發時，探索GitHub上的一些優質入門項目是一個很好的方式。這些項目不僅可以幫助你理解Flutter的基本概念，還能展示實際應用中的最佳實踐。以下是一些推薦的Flutter入門項目，適合初學者學習和實踐：

1. Flutter Examples
   https://github.com/flutter/samples
   Flutter 官方的示例項目集合，涵蓋從基礎到高級的多個主題。

2. Flutter Todo App
   https://github.com/themaaz32/flutter_todo
   這是一個簡潔的待辦事項應用，非常適合初學者。它展示了如何實現基本的 CRUD（創建、讀取、更新、刪除）操作，以及如何使用 Flutter 的核心組件。

3. Flutter UI Challenges
   https://github.com/lohanidamodar/flutter_ui_challenges
   包含多個 UI 設計的 Flutter 實現，適合學習如何構建各種界面。

4. Flutter Ecommerce App
   https://github.com/TheAlphamerc/flutter_ecommerce_app
   完整的電子商務應用 UI 實現，適合學習如何構建復雜應用。

5. The Boring Flutter Development Show [Examples]
   https://github.com/flutter/boring_flutter_dev_show_notes
   Flutter 團隊 “Boring Show” 系列視頻中的代碼示例，涵蓋多個實用主題。

這些項目不僅可以作為學習材料，還可以作為自己項目的起點。建議在學習過程中嘗試克隆這些倉庫，運行示例，并嘗試修改代碼以更好地理解其工作原理。