Flutter Provider Tutorial For Beginners

Flutter Provider :

Flutter Provider implementation is explained in this part of the tutorial using a simple example of displaying a data by exposing it and consuming it.

Flutter Provider makes it a easy task to handle state management and thereafter make data accessible much easier.

Provider exposes the data so that it can be read from any part of the app easily without providing a hierarchy for data to pass through.

The exposed data is that easily observed and need to be properly disposed after the use to avoid unnecessary usage of resources.

In this scenario it makes it much easier for the developer to avoid all the boiler plate code in making use of the data across several modules in app.

Flutter Provider Video Tutorial:

Watch the complete tutorial below for more information.

Dependency’s :

Add a dependency flutter provider to make use of it in our flutter app.

Also make sure you provide the latest version of the dependency to avoid unwanted crash issues due to outdated code.

dependencies:
  flutter:
    sdk: flutter
  provider: ^5.0.0

data.dart :

Creating a data class from where we will expose the data through flutter provider and make it available anywhere in our app.

Here we have considered and String value and exposing the same.

import 'package:flutter/material.dart';

class Data extends ChangeNotifier{

  String value(){

    return "Abhishek";
  }
}

second.dart :

In this class we are observing the data exposed from data class using a Consumer and providing the type of consumer to be Data.

And there after setting the data to the text widget.

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

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<Data>(
      builder: (context,data,_){
        return Center(child: Text(data.value()));
      },
    );
  }
}

main.dart :

Here in our main.dart file we are providing the basic code required to build app where we provide scaffold and provide app bar, body and there after redirect it to second.dart file.

import 'package:flutter/material.dart';
import 'package:flutter_provider_example/data.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 ChangeNotifierProvider(
      create: (context) {
        return Data();
      },
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text("Provider"),
          ),
          body: Second()
        ),
      ),
    );
  }
}

Flutter Provider Output :

This image depicts usage of flutter provider.

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