引言

歡迎回到 每天一個Flutter開發小項目 系列博客！在前三篇博客中，我們從零開始構建了計數器應用、待辦事項列表應用，以及簡易天氣應用。您不僅掌握了 Flutter 的基礎組件和布局，還學習了網絡請求、JSON 解析等實用技能，更重要的是，我們一起探討了高效的 Flutter 學習方法。

隨著應用功能的日益豐富和復雜，簡單的 setState 狀態管理方式逐漸顯得力不從心。當應用狀態需要在多個 Widget 之間共享和傳遞時，或者當狀態邏輯變得復雜時，我們需要更專業、更高效的狀態管理方案。

今天，我們將深入 Flutter 的核心概念之一——狀態管理，并借助強大的 Provider 狀態管理庫，構建一個實用的 收藏地點應用。 通過這個項目，您將學習到：

• Flutter 狀態管理的核心概念: 深入理解 Widget 樹、狀態提升、狀態共享等概念。
• Provider 狀態管理庫的使用: 掌握 Provider 的核心組件和用法，如 ChangeNotifierProvider, Consumer, Provider.of 等。
• 更合理的應用架構: 學習如何使用 Provider 組織和管理應用狀態，構建更清晰、更易維護的應用架構。
• 狀態管理最佳實踐: 了解在實際項目中如何選擇和應用合適的狀態管理方案。
• 技能躍遷: 從簡單的 setState 進階到專業的 Provider 狀態管理，提升您的 Flutter 開發能力。

項目簡介： 收藏地點應用

我們的收藏地點應用將圍繞以下核心功能展開：

• 添加地點: 用戶可以輸入地點名稱和描述，將喜愛的地點添加到收藏列表。
• 查看地點列表: 清晰地展示所有收藏的地點，包括地點名稱和描述。
• 收藏/取消收藏: 用戶可以標記地點為 “已收藏” 或 “未收藏” 狀態。
• 數據持久化 (可選): 將收藏地點數據持久化存儲 (本篇博客暫不涉及數據持久化，后續博客會講解)。

通過構建收藏地點應用，我們將深入實踐：

• Provider 狀態管理: 使用 Provider 管理地點列表和收藏狀態。
• 復雜 UI 構建: 構建包含列表展示、用戶輸入、狀態切換等交互的 UI 界面。
• 應用架構設計: 初步體驗如何使用 Provider 組織和設計 Flutter 應用架構。

Flutter 狀態管理核心概念回顧

在深入 Provider 之前，我們先簡要回顧 Flutter 狀態管理的核心概念。

• Widget 是不可變的: 在 Flutter 中，Widget 是不可變的 (immutable)。 一旦 Widget 被創建，其屬性就不能被修改。 如果 Widget 的狀態需要改變，我們需要重新構建 Widget。
• State 是可變的: State (狀態) 與 Widget 關聯，用于存儲 Widget 的可變數據。 State 對象可以在其生命周期內被修改，當 State 對象發生改變時，會觸發 Widget 的重新構建。
• setState() 觸發狀態更新: setState() 方法是 Flutter 中最基礎的狀態管理方式。 調用 setState() 會通知 Flutter 框架，State 對象中的數據已經發生改變，需要重新構建 Widget。
• Widget 樹和狀態傳遞: Flutter 應用由 Widget 樹構成。 狀態可以在 Widget 樹中傳遞。 父 Widget 可以將狀態傳遞給子 Widget，子 Widget 可以通過回調函數通知父 Widget 狀態發生改變。
• 狀態提升 (Lifting State Up): 當多個 Widget 需要訪問和修改同一個狀態時，可以將該狀態提升到它們共同的父 Widget 中管理，實現狀態共享。

為什么需要更專業的狀態管理方案？

雖然 setState() 可以滿足簡單的狀態管理需求，但當應用變得復雜時，setState() 會面臨以下挑戰：

• 代碼難以維護: 當狀態分散在各個 Widget 中，且 Widget 之間狀態依賴關系復雜時，代碼會變得難以理解和維護。
• 狀態傳遞繁瑣: 在深層 Widget 樹中傳遞狀態，需要逐層傳遞，代碼冗余且容易出錯。
• 性能問題: 過度使用 setState() 可能導致不必要的 Widget 重新構建，影響應用性能。

更專業的狀態管理方案 (如 Provider, BLoC, Riverpod 等) 旨在解決上述問題，提供更高效、更易維護、更可擴展的狀態管理機制。

Provider 狀態管理庫簡介

Provider 是一個由 Flutter 社區維護的流行的狀態管理庫。它基于 依賴注入 (Dependency Injection) 的設計模式，以簡潔、易用的方式管理應用狀態。

Provider 的核心思想是將 狀態 (數據) 暴露給 Widget 樹， 使得任何 Widget 都可以方便地訪問和監聽狀態變化。

Provider 的主要優點包括：

• 簡單易用: API 簡潔直觀，易于學習和上手。
• 代碼清晰: 將狀態管理邏輯從 Widget 中分離出來，使代碼結構更清晰、更易維護。
• 高效更新: Provider 只會精確更新需要更新的 Widget，避免不必要的 Widget 重新構建，提升性能。
• 強大的擴展性: Provider 支持多種狀態管理模式，可以靈活應對各種復雜的應用場景。
• 官方推薦: Provider 是 Flutter 官方推薦的狀態管理方案之一。

實戰步驟： 構建收藏地點應用

接下來，我們將一步步使用 Provider 構建我們的收藏地點應用。

步驟 1： 創建新的 Flutter 項目并添加 Provider 依賴

首先，創建一個新的 Flutter 項目，命名為 favorite_places_app。

然后在 pubspec.yaml 文件中添加 provider 依賴：

dependencies:flutter:sdk: flutterprovider: ^6.0.0 # 使用最新版本，請查閱 pub.dev 獲取最新版本號

運行 flutter pub get 命令獲取依賴。

步驟 2： 定義數據模型 (Place)

我們需要定義一個 Place 類來表示地點數據，包含地點名稱和描述。

創建 lib/models/place.dart 文件，定義 Place 類：

class Place {final String name;final String description;bool isFavorite;Place({required this.name,required this.description,this.isFavorite = false,});//  切換收藏狀態的方法void toggleFavoriteStatus() {isFavorite = !isFavorite;}
}

代碼解釋:

• Place 類: 定義了 Place 類，包含 name (地點名稱), description (地點描述), isFavorite (是否收藏) 三個屬性。
• isFavorite 屬性: bool 類型，默認為 false，表示初始狀態為未收藏。
• toggleFavoriteStatus() 方法: 用于切換地點的收藏狀態，將 isFavorite 屬性取反。

步驟 3： 創建狀態管理類 (PlacesProvider)

我們需要創建一個狀態管理類 PlacesProvider 來管理地點列表和相關的狀態邏輯。 PlacesProvider 類需要繼承自 ChangeNotifier，以便 Provider 可以監聽狀態變化并通知 Widget 重新構建。

創建 lib/providers/places_provider.dart 文件，定義 PlacesProvider 類：

import 'package:flutter/material.dart';
import '../models/place.dart';class PlacesProvider extends ChangeNotifier {final List<Place> _places = []; //  私有地點列表List<Place> get places => [..._places]; //  提供地點列表的 getter 方法void addPlace(Place place) { //  添加地點的方法_places.add(place);notifyListeners(); //  通知監聽器狀態已改變}void toggleFavorite(Place place) { //  切換地點收藏狀態的方法final placeIndex = _places.indexOf(place);_places[placeIndex].toggleFavoriteStatus()