Flutter功能扩展插件eagle_provider的使用

Flutter功能扩展插件eagle_provider的使用

Eagle Provider 是一个简单的状态管理包，它仅使用 ValueNotifier 和 InheritedWidget。

使用

要使用它，只需创建一个状态类和另一个作为状态控制器。

创建状态类

状态类必须始终继承自 StateController。

// 状态类
class HomeState extends StateController {
  final String? name;

  const HomeState({
    super.status,
    this.name,
  });

  [@override](/user/override)
  HomeState copyWith({
    Status? status,
    String? name,
  }) {
    return HomeState(
      status: status ?? this.status,
      name: name ?? this.name,
    );
  }

  [@override](/user/override)
  List<Object?> get props => [status, name];
}

创建控制器

控制器必须继承自 Controller<HomeState>。

// 控制器
class HomeController extends Controller<HomeState> {
  HomeController(super.value);

  [@override](/user/override)
  void onChange(HomeState? previous, HomeState current) {
    print('PREVIOUS ${previous?.name}');
    print('CURRENT ${current.name}');
  }

  setName(String name) {
    emit(value.copyWith(
      name: name,
      // status: Status.success,
    ));
  }

  setStatus([Status? status]) {
    emit(value.copyWith(status: status ?? Status.failure));
  }
}

注入依赖

在 widget 树的顶部使用 ControllerProvider 注入依赖。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ControllerProvider(
      controllers: [
        HomeController(
          const HomeState(
            status: Status.loading,
            name: 'Lucas',
          ),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

使用 ControllerBuilder

ControllerBuilder 是一个允许你以响应式方式构建用户界面的 widget。你可以通过传递你的控制器作为参数来使用它，或者如果不传递，则该 widget 将在 widget 树中使用 ControllerProvider 查找它。

该 widget 还会在满足 [buildWhen] 条件时调用 [builder]，并返回 [builder] 的输出作为其子组件。如果 [buildWhen] 条件未满足，则返回 [builder] 的最后一个输出。

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    var controller = ControllerProvider.of<HomeController>(context);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Home page'),
      ),
      body: ControllerBuilder<HomeController, HomeState>(
        buildWhen: (before, after) {
          return before.status != after.status;
        },
        builder: (BuildContext context, state) {
          if (state.status == Status.loading) {
            return const Center(child: CircularProgressIndicator());
          }

          return const Center(
            child: Text('Home completed loading'),
          );
        },
      ),
    );
  }
}

示例

以下是一个完整的示例，展示了如何使用 Eagle Provider。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ControllerProvider(
      controllers: [
        HomeController(
          const HomeState(
            status: Status.loading,
            name: 'Lucas',
          ),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var controller = ControllerProvider.of<HomeController>(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Eagle Provider',
        ),
        actions: [
          ElevatedButton(
            onPressed: () {
              controller!.setName('Sabrina');
              // controller.setStatus(Status.loading);
            },
            child: const Text('change'),
          ),
        ],
      ),
      body: ControllerConsummer<HomeController, HomeState>(
        listener: (context, state) {
          print('LISTENER ${state.name}');
        },
        listenWhen: (previous, current) {
          return previous.name != current.name;
        },
        buildWhen: (previous, current) {
          return previous.status != current.status;
        },
        builder: (context, state) {
          return Center(
            child: Column(
              children: [
                Text(state.name.toString()),
                Text(state.status.toString()),
              ],
            ),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // controller!.setName('Pryscilla');
          controller!.setStatus();
        },
      ),
    );
  }
}