Flutter自定义代码生成插件laia_riverpod_custom_generator的使用

Introduction（介绍）

laia_riverpod_custom_generator 是一个代码生成包，它可以根据给定的 Dart 类模型生成 Riverpod 提供者（providers），用于处理 CRUD（创建、读取、更新、删除）操作。

Installation（安装）

在 pubspec.yaml 文件中添加以下依赖：

dev_dependencies:
    laia_riverpod_custom_generator: latest

然后运行以下命令以获取最新版本：

flutter pub get

Usage（使用）

1. 创建一个 Dart 模型类

首先，我们需要一个 Dart 类来表示数据模型。例如，我们创建一个简单的 User 类：

// lib/models/user.dart
class User {
  final String id;
  final String name;
  final String email;

  const User({
    required this.id,
    required this.name,
    required this.email,
  });
}

2. 使用代码生成器生成 Riverpod 提供者

接下来，我们需要使用 laia_riverpod_custom_generator 来生成与该模型相关的 Riverpod 提供者。为此，我们可以在 lib 目录下创建一个名为 user_provider.g.dart 的文件，并在其中定义生成器指令。

定义生成器指令

在 lib 目录下创建一个 user_provider.g.dart 文件，并添加以下内容：

// lib/user_provider.g.dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'models/user.dart';

final userProvider = StateNotifierProvider<UserNotifier, List<User>>((ref) {
  return UserNotifier();
});

class UserNotifier extends StateNotifier<List<User>> {
  UserNotifier() : super([]);

  void addUser(User user) {
    state = [...state, user];
  }

  void updateUser(User user) {
    state = [
      for (var existingUser in state)
        if (existingUser.id == user.id) user else existingUser
    ];
  }

  void deleteUser(String userId) {
    state = state.where((user) => user.id != userId).toList();
  }
}

3. 运行代码生成器

为了生成上述代码，我们需要在项目根目录下运行以下命令：

flutter packages pub run build_runner build

这将根据我们的 Dart 模型类生成相应的 Riverpod 提供者代码。

4. 在应用中使用生成的提供者

现在，我们可以在应用中使用生成的提供者。例如，在 main.dart 中注册提供者并使用它：

// lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'user_provider.g.dart';
import 'models/user.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Riverpod Example')),
        body: UserList(),
      ),
    );
  }
}

class UserList extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, ScopedReader watch) {
    final users = watch(userProvider);

    return ListView.builder(
      itemCount: users.length,
      itemBuilder: (context, index) {
        final user = users[index];
        return ListTile(
          title: Text(user.name),
          subtitle: Text(user.email),
        );
      },
    );
  }
}

5. 测试 CRUD 操作

我们可以在 UI 中添加按钮来测试 CRUD 操作。例如，添加一个按钮来添加新用户：

// lib/user_list.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'user_provider.g.dart';
import 'models/user.dart';

class UserList extends ConsumerWidget {
  [@override](/user/override)
  Widget build(BuildContext context, ScopedReader watch) {
    final users = watch(userProvider);

    return Column(
      children: [
        ElevatedButton(
          onPressed: () {
            final newUser = User(
              id: DateTime.now().millisecondsSinceEpoch.toString(),
              name: 'John Doe',
              email: 'john.doe@example.com',
            );
            context.read(userProvider.notifier).addUser(newUser);
          },
          child: Text('Add User'),
        ),
        Expanded(
          child: ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              final user = users[index];
              return ListTile(
                title: Text(user.name),
                subtitle: Text(user.email),
              );
            },
          ),
        ),
      ],
    );
  }
}