Flutter multiprovider tutorial for beginners

 

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.

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.

 

We have discussed more state management concepts in flutter you may refer the link 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()
        ),
      ),
    );
  }
}

Output :

This screen depicts the implementation of flutter multiprovider usage in your app.

 

 

If you have any query in this tutorial on flutter multiprovider do let us know in the comment section below.If you like this tutorial do like and share us for more interesting tutorials