Flutter集成Django后端插件djangoflow_app的使用

简介

djangoflow_app 是一个简单的、有明确意见的和极简的Flutter应用程序结构，旨在快速启动和易于维护。

开始使用

在 pubspec.yaml 文件中添加 djangoflow_app 作为依赖项。

dependencies:
  djangoflow_app: <最新版本>

导入 djangoflow_app 并使用它来创建你的根 StatelessWidget。

import 'package:djangoflow_app/djangoflow_app.dart';

void main() => DjangoflowAppRunner.run(
      onException: (exception, stackTrace) {
        // 自定义异常处理
      },
      rootWidgetBuilder: (appBuilder) async {
        return MaterialApp(
          title: 'Djangoflow App',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: appBuilder(AppBuilder(
            repositoryProviders: [
              // 你的仓库提供者
            ],
            providers: [
              // 你的BLoC提供者
            ],
            listeners: [
              // 你的BLoC监听器
            ],
            builder: (context) => YourRootWidget(),
          )),
        );
      },
    );

特性

AppBuilder

AppBuilder 是一个自定义的 StatelessWidget，允许你在一处提供全局的 BlocProvider、BlocListener、RepositoryProvider 以及 initState 和 dispose 的回调。

AppCubitBuilder, AppCubitConsumer, 和 AppCubitListener

这是一组自定义的 BlocBuilder、BlocConsumer 和 BlocListener，允许你监听 AppCubit 的状态变化。

DjangoflowAppRunner

DjangoflowAppRunner 是一个自定义的 runApp，允许你在整个应用范围内全局处理异常，并设置 HydratedBloc 存储和 BlocObserver。

DjangoflowAppSnackbar

DjangoflowAppSnackbar 是一个简单的 SnackBar 管理器，允许你全局显示不同类型的 SnackBar（信息、错误、应用内通知）。

SandboxBanner

SandboxBanner 是一个简单的横幅，允许你在屏幕的左上角显示带有自定义消息和颜色的横幅。它有助于指示当前环境（例如，沙盒、生产）。

EnvSwitcher

EnvSwitcher 是一个简单的组件，允许你通过长按切换不同的环境。

注意事项

DjangoflowAppSnackbar 使用 ScaffoldMessenger。DjangoflowAppSnackbar 的全局键需要提供给 MaterialApp 的 scaffoldMessengerKey。

完整示例代码

以下是一个完整的示例代码：

import 'package:djangoflow_app/djangoflow_app.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() {
  DjangoflowAppRunner.run(
    onException: (exception, stackTrace) {
      DjangoflowAppSnackbar.showError(exception.toString());
    },
    rootWidgetBuilder: (builder) => builder(
      AppBuilder(
        blocProviders: [
          BlocProvider<AppCubit>(create: (context) => AppCubit.instance),
        ],
        blocListeners: [
          BlocListener<AppCubit, AppState>(
            listenWhen: (previous, current) =>
                previous.environment != current.environment,
            listener: (context, state) {
              DjangoflowAppSnackbar.showInAppNotification(
                title: 'Environment Changed',
                body: 'App is in ${state.environment.name} environment now.',
              );
            },
          ),
        ],
        builder: (context) => AppCubitBuilder(
          builder: (context, state) => MaterialApp(
            theme: ThemeData(),
            scaffoldMessengerKey: DjangoflowAppSnackbar.scaffoldMessengerKey,
            debugShowCheckedModeBanner: false,
            darkTheme: ThemeData.dark(),
            themeMode: state.themeMode,
            home: Scaffold(
              appBar: AppBar(
                title: const Text('Djangoflow App'),
                actions: const [
                  _ToggleThemeModeButton(
                    key: Key('theme_toggle'),
                  ),
                ],
              ),
              body: SafeArea(
                child: ListView(
                  padding: const EdgeInsets.all(16),
                  children: [
                    const _EnvironmentToggle(key: Key('environment_toggle')),
                    const SizedBox(height: 16),
                    ElevatedButton(
                      child: const Text('Throw exception'),
                      onPressed: () => throw Exception('Test exception'),
                    ),
                  ],
                ),
              ),
            ),
            builder: (context, child) => SandboxBanner(
              isSandbox: state.environment == AppEnvironment.sandbox,
              child: child ?? const SizedBox.shrink(),
            ),
          ),
        ),
      ),
    ),
  );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) => AppCubitBuilder(
        builder: (context, state) => IconButton(
          onPressed: () => context.read<AppCubit>().updateThemeMode(
                state.themeMode == ThemeMode.dark
                    ? ThemeMode.light
                    : ThemeMode.dark,
              ),
          icon: Icon(
            state.themeMode == ThemeMode.dark
                ? Icons.light_mode
                : Icons.dark_mode,
          ),
        ),
      );
}

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

  [@override](/user/override)
  Widget build(BuildContext context) => const EnvSwitcher(
        child: ListTile(
          title: Text('Long press to toggle environment'),
        ),
      );
}