Flutter图表与状态管理插件graph_bloc的使用

Graph Bloc

一个实现FSM（有限状态机）的包。这是一个灵活且轻量的状态图，可以帮助保证事件和状态之间的关系保持声明性。

开始使用

你将需要在pubspec.yaml文件中包含此包。

dependencies:
  graph_bloc: 0.1.0

使用方法

查看/example文件夹中的典型计数器示例。

其他信息

有关FSM的更多信息，请参阅维基百科。

示例代码

以下是完整的示例代码：

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:graph_bloc/graph_bloc.dart';

// 定义事件
abstract class ExampleEvent extends Equatable {
  const ExampleEvent();

  @override
  List<Object?> get props => [];
}

class ExampleEventLoad extends ExampleEvent {
  const ExampleEventLoad();
}

class ExampleEventIncrement extends ExampleEvent {
  const ExampleEventIncrement();
}

class ExampleEventDecrement extends ExampleEvent {
  const ExampleEventDecrement();
}

class ExampleEventReset extends ExampleEvent {
  const ExampleEventReset();
}

class ExampleEventError extends ExampleEvent {
  const ExampleEventError({this.error});

  final Object? error;

  @override
  List<Object?> get props => [error];
}

// 定义状态
abstract class ExampleState extends Equatable {
  const ExampleState();

  @override
  List<Object?> get props => [];
}

class ExampleStateLoading extends ExampleState {
  const ExampleStateLoading();
}

class ExampleStateLoaded extends ExampleState {
  const ExampleStateLoaded([this.counter = 0]);

  final int counter;

  @override
  List<Object?> get props => [counter];
}

class ExampleStateError extends ExampleState {
  const ExampleStateError([this.error]);

  final Object? error;

  @override
  List<Object?> get props => [error];
}

// 我们的状态图实现
class ExampleGraphBloc extends GraphBloc<ExampleEvent, ExampleState> {
  ExampleGraphBloc({
    required ExampleState initialState,
  }) : super(initialState: initialState);

  @override
  BlocStateGraph<ExampleEvent, ExampleState> get graph => BlocStateGraph(
        graph: {
          ExampleStateLoading: {
            ExampleEventLoad: transition((
              ExampleEventLoad event,
              ExampleStateLoading state,
            ) {
              return const ExampleStateLoaded(0);
            }),
          },
          ExampleStateLoaded: {
            ExampleEventIncrement: transition((ExampleEventIncrement event, ExampleStateLoaded state) {
              return ExampleStateLoaded(state.counter + 1);
            }),
            ExampleEventDecrement: transition((ExampleEventDecrement event, ExampleStateLoaded state) {
              return ExampleStateLoaded(state.counter - 1);
            }),
          },
        },
        unrestrictedGraph: {
          ExampleEventError: transition((event, state) {
            return const ExampleStateError('Failed loading');
          }),
          ExampleEventReset: transition(((event, state) => const ExampleStateLoaded(0))),
        },
      );
}

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ExampleGraphBloc bloc = ExampleGraphBloc(initialState: const ExampleStateLoaded());

  void _incrementCounter() {
    bloc.add(const ExampleEventIncrement());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            StreamBuilder<ExampleState>(
              stream: bloc.stream,
              builder: (context, snapshot) {
                if (snapshot.hasData && snapshot.data is ExampleStateLoaded) {
                  return Text(
                    '${(snapshot.data as ExampleStateLoaded).counter}',
                    style: Theme.of(context).textTheme.titleMedium,
                  );
                }

                return const SizedBox.shrink();
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码解释

1. 定义事件：

   abstract class ExampleEvent extends Equatable {
     const ExampleEvent();
     @override
     List<Object?> get props => [];
   }
   
   class ExampleEventLoad extends ExampleEvent {
     const ExampleEventLoad();
   }
   
   class ExampleEventIncrement extends ExampleEvent {
     const ExampleEventIncrement();
   }
   
   class ExampleEventDecrement extends ExampleEvent {
     const ExampleEventDecrement();
   }
   
   class ExampleEventReset extends ExampleEvent {
     const ExampleEventReset();
   }
   
   class ExampleEventError extends ExampleEvent {
     const ExampleEventError({this.error});
     final Object? error;
     @override
     List<Object?> get props => [error];
   }
   

   这些类定义了不同的事件类型，例如加载、增加、减少、重置和错误。

2. 定义状态：

   abstract class ExampleState extends Equatable {
     const ExampleState();
     @override
     List<Object?> get props => [];
   }
   
   class ExampleStateLoading extends ExampleState {
     const ExampleStateLoading();
   }
   
   class ExampleStateLoaded extends ExampleState {
     const ExampleStateLoaded([this.counter = 0]);
     final int counter;
     @override
     List<Object?> get props => [counter];
   }
   
   class ExampleStateError extends ExampleState {
     const ExampleStateError([this.error]);
     final Object? error;
     @override
     List<Object?> get props => [error];
   }
   

   这些类定义了不同的状态类型，例如加载、已加载和错误。

3. 定义状态图：

   class ExampleGraphBloc extends GraphBloc<ExampleEvent, ExampleState> {
     ExampleGraphBloc({
       required ExampleState initialState,
     }) : super(initialState: initialState);
   
     @override
     BlocStateGraph<ExampleEvent, ExampleState> get graph => BlocStateGraph(
           graph: {
             ExampleStateLoading: {
               ExampleEventLoad: transition((
                 ExampleEventLoad event,
                 ExampleStateLoading state,
               ) {
                 return const ExampleStateLoaded(0);
               }),
             },
             ExampleStateLoaded: {
               ExampleEventIncrement: transition((ExampleEventIncrement event, ExampleStateLoaded state) {
                 return ExampleStateLoaded(state.counter + 1);
               }),
               ExampleEventDecrement: transition((ExampleEventDecrement event, ExampleStateLoaded state) {
                 return ExampleStateLoaded(state.counter - 1);
               }),
             },
           },
           unrestrictedGraph: {
             ExampleEventError: transition((event, state) {
               return const ExampleStateError('Failed loading');
             }),
             ExampleEventReset: transition(((event, state) => const ExampleStateLoaded(0))),
           },
         );
   }
   

   ExampleGraphBloc类实现了状态图，定义了状态和事件之间的转换关系。

4. 主应用逻辑：

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   
   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     ExampleGraphBloc bloc = ExampleGraphBloc(initialState: const ExampleStateLoaded());
   
     void _incrementCounter() {
       bloc.add(const ExampleEventIncrement());
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               const Text(
                 'You have pushed the button this many times:',
               ),
               StreamBuilder<ExampleState>(
                 stream: bloc.stream,
                 builder: (context, snapshot) {
                   if (snapshot.hasData && snapshot.data is ExampleStateLoaded) {
                     return Text(
                       '${(snapshot.data as ExampleStateLoaded).counter}',
                       style: Theme.of(context).textTheme.titleMedium,
                     );
                   }
   
                   return const SizedBox.shrink();
                 },
               ),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: _incrementCounter,
           tooltip: 'Increment',
           child: const Icon(Icons.add),
         ),
       );
     }
   }