Flutter Provider状态管理实战案例

在使用Flutter Provider进行状态管理时遇到几个问题想请教：

  1. 如何在多个页面间共享同一个Provider实例？比如用户登录信息需要全局访问；
  2. 当数据变化时，部分Widget没有自动更新，是否和Consumer的放置位置有关？
  3. 复杂业务逻辑应该写在Provider内部还是单独封装？感觉直接在ChangeNotifier里写太多代码会混乱；
  4. 有没有性能优化建议？特别是在页面频繁切换时感觉有明显卡顿。

希望能结合具体案例讲解最佳实践。

3 回复

以下是一个简单的Flutter Provider状态管理案例：

  1. 定义数据模型：
class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 更新UI
  }
}
  1. 使用Provider包装MaterialApp：
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: MyApp(),
    ),
  );
}
  1. 在页面中使用Provider获取数据：
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Provider Demo')),
      body: Center(child: Text('Count: ${counter.count}')),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

这个例子展示了如何使用Provider管理一个计数器的状态。当点击按钮时，计数器值会更新并自动刷新UI。

更多关于Flutter Provider状态管理实战案例的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


以一个简单的购物车为例。首先定义商品模型：

class Product {
  final String id;
  final String name;
  final double price;

  Product({required this.id, required this.name, required this.price});
}

创建购物车的Provider类：

import 'package:flutter/foundation.dart';

class CartItem {
  final String id;
  final String productId;
  final String name;
  final int quantity;
  final double price;

  CartItem({
    required this.id,
    required this.productId,
    required this.name,
    required this.quantity,
    required this.price,
  });
}

class Cart with ChangeNotifier {
  Map<String, CartItem> _items = {};

  Map<String, CartItem> get items => {..._items};

  int get itemCount => _items.length;

  double get totalAmount {
    double total = 0.0;
    _items.forEach((key, cartItem) {
      total += cartItem.price * cartItem.quantity;
    });
    return total;
  }

  void addItem(Product product) {
    if (_items.containsKey(product.id)) {
      _items.update(
        product.id,
        (existingCartItem) => CartItem(
          id: existingCartItem.id,
          productId: existingCartItem.productId,
          name: existingCartItem.name,
          quantity: existingCartItem.quantity + 1,
          price: existingCartItem.price,
        ),
      );
    } else {
      _items.putIfAbsent(
        product.id,
        () => CartItem(
          id: DateTime.now().toString(),
          productId: product.id,
          name: product.name,
          quantity: 1,
          price: product.price,
        ),
      );
    }
    notifyListeners();
  }

  // 其他方法如removeItem等...
}

在main函数中使用MultiProvider包裹应用，并将Cart加入到Provider中：

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Cart()),
      ],
      child: MyApp(),
    ),
  );
}

在UI层通过Consumer来监听和更新购物车状态。

以下是一个Flutter Provider状态管理的实战案例，实现一个简单的计数器应用：

  1. 首先添加Provider依赖（pubspec.yaml）：
dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5
  1. 创建状态管理类（counter_provider.dart）：
import 'package:flutter/foundation.dart';

class CounterProvider with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

  void decrement() {
    _count--;
    notifyListeners();
  }
}
  1. 在main.dart中配置Provider：
void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterProvider(),
      child: const MyApp(),
    ),
  );
}
  1. 在页面中使用（home_page.dart）：
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterProvider>(context);

    return Scaffold(
      appBar: AppBar(title: const Text('Provider示例')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('计数器: ${counter.count}', style: TextStyle(fontSize: 24)),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: counter.decrement,
                  child: const Text('-'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: counter.increment,
                  child: const Text('+'),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

关键点说明：

  1. ChangeNotifierProvider在widget树顶层提供状态
  2. 状态类继承ChangeNotifier，状态变化时调用notifyListeners()
  3. 通过Provider.of获取状态对象
  4. 状态变化会自动触发依赖部件的重建

这个案例展示了Provider的核心用法，实际项目中还可以结合MultiProvider管理多个状态。

回到顶部