时间戳

首页 > 解决方案 > 颤振自动路由 | 如何使用 BlocProvider 包装路由？

flutter - 颤振自动路由 | 如何使用 BlocProvider 包装路由？

问题描述

因此，我使用auto_route包在我的应用程序中进行导航和flutter_bloc状态管理。当我使用旧的 Navigator 时，我可以用 BlocProvider 包装一条路线。例如：

class Router {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    switch (settings.name) {
      case '/':
        return MaterialPageRoute(
          builder: (_) => BlocProvider( // wrapped Home with BlocProvider
            create: (context) => SubjectBloc(),
            child: Home(),
          ),
        );
      case '/feed':
        return MaterialPageRoute(builder: (_) => Feed());
    }
  }
}

现在，auto_route使用注解来生成路由文件。我将如何四处为路线提供提供者上下文？

标签： flutterblocflutter-provider

解决方案

答案取决于您的路线是如何构建的，我将向您展示我是如何实现这一目标的。

对于嵌套路由（当您为路由提供子路由时），您可以使用包装器。您可以将您的 bloc 提供者包裹在孩子周围，它将为所有子屏幕提供 bloc。

/// routes

AutoRoute(
    page: SupportWrapper,
    name: 'SupportRouter',
    path: 'support',
    children: [
        AutoRoute(
            page: HelpSupportScreen,
            path: '',
        ),
        AutoRoute(
            page: MessageUsScreen,
            path: 'issue',
        ),
    ],
),

/// build method of [support_wrapper.dart]

@override
Widget build(BuildContext context) {
  return MultiBlocProvider(
    providers: [
      BlocProvider(
        create: (context) => _supportCubit,
      ),
    ],
    child: const AutoRouter(),
  );
}

如果您没有使用包装小部件，例如它是一个没有子路由的单一屏幕，我将创建一个单独的小部件来环绕BlocProvider屏幕。

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => _supportCubit
      child: const _SupportScreen(),
    );
  }
}

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

// rest of your screens code...

推荐阅读