Flutter 實作專案-1

這是一個使用 Flutter 打造的 APP 專案,適合作為 side project,讓開發者能夠練習並熟悉 Flutter 的核心概念與功能。以下是該專案中使用到的主要 Flutter 元件及Lib:

基本概念與核心元件

  1. Widgets:Flutter 中的基本構件,負責界面元素的組成。Flutter 提供大量內建的 Widgets,如 Text、Button、Icon 等,可靈活組合以滿足不同的 UI 需求。

  2. Scaffold:作為應用程式的基本結構骨架,包含常見的應用結構元素,例如 AppBar、Drawer、BottomNavigationBar 等。

  3. Container:用於設計界面布局的多功能容器元件,可以設定邊距、背景、陰影等。

  4. StatelessWidget:靜態組件,不會隨著應用狀態變化而更新。適合用於顯示不會改變的內容。

  5. StatefulWidget:動態組件,能根據使用者互動或內部狀態變更來更新 UI,例如點擊按鈕後改變顯示內容。

關鍵功能與Lib

  1. ListView:適合顯示多條垂直滾動的資料列表,支援懶加載(Lazy Loading)來優化性能。

    • 使用 ListView.builder 可以提高大數據列表顯示的效能。

  2. Navigator:負責頁面之間的導航與切換。Flutter 提供 pushpop 來控制頁面堆疊,實現簡單易用的導航功能。

  3. http:用於進行網路請求的 Flutter 庫,支援 RESTful API 的操作,如 GET、POST 等,便於與後端伺服器交互。

  4. async 和 await:Dart 語言的異步操作方式,可以讓程式在等待操作完成時不阻塞主執行緒,例如等待 API 回應。

  5. Future 和 FutureBuilder:Future 是 Dart 的異步資料類型,用來處理非同步資料,而 FutureBuilder 則是一個專用的 Widget,可以監控 Future 的狀態並在資料到達時更新畫面。

  6. json decoder:解析 JSON 格式資料並轉換為 Dart 物件,便於後續處理及顯示。通常用於處理 API 回傳的 JSON 資料。

  7. Flutter plugin SQLite:在本地儲存資料的資料庫,適合用於小型離線資料儲存,例如用戶偏好設定或歷史記錄等。

這些技術和概念的應用,可以幫助您構建一個具有基礎功能的 Flutter APP,並學習如何在 Flutter 中進行畫面佈局、非同步處理以及與本地資料和遠端伺服器交互。此專案對於提升 Flutter 技能及理解其核心架構有很大幫助。

flutter-side-project-1-1

flutter-side-project-1-2

flutter-side-project-1-3

flutter-side-project-1-4

DEMO影片

Flutter 個人專案