[官文翻译]Flutter状态管理库Riverpod - 所有的Provider - StateProvider

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/material.dart';
 
// 定义一个提供器，用于管理应用程序中的主题
final themeProvider = StateProvider<ThemeData>((ref) {
  return ThemeData.light();
});
 
void main() {
  runApp(const ProviderScope(child: MyApp()));
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Riverpod 示例',
      routerDelegate: RoutemasterDelegate(routes: {
        '/': (context) => HomePage(),
      }),
      routeInformationParser: RoutemasterParser(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 使用ConsumerWidget来访问themeProvider提供的值
    return Consumer(builder: (context, ref, child) {
      final theme = ref.watch(themeProvider);
      return Theme(
        data: theme,
        child: TextButton(
          onPressed: () {
            // 通过family来创建一个新的Provider以改变主题
            final newTheme = theme.brightness == Brightness.dark
                ? ThemeData.light()
                : ThemeData.dark();
            ref.read(themeProvider.state).state = newTheme;
          },
          child: Text('切换主题'),
        ),
      );
    });
  }
}

这个代码示例展示了如何使用Riverpod库中的StateProvider来管理应用程序的主题。我们定义了一个名为themeProvider的StateProvider，并在应用程序的根部件中初始化了一个光明的主题。在HomePage页面中，我们使用Consumer来监听主题的变化并相应地更新UI。当用户点击按钮时，我们通过改变themeProvider的状态来切换主题，从而更新整个应用程序的外观。