Flutter插件pike的使用_Pike 是一个基于事件驱动模式的 Flutter 状态管理库

Flutter插件pike的使用_Pike 是一个基于事件驱动模式的 Flutter 状态管理库

Pike的功能介绍

Pike 是一个基于事件驱动模式的 Flutter 状态管理库。它使用事件流来管理状态，并提供了方便的状态交互组件，如 PikeBuilder、PikeConsumer 和 PikeProvider。

• State management using events: 状态更新响应于事件。
• Components for listening to and displaying state: 使用 PikeBuilder、PikeConsumer 和 PikeProvider 来管理和显示状态变化。
• Customizable event handling: 允许自定义事件处理器和选择性状态重建。

安装

在 pubspec.yaml 文件中添加 pike：

dependencies:
  pike: ^latest_version

示例代码

下面是一个完整的示例代码，展示了如何使用 pike 插件进行状态管理。

import 'package:flutter/material.dart';
import 'package:pike/pike.dart';

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

/// {[@template](/user/template) app}
/// A [StatelessWidget] that:
/// * uses [bloc](https://pub.dev/packages/bloc) and
/// [flutter_bloc](https://pub.dev/packages/flutter_bloc)
/// to manage the state of a counter and the app theme.
/// {[@endtemplate](/user/endtemplate)}
class App extends StatelessWidget {
  /// {[@macro](/user/macro) app}
  const App({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiPikeProvider(
      providers: [
        PikeProvider<ThemeCarp>(
          pike: ThemeCarp(),
        ),
        PikeProvider<CounterPike>(
          pike: CounterPike(),
        ),
      ],
      child: const AppView(),
    );
  }
}

/// {[@template](/user/template) app_view}
/// A [StatelessWidget] that:
/// * reacts to state changes in the [ThemeCarp]
/// and updates the theme of the [MaterialApp].
/// * renders the [CounterPage].
/// {[@endtemplate](/user/endtemplate)}
class AppView extends StatelessWidget {
  /// {[@macro](/user/macro) app_view}
  const AppView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PikeBuilder<ThemeCarp, ThemeData>(
      builder: (_, theme) {
        return MaterialApp(
          theme: theme,
          home: const CounterPage(),
        );
      },
    );
  }
}

/// {[@template](/user/template) counter_page}
/// A [StatelessWidget] that:
/// * provides a [CounterPike] to the [CounterView].
/// {[@endtemplate](/user/endtemplate)}
class CounterPage extends StatelessWidget {
  /// {[@macro](/user/macro) counter_page}
  const CounterPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const CounterView();
  }
}

/// {[@template](/user/template) counter_view}
/// A [StatelessWidget] that:
/// * demonstrates how to consume and interact with a [CounterPike].
/// {[@endtemplate](/user/endtemplate)}
class CounterView extends StatelessWidget {
  /// {[@macro](/user/macro) counter_view}
  const CounterView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Counter')),
      body: Center(
        child: PikeBuilder<CounterPike, int>(
          builder: (context, count) {
            return Text(
              '$count',
              style: Theme.of(context).textTheme.displayLarge,
            );
          },
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          FloatingActionButton(
            child: const Icon(Icons.add),
            onPressed: () {
              PikeProvider.of<CounterPike>(context)
                  .add(CounterIncrementPressed());
            },
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.remove),
            onPressed: () {
              PikeProvider.of<CounterPike>(context)
                  .add(CounterDecrementPressed());
            },
          ),
          const SizedBox(height: 4),
          FloatingActionButton(
            child: const Icon(Icons.brightness_6),
            onPressed: () {
              PikeProvider.of<ThemeCarp>(context).toggleTheme();
            },
          ),
        ],
      ),
    );
  }
}

/// Event being processed by [CounterPike].
abstract class CounterEvent {}

/// Notifies bloc to increment state.
class CounterIncrementPressed extends CounterEvent {}

/// Notifies bloc to decrement state.
class CounterDecrementPressed extends CounterEvent {}

/// {[@template](/user/template) counter_bloc}
/// A simple [Pike ] that manages an `int` as its state.
/// {[@endtemplate](/user/endtemplate)}
class CounterPike extends Pike<CounterEvent, int> {
  /// {[@macro](/user/macro) counter_bloc}
  CounterPike() : super(0) {
    on<CounterIncrementPressed>((event, emit) => emit(state + 1));
    on<CounterDecrementPressed>((event, emit) => emit(state - 1));
  }
}

/// {[@template](/user/template) brightness_cubit}
/// A simple [ Carp ] that manages the [ ThemeData ] as its state.
/// {@ endtemplate}
class ThemeCarp extends Carp<ThemeData> {
  /// {[@macro](/user/macro) brightness_cubit}
  ThemeCarp() : super(_lightTheme);

  static final _lightTheme = ThemeData.light();

  static final _darkTheme = ThemeData.dark();

  /// Toggles the current brightness between light and dark.
  void toggleTheme() {
    emit(state.brightness == Brightness.dark ? _lightTheme : _darkTheme);
  }
}