ChangeNotifierProvider shows gray screen

Issue

I have the following code

class to hold my items as follows:

class ItemList extends ChangeNotifier {
  List items = [
    {
      "id": "1",
      "type": "men",
      "liked" : true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price" : 1,
    },
    {
      "id": "2",
      "type": "men",
      "liked" : true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price" : 2,
    },
    {
      "id": "3",
      "type": "men",
      "liked" : true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price" : 3,
    },
    {
      "id": "4",
      "type": "men",
      "liked" : true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price" : 4,
    },
    {
      "id": "5",
      "type": "men",
      "liked" : true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price" : 5,
    },
  ];

  likeAndUnlike(id){
    items.forEach((item)  {
      if(item['id'] == id){
        item['liked'] = !item['liked'];
      }
    }  ) ;
    notifyListeners() ;
  }
}

and a class to return the items from the ItemList class as follows:

class LikedProduct extends StatelessWidget {
  final productDetails;

  LikedProduct({this.productDetails});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    print("insideLikedProject");
    return Padding(
      padding: EdgeInsets.only(bottom: 22),
      child: GestureDetector(
        onTap: () {
          print("CLICKED!");
        child: Container(
          height: size.height * 0.15,
          width: size.width * 0.9,
          child: Row(
            children: <Widget>[
              Hero(
                transitionOnUserGestures: true,
                tag: productDetails['id'],
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(12),
                  child: Image.asset(
                    productDetails['img'],
                    width: size.width * 0.35,
                    height: size.height * 0.15,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              SizedBox(
                width: 8,
              ),
              SizedBox(
                height: size.height * 0.13,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Text(
                      productDetails['type'],
                      style: style.headerStyle3,
                    ),
                    Text(
                      productDetails['price'].toString() + " OMR",
                      style: style.textTheme
                          .copyWith(color: Theme.of(context).primaryColor),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Then I call the LikedProduct class inside ChangeNotifierProvider as follows:

class OrdersUI extends StatefulWidget {
  @override
  _OrdersUIState createState() => _OrdersUIState();
}

class _OrdersUIState extends State<OrdersUI> {
  final totalCost = 0;
  final jeansPrice = 0;
  final jeansCounter = 0;
  final standardDeliveryCost = 5;
  final expressDeliveryCost = 15;

  void _changeTotalPrice() {
    setState(() {});
  }

  final productDetails;

  _OrdersUIState({this.productDetails});

  @override
  Widget build(BuildContext context) {
    final data = MediaQuery.of(context);
    final size = MediaQuery.of(context).size;

    return Scaffold(
        appBar: AppBar(
          title: Align(
              alignment: Alignment.center,
              child: Text(
                'Title',
                style: TextStyle(color: Colors.black),
              )),
          actions: <Widget>[],
          backgroundColor: Colors.white,
        ),
        body: Container(
            width: data.size.width,
            //height: data.size.height * 0.05,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topCenter,
                      child: Container(
                          color: Color.fromARGB(255, 81, 202, 238),
                          height: data.size.height * 0.05,
                          width: data.size.width,
                          alignment: Alignment.topCenter,
                          child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                'Total : ${totalCost.toString()} OMR',
                              ))),
                    ),
                  ],
                ),

                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                  child: Column(
                    children: <Widget>[
                      ChangeNotifierProvider<ItemList>(
                        create: (context) => locator<ItemList>(),
                        child: Consumer<ItemList>(
                          builder: (context, model, child) {
                            print("Inside Builder"); // doesn't get executed
                            return Expanded(
                              child: ListView.builder(
                                physics: ScrollPhysics(
                                    parent: BouncingScrollPhysics()),
                                shrinkWrap: true,
                                itemCount: model.items.length,
                                itemBuilder: (context, index) {
                                  print('Inside Item Builder');  // doesn't get executed
                                  return LikedProduct(
                                    productDetails: model.items[index],
                                  );
                                },
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        //margin: const EdgeInsets.only(left: 50.0, right: 50.0),
                        child: Divider(
                          height: 1,
                          thickness: 1,
                          color: Colors.grey.shade700,
                        ),
                      ),
                    )
                  ],
                ),
              ],
            )
        )
    );
  }
}

And the locator file used inside ChangeNotifierProvider is to register the classes I want to use inside my ui and it is as follows:

import 'package:get_it/get_it.dart';
import './core/Items_lists.dart';

GetIt locator = GetIt();

void setupLocator() {
  locator.registerFactory(() => ItemList()) ;
}

And when I run the application to view the OrdersUI() I get a screen that looks like this:
The result or OrdersUI

It shows gray color instead of listing the items

what am I doing wrong here? why the items doesn’t appear?

NOTE: I am using provider version 4.0.0

Solution

You can copy paste run full code below
Step 1: You can move ChangeNotifierProvider to MyApp

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (BuildContext context) => locator<ItemList>(),
        ),
      ],
      child: MaterialApp(

Step 2: There is a bug , you missed place } , cause error

child: GestureDetector(
        onTap: () {
          print("CLICKED!");
        child: Container(

should be

GestureDetector(
          onTap: () {
            print("CLICKED!");
          },
          child: Container(

working demo

enter image description here

full code

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:get_it/get_it.dart';

GetIt locator = GetIt.instance;

void setupLocator() {
  locator.registerFactory(() => ItemList());
}

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

class ItemList extends ChangeNotifier {
  List items = [
    {
      "id": "1",
      "type": "men",
      "liked": true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price": 1,
    },
    {
      "id": "2",
      "type": "men",
      "liked": true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price": 2,
    },
    {
      "id": "3",
      "type": "men",
      "liked": true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price": 3,
    },
    {
      "id": "4",
      "type": "men",
      "liked": true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price": 4,
    },
    {
      "id": "5",
      "type": "men",
      "liked": true,
      "cuisine": "Americain",
      "img": "../../images/jeans.png",
      "price": 5,
    },
  ];

  likeAndUnlike(id) {
    items.forEach((item) {
      if (item['id'] == id) {
        item['liked'] = !item['liked'];
      }
    });
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (BuildContext context) => locator<ItemList>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: OrdersUI(),
      ),
    );
  }
}

class LikedProduct extends StatelessWidget {
  final productDetails;

  LikedProduct({this.productDetails});

  @override
  Widget build(BuildContext context) {
    print("productDetails ${productDetails["id"]}");
    final size = MediaQuery.of(context).size;
    print("insideLikedProject");

    return Padding(
        padding: EdgeInsets.only(bottom: 22),
        child: GestureDetector(
          onTap: () {
            print("CLICKED!");
          },
          child: Container(
            height: size.height * 0.15,
            width: size.width * 0.9,
            child: Row(
              children: <Widget>[
                Hero(
                  transitionOnUserGestures: true,
                  tag: productDetails['id'],
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(12),
                    child: Image.asset(
                      productDetails['img'],
                      width: size.width * 0.35,
                      height: size.height * 0.15,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                SizedBox(
                  width: 8,
                ),
                SizedBox(
                  height: size.height * 0.13,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(
                        productDetails['type'],
                        //style: style.headerStyle3,
                      ),
                      Text(
                        productDetails['price'].toString() + " OMR",
                        /*style: style.textTheme
                        .copyWith(color: Theme.of(context).primaryColor),*/
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ));
  }
}

class OrdersUI extends StatefulWidget {
  @override
  _OrdersUIState createState() => _OrdersUIState();
}

class _OrdersUIState extends State<OrdersUI> {
  final totalCost = 0;
  final jeansPrice = 0;
  final jeansCounter = 0;
  final standardDeliveryCost = 5;
  final expressDeliveryCost = 15;

  void _changeTotalPrice() {
    setState(() {});
  }

  final productDetails;

  _OrdersUIState({this.productDetails});

  @override
  Widget build(BuildContext context) {
    final data = MediaQuery.of(context);
    final size = MediaQuery.of(context).size;

    return Scaffold(
        appBar: AppBar(
          title: Align(
              alignment: Alignment.center,
              child: Text(
                'Title',
                style: TextStyle(color: Colors.black),
              )),
          actions: <Widget>[],
          backgroundColor: Colors.white,
        ),
        body: Container(
            width: data.size.width,
            //height: data.size.height * 0.05,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Align(
                      alignment: Alignment.topCenter,
                      child: Container(
                          color: Color.fromARGB(255, 81, 202, 238),
                          height: data.size.height * 0.05,
                          width: data.size.width,
                          alignment: Alignment.topCenter,
                          child: Align(
                              alignment: Alignment.center,
                              child: Text(
                                'Total : ${totalCost.toString()} OMR',
                              ))),
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 12, vertical: 12),
                  child: Column(
                    children: <Widget>[
                      Consumer<ItemList>(
                        builder: (context, model, child) {
                          print("Inside Builder"); // doesn't get executed
                          return Container(
                            height: 500,
                            child: ListView.builder(
                              physics: ScrollPhysics(
                                  parent: BouncingScrollPhysics()),
                              shrinkWrap: true,
                              itemCount: model.items.length,
                              itemBuilder: (context, index) {
                                print(model.items[index]["type"].toString());
                                print(
                                    'Inside Item Builder'); // doesn't get executed
                                return Container(
                                  height: 200,
                                  width: 300,
                                  child: LikedProduct(
                                    productDetails: model.items[index],
                                  ),
                                );
                              },
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        //margin: const EdgeInsets.only(left: 50.0, right: 50.0),
                        child: Divider(
                          height: 1,
                          thickness: 1,
                          color: Colors.grey.shade700,
                        ),
                      ),
                    )
                  ],
                ),
              ],
            )));
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Answered By – chunhunghan

Answer Checked By – Robin (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.