How to create a separate routing for a module in Flutter?

Question

I have two pages: ConversationsListScreen (it displays list of conversations) and ConversationScreen (shows a particular conversation, user gets in here from ConversationsListScreen).

These two pages should be wrapped into a separate module because they both are needed the same data (that I'd like to provide via common cubit class). So that I've created a MessagesModule.

    class MessagesModule extends StatelessWidget {
      final String _currentUserId;
      final String _currentLocale;
    
      const MessagesModule({
        @required String currentUserId,
        @required String currentLocale,
      })  : _currentUserId = currentUserId,
            _currentLocale = currentLocale;
    
      @override
      Widget build(BuildContext context) {
        return BlocProvider<MessagesModuleCubit>(
          create: (context) => MessagesModuleCubit(_currentUserId, _currentLocale),
          child: ConversationsListScreen(),
        );
      }
    }

After redirection to ConversationScreen it opens on the same level as MessagesModule, it means that my context doesn't contain MessagesModuleCubit. But I'd like to see ConversationScreen nested to MessagesModule, the same as ConversationsListScreen. Here is a current structure of my widgets

How can I manage routing for these two pages so that I can use their common state from MessagesModuleCubit?

Answer 1

You can move the provider to your main file so it wraps both of the widgets in any case