Flutter Multiprovider :

Flutter Multiprovider class let’s you have multiple providers declared in your flutter app. In our previous tutorial we have seen only single provider implementation.

Discover the power of Flutter MultiProvider class—it lets you use multiple providers in your app, making state management a breeze. Unlike single provider setups, MultiProvider simplifies data access.

When scaling a Flutter application, managing clean state transitions across different screens becomes vital. While a single Provider works beautifully for localized data or small apps, medium to large-scale production apps inevitably require access to multiple state models at once (e.g., authentication status, user profile data, settings configurations).

Nesting individual provider widgets line after line results in what developers call the “Nested Pyramid of Doom”:

Provider<AuthService>(
  create: (_) => AuthService(),
  child: Provider<ThemeSettings>(
    create: (_) => ThemeSettings(),
    child: Provider<CartModel>(
      create: (_) => CartModel(),
      child: MyAppHome(),
    ),
  ),
)

To solve this exact issue and keep our codebase scalable, Flutter’s provider package includes a powerful utility: MultiProvider.

In this comprehensive guide, we’ll dive deep into setting up MultiProvider effectively, understanding how it optimizes your code architecture, and uncovering common troubleshooting pitfalls. If you’re interested in advanced Flutter state management concepts, check out the link for more insights and information

What is MultiProvider in Flutter?

MultiProvider is a utility widget that merges a flat list of independent providers into a single, clean, and linear widget tree. Essentially, it acts as syntactic sugar. Instead of nesting multiple layers of provider classes deeply inside each other, MultiProvider groups them sequentially inside an array while maintaining the exact same functionality underneath the hood.

Step-by-Step How-To: Implementing MultiProvider in Flutter

Let’s look at a clean implementation showing how to pass down a user settings state alongside an authentication state down to the main app dashboard.

Step 1: Create Your State Models (ChangeNotifiers)

First, define your separate data models extending ChangeNotifier.

// auth_provider.dart
import 'package:flutter/material.dart';

class AuthProvider with ChangeNotifier {
  bool _isLoggedIn = false;
  bool get isLoggedIn => _isLoggedIn;

  void login() {
    _isLoggedIn = true;
    notifyListeners();
  }
}

// settings_provider.dart
import 'package:flutter/material.dart';

class SettingsProvider with ChangeNotifier {
  bool _isDarkMode = false;
  bool get isDarkMode => _isDarkMode;

  void toggleTheme() {
    _isDarkMode = !_isDarkMode;
    notifyListeners();
  }
}

Step 2: Declare MultiProvider at the Root of Your App

Wrap your root widget inside main.dart with a MultiProvider. This ensures that any screen generated within the application hierarchy can instantly observe changes or trigger logic within these specific states.

// main.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'auth_provider.dart';
import 'settings_provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider<AuthProvider>(
          create: (context) => AuthProvider(),
        ),
        ChangeNotifierProvider<SettingsProvider>(
          create: (context) => SettingsProvider(),
        ),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

Step 3: Consume Multiple Providers inside Your Screen

You can access any of these values dynamically inside individual widgets via context.watch<T>() or Provider.of<T>(context).

