扑 auto_route |如何使用 BlocProvider 包装路由？

Question

因此，我在我的应用程序中使用 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使用注释生成路由文件。我将如何为路由提供提供商上下文？

Answer 1

我们有页面小工具 (state/less/ful) 实施 AutoRouteWrapper

class HomePage extends StatelessWidget implements AutoRouteWrapper{
  .....
 @override
 Widget wrappedRoute(context){
   return BlocProvider(
            create: (context) => HomeBloc(),
            child:  this, // this as the child Important!
          );
   }

}

Answer 2

答案取决于你的路线是如何构建的，我会告诉你我是如何实现的。

对于嵌套路由（当您向路由提供 children 时），您可以使用包装器。您可以将您的 bloc 提供商包裹在 child 周围，它将向所有 children 屏幕提供 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(),
  );
}

如果您没有使用包装器小部件，例如它是一个没有 children 路由的单一屏幕，我会创建一个单独的小部件来将 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...

扑 auto_route |如何使用 BlocProvider 包装路由？

Flutter auto_route | How do I wrap a route with BlocProvider?

flutter

bloc

flutter-provider