Flutter auto_route | Comment envelopper une route avec BlocProvider ?

Question

Donc, j'utilise le auto_route pour la navigation dans mon application et flutter_bloc pour la gestion de l'État. Lorsque j'utilisais l'ancien Navigator, je pouvais simplement envelopper une route avec un BlocProvider. Par exemple :

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());
    }
  }
}

Maintenant, auto_route utilise les annotations pour générer un fichier de routage. Comment pourrais-je fournir le contexte du fournisseur à l'itinéraire ?

Answer 1

Nous avons mis en place notre widget de page (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

La réponse dépend de la façon dont vos itinéraires sont construits, je vais vous montrer comment j'y parviens.

Pour les routes imbriquées (lorsque vous fournissez des enfants à vos routes), vous pouvez utiliser un wrapper. Vous pouvez envelopper votre ou vos fournisseurs de bloc autour de l'enfant et il fournira le bloc à tous les écrans enfants.

/// 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(),
  );
}

Si vous n'utilisez pas de widget d'habillage, par exemple s'il s'agit d'un écran unique sans routes enfantines, je créerais un widget distinct pour habiller l'écran. BlocProvider autour de l'écran.

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...