Working with ChangeNotifierProvider package in flutter

ChangeNotifierProvider is the widget that comes from the provider package and provides an instance of a ChangeNotifier to its family. 

ChangeNotifierProvider should be mentioned in the 'Main.dart' file. before we are proceeding to add ChangeNotifierProvider we need to add a dependency in pubspec.yaml file. The latest version of the file will be available in Latest Provider Package. 

To get the latest version of the Package:

 provider - https://pub.dev/packages/provider/install. 

Paste the dependencies into pubspec.yaml file.

Main.dart

import 'package:change_notifier_provider/provider/product.dart';
import 'package:change_notifier_provider/screen/product_overview_screen.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(  //Initialize the ChangeNotifierProvider
      create: (context) => Products(),
      child: MaterialApp(
        title: 'Change Notifier',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: ProductOverView(),
      ),
    );
  }
}

Models - product_data_class.dart

Creating the custom data class to handle data to the App.

import 'package:flutter/foundation.dart';

class product_data_class {
  final String id;
  final String title;
  final String url;

  product_data_class(
      {required this.id, required this.title, required this.url});
}

Provider - product.dart

Adding Change Notifier to the product. it will trigger all the listeners once we commit any changes on the products.

import 'package:change_notifier_provider/models/product_data_class.dart';
import 'package:flutter/material.dart';

class Products with ChangeNotifier {
  final List<product_data_class> _items = [
    product_data_class(
        id: 'p1',
        title: 'White Reebok Shoe',
        url: 'https://www.zooblie.in/images/product_5.png'),
    product_data_class(
        id: 'p2',
        title: 'Puma Sun Glass',
        url: 'https://www.zooblie.in/images/product_6.png'),
    product_data_class(
        id: 'p3',
        title: 'Ramraj T-Shirt',
        url: 'https://www.zooblie.in/images/product_10.png'),
    product_data_class(
        id: 'p4',
        title: 'Women\'s hand bag',
        url: 'https://www.zooblie.in/images/product_4.png'),
  ];

  List<product_data_class> get items {
    return [..._items];
  }
}

Screen - product_overview_screen.dart

Designing the UI using GridView.builder 

import 'dart:math';

import 'package:change_notifier_provider/models/product_data_class.dart';
import 'package:change_notifier_provider/widgets/product_item.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../provider/product.dart';

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

  @override
  Widget build(BuildContext context) {
    final productData = Provider.of<Products>(context); // fetching the data from the product file where we added the data
    final products = productData.items;
    return Scaffold(
      appBar: AppBar(title: Text('Products')),
      body: GridView.builder(
          itemCount: products.length,
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 2,
              mainAxisSpacing: 2,
              childAspectRatio: 3 / 2),
          itemBuilder: (context, i) =>
              ProductsItem(products[i].url, products[i].title)),
    );
  }
}

Widgets - product_item.dart

Creating the widget to show the product and its title.

import 'package:flutter/material.dart';

class ProductsItem extends StatelessWidget {
  final String url;
  final String title;

  ProductsItem(this.url, this.title);

  @override
  Widget build(BuildContext context) {
    return GridTile(
      child: Image.network(
        url,
        fit: BoxFit.cover,
      ),
      footer: GridTileBar(
        backgroundColor: Colors.black45,
        title: Text(
          title,
          textAlign: TextAlign.center,
        ),
        trailing: IconButton(
          color: Theme.of(context).primaryColor,
          icon: Icon(Icons.favorite),
          onPressed: () {},
        ),
      ),
    );
  }
}