Flutter状态管理代码生成插件riverpod_state_provider_generator的使用

发布于 1周前 作者 nodeper 来自 Flutter

Flutter状态管理代码生成插件riverpod_state_provider_generator的使用

本项目是围绕riverpod_generator的一个封装。

riverpod中的StateProvider目前还不支持与riverpod_generator一起使用。

这使得可以从riverpod中生成等效的StateProvider:

简而言之:

// main.dart

part 'main.g.dart';
part 'main.rsp.dart';

@RiverpodStateProvider()
int myInteger() {
  return 0;
}

在你的dev_dependencies中添加riverpod_state_provider_generatorriverpod_generatorbuild_runner 并运行:

dart run build_runner build -d

完整示例Demo

1. 添加依赖

在你的pubspec.yaml文件中添加以下依赖:

dev_dependencies:
  flutter_test:
    sdk: flutter
  riverpod_state_provider_generator:
  riverpod_generator:
  build_runner:

2. 创建StateProvider

main.dart文件中定义一个简单的StateProvider

// main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'main.g.dart'; // 生成的代码

part 'main.g.dart';

@RiverpodStateProvider()
int myInteger() {
  return 0;
}

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod State Provider Example')),
        body: Center(
          child: Consumer(builder: (context, ref, _) {
            final value = ref.watch(myIntegerProvider);
            return Text('Current Value: $value');
          }),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 更新StateProvider的值
            context.read(myIntegerProvider).state++;
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

3. 运行代码生成器

打开终端并运行以下命令以生成所需的代码:

dart run build_runner build -d

4. 查看生成的代码

生成的代码将出现在main.g.dartmain.rsp.dart文件中。你可以查看这些文件来了解如何实现状态管理。

5. 运行应用

确保所有依赖项都已安装并且代码已正确生成后,你可以运行你的应用:

flutter run

更多关于Flutter状态管理代码生成插件riverpod_state_provider_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter状态管理代码生成插件riverpod_state_provider_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何使用 riverpod_state_provider_generator 插件来生成 Flutter 状态管理代码的示例。这个插件可以极大地方便我们创建和管理 Riverpod 状态提供者(State Provider)。

首先,你需要确保你的 Flutter 项目已经添加了 riverpodriverpod_state_provider_generator 依赖。在你的 pubspec.yaml 文件中添加以下依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^1.0.0  # 请确保版本是最新的

dev_dependencies:
  build_runner: ^2.0.0  # 用于运行代码生成器
  riverpod_state_provider_generator: ^0.1.0  # 请确保版本是最新的,根据实际需要调整

然后运行 flutter pub get 来安装这些依赖。

接下来,假设我们有一个简单的用户状态管理需求,我们将使用 riverpod_state_provider_generator 来生成相关代码。

  1. 定义数据模型

首先,我们定义一个简单的用户数据模型。

class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  // 为了方便比较,我们重写 == 和 hashCode 方法
  @override
  bool operator ==(Object other) =>
      identical(this, other) ||
      other is User &&
          runtimeType == other.runtimeType &&
          name == other.name &&
          age == other.age;

  @override
  int get hashCode => name.hashCode ^ age.hashCode;
}
  1. 使用注解生成提供者

接下来,我们使用 @freezed@StateNotifierProvider 注解来定义我们的状态管理逻辑。注意,@freezed 注解来自 freezed 包,它可以帮助我们生成不可变的数据类,并且与 riverpod_state_provider_generator 插件配合得很好。

首先,在 pubspec.yaml 中添加 freezed 依赖:

dev_dependencies:
  freezed: ^0.15.0  # 请确保版本是最新的

然后运行 flutter pub get

现在,我们定义一个使用 @freezed 注解的 UserState 类,并使用 @StateNotifierProvider 注解来生成提供者。

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:riverpod_state_provider_generator/riverpod_state_provider_generator.dart';

part 'user_state.freezed.dart';

@freezed
class UserState with _$UserState {
  const factory UserState.initial() = Initial;
  const factory UserState.loaded(User user) = Loaded;
  const factory UserState.loading() = Loading;
  const factory UserState.error(String message) = Error;
}

@StateNotifierProviderFamily(autoDispose: false)
final userProvider = StateNotifierProviderFamily<UserNotifier, UserState>(
  (ref, userId) {
    return UserNotifier(userId: userId);
  },
);

class UserNotifier extends StateNotifier<UserState> {
  final String userId;

  UserNotifier({required this.userId}) : super(UserState.initial());

  void fetchUser() async {
    state = UserState.loading();
    // 模拟异步数据获取
    await Future.delayed(const Duration(seconds: 2));
    try {
      // 这里应该是从服务器获取数据的逻辑
      final user = User(name: 'John Doe', age: 30);
      state = UserState.loaded(user);
    } catch (_) {
      state = UserState.error('Failed to load user');
    }
  }
}

注意:你需要运行 flutter pub run build_runner build 来生成 user_state.freezed.dart 文件。

  1. 在 Flutter 应用中使用提供者

最后,我们在 Flutter 应用中使用这个提供者。

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'user_state.dart';

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserScreen(),
    );
  }
}

class UserScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final userId = '1'; // 假设我们有一个用户ID
    final userProviderRef = ref.watch(userProvider(userId));

    return Scaffold(
      appBar: AppBar(title: Text('User Screen')),
      body: Center(
        child: userProviderRef.when(
          initial: () => CircularProgressIndicator(),
          loading: () => CircularProgressIndicator(),
          error: (message, _) => Text('Error: $message'),
          loaded: (user) => Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Name: ${user.name}'),
              Text('Age: ${user.age}'),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ref.read(userProvider(userId).notifier).fetchUser();
        },
        tooltip: 'Fetch User',
        child: Icon(Icons.refresh),
      ),
    );
  }
}

这个示例展示了如何使用 riverpod_state_provider_generatorfreezed 来生成和管理 Flutter 状态提供者。通过注解和代码生成,我们可以更方便地创建和管理复杂的状态逻辑。

回到顶部