Flutter事件状态处理插件eventstateprocessor的使用

Flutter事件状态处理插件eventstateprocessor的使用

介绍

event_state_processor 是一个 Flutter 插件，它通过封装 flutter_bloc 包来简化应用的状态管理和事件处理。这个插件更类似于 MVI（Model-View-Intent）模式，主要特点如下：

• 反映数据状态到视图（UI）：将业务逻辑层的状态变化同步到 UI 层。
• 处理 UI 事件以更新状态并改变 UI：用户交互触发的事件会被处理，并根据处理结果更新 UI。

入门指南

使用 ProcessorProvider 替代 BlocProvider

ProcessorProvider 用于提供事件处理器实例或创建处理器实例以供子 widget 使用。示例如下：

void main() {
  runApp(
    ProcessorProvider<AuthenticationEventProcessor>(
      create: (BuildContext context) => AuthenticationEventProcessor(),
      child: const App(),
    ),
  );
}

实现屏幕 Widget

要实现一个屏幕 Widget，你需要完成以下步骤：

1. 创建 State 类继承 DataState：例如 LoginState。

2. 创建 Event 类继承 UiEvent：例如 LoginEvent。

3. 创建登录屏幕并实现三个函数：

   • handleDataStateChange：处理事件处理器处理事件后状态的变化，并更新 widget 状态。例如，当登录按钮被点击后，处理器处理登录事件并返回 LoginFailure 状态时，我们可以在该函数中显示一个错误对话框。

     if (newState.error != null) {
       showAlertDialog(context, Text(state.error.message));
     }
     

   • createEventProcessor：返回一个 EventToStateProcessor 实例，用于在当前 widget 或其子 widget 中使用。例如：

     return LoginEventProcessor();
     

   • buildScreenUi：根据数据状态构建屏幕 UI。例如，如果 state.isLoading 为 true，则显示加载进度条。

     if (state.isLoading) {
       return LoadingIndicatorWidget();
     } else {
       return Container();
     }
     

   完整的 LoginScreen 示例代码如下：

   class LoginScreen extends CoreScreen<LoginEvent, LoginState, LoginEventProcessor> {
     [@override](/user/override)
     void handleDataStateChange(LoginState newState) {
       if (newState.error != null) {
         showAlertDialog(context, Text(newState.error.message));
       }
     }
   
     [@override](/user/override)
     EventToStateProcessor<LoginEvent, LoginState> createEventProcessor() {
       return LoginEventProcessor();
     }
   
     [@override](/user/override)
     Widget buildScreenUi(BuildContext context, LoginState state) {
       return Scaffold(
         appBar: AppBar(title: Text('Login')),
         body: Column(
           children: [
             TextField(
               onChanged: (value) => dispatch(LoginEmailChanged(email: value)),
               decoration: InputDecoration(labelText: 'Email'),
             ),
             TextField(
               onChanged: (value) => dispatch(LoginPasswordChanged(password: value)),
               decoration: InputDecoration(labelText: 'Password'),
               obscureText: true,
             ),
             ElevatedButton(
               onPressed: () => dispatch(LoginSubmitted()),
               child: Text('Login'),
             ),
             if (state.isLoading) CircularProgressIndicator(),
           ],
         ),
       );
     }
   }
   

Dart 版本

• Dart 2: >= 2.6.0

贡献者

• Justin Lewis（维护者）

许可证

• MIT 许可证

完整示例 Demo

为了更好地理解 event_state_processor 的使用，下面是一个完整的示例项目结构和代码。

项目结构

/lib
  /ui
    /app
      app.dart
    /login
      login_screen.dart
      login_event.dart
      login_state.dart
      login_event_processor.dart

app.dart

import 'package:flutter/material.dart';
import 'package:event_state_processor/event_state_processor.dart';
import 'package:event_state_processor_example/ui/login/login_screen.dart';

void main() {
  runApp(
    ProcessorProvider<LoginEventProcessor>(
      create: (BuildContext context) => LoginEventProcessor(),
      child: const App(),
    ),
  );
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Event State Processor Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const LoginScreen(),
    );
  }
}

login_event.dart

import 'package:event_state_processor/event_state_processor.dart';

class LoginEmailChanged extends UiEvent {
  final String email;

  LoginEmailChanged({required this.email});
}

class LoginPasswordChanged extends UiEvent {
  final String password;

  LoginPasswordChanged({required this.password});
}

class LoginSubmitted extends UiEvent {}

login_state.dart

import 'package:event_state_processor/event_state_processor.dart';

class LoginState extends DataState {
  final String? error;
  final bool isLoading;

  LoginState({this.error, this.isLoading = false});

  LoginState copyWith({
    String? error,
    bool? isLoading,
  }) {
    return LoginState(
      error: error ?? this.error,
      isLoading: isLoading ?? this.isLoading,
    );
  }
}

login_event_processor.dart

import 'package:event_state_processor/event_state_processor.dart';
import 'login_state.dart';
import 'login_event.dart';

class LoginEventProcessor extends EventToStateProcessor<LoginEvent, LoginState> {
  LoginEventProcessor() : super(initialState: LoginState(isLoading: false));

  [@override](/user/override)
  Stream<LoginState> mapEventToState(LoginEvent event) async* {
    if (event is LoginEmailChanged) {
      // Handle email change
      yield state.copyWith();
    } else if (event is LoginPasswordChanged) {
      // Handle password change
      yield state.copyWith();
    } else if (event is LoginSubmitted) {
      yield state.copyWith(isLoading: true);
      try {
        // Simulate login process
        await Future.delayed(Duration(seconds: 2));
        // If login is successful, navigate to home screen
        // For simplicity, we just reset the state
        yield state.copyWith(isLoading: false);
      } catch (e) {
        // If login fails, set error message
        yield state.copyWith(error: e.toString(), isLoading: false);
      }
    }
  }
}

login_screen.dart

import 'package:flutter/material.dart';
import 'package:event_state_processor/event_state_processor.dart';
import 'login_event.dart';
import 'login_state.dart';
import 'login_event_processor.dart';

class LoginScreen extends CoreScreen<LoginEvent, LoginState, LoginEventProcessor> {
  [@override](/user/override)
  void handleDataStateChange(LoginState newState) {
    if (newState.error != null) {
      showAlertDialog(context, Text(newState.error!));
    }
  }

  [@override](/user/override)
  EventToStateProcessor<LoginEvent, LoginState> createEventProcessor() {
    return LoginEventProcessor();
  }

  [@override](/user/override)
  Widget buildScreenUi(BuildContext context, LoginState state) {
    return Scaffold(
      appBar: AppBar(title: Text('Login')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              onChanged: (value) => dispatch(LoginEmailChanged(email: value)),
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 16.0),
            TextField(
              onChanged: (value) => dispatch(LoginPasswordChanged(password: value)),
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () => dispatch(LoginSubmitted()),
              child: Text('Login'),
            ),
            if (state.isLoading) CircularProgressIndicator(),
          ],
        ),
      ),
    );
  }

  void showAlertDialog(BuildContext context, Widget content) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: content,
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('OK'),
          ),
        ],
      ),
    );
  }
}