Flutter MultiProvider: A Beginner's Guide

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.

Using provider you can expose the data and can observe it with the help of consumers through out your app.This will make a easy to access user friendly data usage.

Flutter Multiprovider may be required to handle some situations where we require different data objects or depending upon the modules so in this tutorial we will be dealing with a example on them.

Using the provider you can avoid all the unnecessary data hierarchies and can just make use of the data where ever required and also can properly dispose them after use.

In this tutorial, we’ll explore scenarios where different data objects or module dependencies are essential. With MultiProvider, you can easily manage data without complex hierarchies, ensuring proper disposal when needed. If you’re interested in advanced Flutter state management concepts, check out the link for more insights and information

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

Flutter Multiprovider output :

This screen depicts the implementation of Multiprovider usage in your app.

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

Flutter MultiProvider: A Beginner’s Guide