Question #279MediumFlutter Basics

In flutter bloc , riverpod how to handle multiple statemanagements in the single file ? Like if a single file have to use 2 or 3 riverpod providers how to handle that scenario ?

#flutter#state#bloc#riverpod#provider

Answer

Multiple State Management in One App

Managing different states in different parts of the app:


Architecture

text
App
├── UserProvider (Riverpod) - Global auth state
├── HomeScreen
│   └── HomeNotifier (Riverpod) - Local home state
├── ChatScreen
│   └── ChatBloc (BLoC) - Complex chat logic
└── SettingsScreen
    └── setState() - Simple toggle state

Implementation

dart
// Global state (Riverpod)
final userProvider = StateNotifierProvider((ref) => UserNotifier());

// Local state (StatefulWidget)
class HomeScreen extends StatefulWidget {
  
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, child) {
        final user = ref.watch(userProvider);
        return Scaffold(
          body: ChatBlocProvider(
            child: ChatScreen(),
          ),
        );
      },
    );
  }
}

// Chat-specific BLoC
class ChatBloc extends Bloc<ChatEvent, ChatState> {
  
  Stream<ChatState> mapEventToState(ChatEvent event) async* {
    if (event is SendMessage) {
      yield LoadingState();
      // Complex logic
    }
  }
}

Guidelines

  • Global: Riverpod/Provider
  • Local complex: BLoC
  • Local simple: setState()
  • Share local: Pass via constructor

Best Practice: Keep each state management simple and focused.