// home_screen.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'auth_provider.dart';
import 'settings_provider.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // Listen to changes across multiple independent states
    final auth = context.watch<AuthProvider>();
    final settings = context.watch<SettingsProvider>();

    return Scaffold(
      appBar: AppBar(title: const Text('MultiProvider Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('User Status: ${auth.isLoggedIn ? "Logged In" : "Logged Out"}'),
            Text('Dark Mode Status: ${settings.isDarkMode ? "Enabled" : "Disabled"}'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => auth.login(),
              child: const Text('Log In User'),
            ),
            ElevatedButton(
              onPressed: () => settings.toggleTheme(),
              child: const Text('Toggle Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

Troubleshooting MultiProvider: Common Issues & Fixes

1. Error: ProviderNotFoundException

• The Cause: You attempted to look up a state provider value using a BuildContext that sits above or outside the scope of where the MultiProvider array was actually defined. This frequently happens if you pass an uninstantiated model provider or call the context inside the same widget constructing the MultiProvider.
• The Solution: Ensure your MultiProvider array structure wraps well above the widget layer initializing the data read/watch call. If pushing a brand new route with custom page routing (Navigator.push), remember that the newly declared route screen sits outside your localized widget scope unless your MultiProvider spans globally across the master MaterialApp widget.

2. Duplicating Providers of the Exact Same Data Type

• The Cause: The provider library looks up data types hierarchically from top to bottom based on their explicit Dart classes (Type). If you register two elements of the exact same type inside the list array

providers: [
  Provider<String>(create: (_) => "First Value"),
  Provider<String>(create: (_) => "Second Value"),
]

Calling context.watch<String>() will only grab the last defined provider because it overrides previous matching references.

The Solution: Wrap similar primitives inside a custom class wrapper model type, or differentiate your states with separate explicitly defined classes.

3. Redundant Widget Rebuilds

• The Cause: Calling context.watch<T>() triggers full widget rebuilds whenever any property inside that model changes, even if the properties your specific text element displays remain constant.
• The Solution: Use context.select<Model, Property>() to selectively rebuild the widget tree only when a specific data variable field registers a delta modification change.

MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => AuthModel()),
    StreamProvider<UserStatus>(create: (_) => statusStream, initialData: UserStatus.unknown),
    Provider<ApiService>(create: (_) => ApiService()),
  ],
  child: const MyApp(),
)

 

Flutter Multiprovider Video Tutorial :

Watch the complete tutorial below for more information.

 

dependency :

Adding the dependency provider and specify the latest version to avoid any code level issues.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

repo.dart :

Creating a repo class where we will specifying the data and also methods to update the data on user request and provide the same instantly.

import 'package:flutter/material.dart';

class Repo extends ChangeNotifier{

  String value = "Hello World";

  void changeValue(String newValue){
    value = newValue;
    notifyListeners();
  }

}

 

data.dart :

Creating a data class this is the another class similar to repo which we have created just to show you how flutter multiprovider work.Here also we have provided some data that needs to be utilized in the app.

import 'package:flutter/material.dart';

class Data extends ChangeNotifier{

  String value(){

    return "Abhishek";
  }
}

 

second.dart :

In this class file we will be utilising / consuming the data which is exposed from data, repo class and update the view also sync with the new data on changing the data.

I have mostly targeted on the way to explain the provider so not considered any additional widgets in this screen. You can make use of the concept and make it applicable for other widgets as well.

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/data.dart';
import 'package:flutter_provider_example/repo.dart';
import 'package:provider/provider.dart';

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<Repo>(
      builder: (context,repo,_){
        return Center(child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(repo.value),
            SizedBox(height: 50.0,),
            TextField(
              onChanged: (value){
                repo.changeValue(value);
              },
            ),
          ],
        ));
      },
    );
  }
}

 

main.dart :

In this class we will be specifying the flutter multiprovider utilization and default setting for the app also redirecting to the second.dart file.

This is a sample way to declare flutter multiprovider. You can customize the usage according to your requirement,

MultiProvider( 
providers: [ ChangeNotifierProvider(
 create: (context) => Data()), 
ListenableProvider(create: (context) => Repo()), ],

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/data.dart';
import 'package:flutter_provider_example/repo.dart';
import 'package:flutter_provider_example/second.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => Data()),
        ListenableProvider(create: (context) => Repo()),
      ],
      child: MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text("Provider"),
            ),
            body: Second()
        ),
      ),
    );
  }
}

 

If you have any questions about this MultiProvider tutorial, feel free to ask in the comments below. If you found this tutorial helpful, please show your support by liking and sharing. Stay tuned for more engaging tutorials