Flutter 狀態管理初探：瞭解狀態和狀態管理的基礎概念

什麼是狀態？

在 Flutter 中，狀態（State）是指應用程序中的數據或資訊。這些資訊可能會隨著用戶操作、外部事件或應用程序內部的變化而改變。舉個例子來說，一個計數器應用程序的狀態就是計數器的值。

在 Flutter 中，狀態分為兩種類型：瞬態狀態（Ephemeral State）和持久狀態（Persistent State）。瞬態狀態是指只在特定操作或事件期間存在並改變的狀態，而持久狀態則是在應用程序的整個生命週期中都存在並保持不變的狀態。

狀態管理的重要性

有效的狀態管理是構建高質量 Flutter 應用程序的關鍵。良好的狀態管理可以幫助開發人員更好地組織和管理代碼，提高應用程序的可維護性和可擴展性。同時，合理的狀態管理還可以減少應用程序中的錯誤和不一致性，提供更好的用戶體驗。

在 Flutter 中，有多種方法可以進行狀態管理，包括本地狀態管理、全局狀態管理和通知機制等。選擇合適的狀態管理方案取決於項目的規模、複雜性和需求。

本地狀態管理

本地狀態管理是指將狀態管理在 Flutter 組件的範圍內進行，通常用於管理瞬態狀態。在 Flutter 中，最常用的本地狀態管理方法是使用 StatefulWidget。

StatefulWidget 是一個由兩個類組成的組件：StatefulWidget 和對應的 State。StatefulWidget 負責創建 State 對象，而 State 對象則負責管理狀態和構建 UI。通過將狀態保存在 State 對象中，我們可以在 UI 更新時保留狀態。

以下是一個簡單的計數器應用程序的例子：

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '$_counter',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(CounterApp());
}

在這個例子中，我們創建了一個繼承自 StatefulWidget 的 CounterApp 類。CounterAppState 類則繼承自 State<CounterApp>，並管理著計數器的狀態。通過調用 setState() 方法，我們可以通知 Flutter 框架重新構建 UI，以反映狀態的變化。

全局狀態管理

當應用程序變得更大和複雜時，僅使用本地狀態管理可能變得不夠。在這種情況下，全局狀態管理可以提供更好的解決方案。全局狀態管理將狀態集中存儲並共享給整個應用程序，使得不同組件之間可以共享狀態。

在 Flutter 中，有許多第三方庫可以實現全局狀態管理，其中最受歡迎的是 Provider、Bloc 和 MobX 等。這些庫提供了不同的狀態管理模式，可以根據項目需求進行選擇。

以下是使用 Provider 库進行全局狀態管理的一個例子：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        title: 'Counter App',
        home: CounterScreen(),
      ),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '${counter.count}',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: counter.increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(CounterApp());
}

在這個例子中，我們定義了一個 Counter 類，它繼承自 ChangeNotifier。Counter 類持有計數器的狀態，並通過 notifyListeners() 方法通知監聽器進行 UI 更新。在 CounterApp 中，我們使用 ChangeNotifierProvider 將 Counter 對象提供給整個應用程序。在 CounterScreen 中，我們使用 Provider.of 方法獲取 Counter 對象並訪問狀態。