Provider State Management in Flutter

image from pexels

hello, in this case, I will discuss how to use provider state management, in some cases, we need to pass data from models and process it to another screen for example we have a data product and we will pass in detail screen like this

data successfully got from the homepage

so we will use state management, in flutter have so many state management like

• Bloc
• GetX
• Provider

View the docs to complete a list of state management

so let’s get started, In this session, I will discuss some points

• project overview
• create flutter project
• Configuring Assets and
• designing a models
• install provider
• Create Provider Class
• Creating HomeScreen and Base Template
• Creating Detail Screen
• Using Change Notifier
• Pass Data from Provider to Detail Screen

Project Overview

okay let’s get started with a project overview, in this project we will build a simple E-Commerce, this project will display a list of product and product details on the second screen.

here is a project structure

and here a project structure

project structure

now let’s continue to the second step, ie create a new flutter project

open the terminal and enter this command

flutter create providers

providers assume the name of the project, so using any name is free for your project

Configuring Assets

to configure assets open the assets directory on this repo and copy the assets directory to your project, and configure pubspec.yaml like this

assets font configuration in pubspec.yaml

Designing a models

now in this step, we will design models for our project create a directory called models then create a products.dartfile

and then save that file, in this step, we will create a base structure of data models

Installing Provider State Management

now in this step, we will install provider state management with terminal enter the command

flutter pub add provider

Create Provider Class

Now in this step create a provider class and that class implements the ChangeNotifier class

now this class functions as a listener whose job is to listen to every widget that needs changes by taking advantage of the context of the class, now the basic concept of this listener will tell each widget when there is a change from ChangeNotifier (or the class that implements it).

providers concept

Create HomeScreen and Base Template

the next step is to create a home screen and base UI template for the project and widget

Create Base Template

now edit file main.dart like this to implement provider state management

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:providers/providers/products.dart';

import './screens/products_overview_screen.dart';
import './screens/product_detail_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (BuildContext context) => ProductProvider(),
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'MyShop',
        theme: ThemeData(
          fontFamily: 'Lato',
          colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.indigo)
              .copyWith(secondary: Colors.amber),
        ),
        home: const ProductsOverviewScreen(),
        routes: {
          ProductDetailScreen.routeName: (ctx) => const ProductDetailScreen(),
        },
      ),
    );
  }
}

Create HomeScreen

create screen directory and file product_overview_screen.dart

Create a product Grid View

let’s create a widget for the product grid and store the product_grid.dart in widget directory

now you will see the screen if you running the project like this

home screen overview

Create Detail Screen

now in this step, we will be creating a screen to display our product create product_detail_screen.dart inside screen directory

Create Detail Screen Widget

creating a widget for detail product screen

now you will see the product detail screen

product detail overview

Conclusion

with this provider we can handle and manage state as needed without having to refresh all existing states using SetState, thus making our application more efficient and also more efficient in RAM usage, click here to join our community and change your life with remote work, source code available in Github