Flutter 项目实战 架构模式四

在Flutter中实现MVVM架构，你可以使用provider包来管理状态，并结合flutter_riverpod来实现更复杂的状态管理。以下是一个简化的例子：

首先，安装所需的包：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0
  flutter_riverpod: ^2.0.0

定义一个状态管理的Notifier：

import 'package:flutter_riverpod/flutter_riverpod.dart';
 
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});
 
class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);
 
  void increment() {
    state++;
  }
}

在视图层（View）中，使用Provider来订阅状态变化：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
 
class HomeView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Consumer<CounterNotifier>(
              builder: (context, counter, child) => Text(
                '${counter.state}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<CounterNotifier>().increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

在main方法中配置Provider：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
 
void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeView(),
    );
  }
}

这个例子展示了如何使用flutter_riverpod创建一个简单的计数器应用。CounterNotifier类继承自StateNotifier，它包含了一个计数器的状态和一个用于增加计数器值的方法。在HomeView中，我们使用Consumer来订阅计数器的状态变化，并在界面上显示当前的计数值。通过点击FloatingActionButton，我们通知CounterNotifier增加计数器的值。