Adding an Icon to a List using a button and actively updating UI using Provider state management

Question

I want to add an Icon to a List following UI update using flutter Provider state Management. I was successful to add an Icon using the floating button and confirm the result by printing the new List length. This ensures the addition of an Icon to a List but it does not update the UI for the new added Icon. Snippets are below

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

class _MedicalCosmeticsDetailsPageState
    extends State<MedicalCosmeticsDetailsPage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return ChangeNotifierProvider<GridIcons>(
      create: (context) => GridIcons(),
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: true,
            iconTheme: IconThemeData(color: Colors.purple),
            title: Text(
              'xyz',
              style: TextStyle(color: Colors.purple),
            ),
            backgroundColor: Colors.transparent,
            elevation: size.width * 0.05,
            actions: [
              Padding(
                padding: EdgeInsets.only(right: size.width * 0.01),
                child: IconButton(
                  icon: Icon(
                    Icons.search,
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
          body: GridViewPage(),
          floatingActionButton: Consumer<GridIcons>(
            builder: (context, myIcons, _) {
              return FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: () {
                  print(myIcons.iconList.length);
                  myIcons.addIcon();
                },
              );
            },
          ),
        ),
      ),
    );
  }
}
```//floating button for adding an ICON

```class GridIcons with ChangeNotifier {
  List<IconData> iconList = [
    Icons.ac_unit,
    Icons.search,
    Icons.arrow_back,
    Icons.hdr_on_sharp,
  ];

  addIcon<IconData>() {
    iconList.add(Icons.sentiment_dissatisfied);
    notifyListeners();
  }

  getIconList<IconData>() {
    return iconList;
  }
}
```//Function for icon addition

class GridViewPage extends StatelessWidget { @override Widget build(BuildContext context) { List _iconList = GridIcons().getIconList();

return ChangeNotifierProvider<GridIcons>(
  create: (context) => GridIcons(),
  child: Consumer<GridIcons>(
    builder: (context, myIcon, child) {
      return GridView.builder(
        itemCount: _iconList.length,
        padding: EdgeInsets.all(8.0),
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 250.0),
        itemBuilder: (BuildContext context, int index) {
          print('_buildGridViewBuilder $index');
          return Card(
            color: Colors.purple.shade300,
            margin: EdgeInsets.all(8.0),
            child: InkWell(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    _iconList[index],
                    size: 48.0,
                    color: Colors.purple.shade100,
                  ),
                  Divider(),
                  Text(
                    'Index $index',
                    textAlign: TextAlign.center,
                    style: GoogleFonts.dmSans(
                      fontSize: 16,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
              onTap: () {
                print('Row: $index');
              },
            ),
          );
        },
      );
    },
  ),
);

} }


The icon doesn't appear in the UI although an icon is added to the Icon List.

chunhunghan · Accepted Answer · 2020-12-07 06:37:39Z

You can copy paste run full code below
Step 1: In GridViewPage, you do not need ChangeNotifierProvider
Step 2: remove List _iconList = GridIcons().getIconList();
Step 3: use myIcon.iconList.length and myIcon.iconList[index]
code snippet

class GridViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //List _iconList = GridIcons().getIconList();

    return Consumer<GridIcons>(
      builder: (context, myIcon, child) {
        return GridView.builder(
          itemCount: myIcon.iconList.length,
     ...
     Icon(
         myIcon.iconList[index],
         size: 48.0,

working demo

full code

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

class MedicalCosmeticsDetailsPage extends StatefulWidget {
  @override
  _MedicalCosmeticsDetailsPageState createState() =>
      _MedicalCosmeticsDetailsPageState();
}

class _MedicalCosmeticsDetailsPageState
    extends State<MedicalCosmeticsDetailsPage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return ChangeNotifierProvider<GridIcons>(
      create: (context) => GridIcons(),
      child: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: true,
            iconTheme: IconThemeData(color: Colors.purple),
            title: Text(
              'xyz',
              style: TextStyle(color: Colors.purple),
            ),
            backgroundColor: Colors.transparent,
            elevation: size.width * 0.05,
            actions: [
              Padding(
                padding: EdgeInsets.only(right: size.width * 0.01),
                child: IconButton(
                  icon: Icon(
                    Icons.search,
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
          body: GridViewPage(),
          floatingActionButton: Consumer<GridIcons>(
            builder: (context, myIcons, _) {
              return FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: () {
                  print(myIcons.iconList.length);
                  myIcons.addIcon();
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

class GridIcons with ChangeNotifier {
  List<IconData> iconList = [
    Icons.ac_unit,
    Icons.search,
    Icons.arrow_back,
    Icons.hdr_on_sharp,
  ];

  addIcon<IconData>() {
    iconList.add(Icons.sentiment_dissatisfied);
    notifyListeners();
  }

  getIconList<IconData>() {
    return iconList;
  }
}

class GridViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //List _iconList = GridIcons().getIconList();

    return Consumer<GridIcons>(
      builder: (context, myIcon, child) {
        return GridView.builder(
          itemCount: myIcon.iconList.length,
          padding: EdgeInsets.all(8.0),
          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
              maxCrossAxisExtent: 250.0),
          itemBuilder: (BuildContext context, int index) {
            print('_buildGridViewBuilder $index');
            return Card(
              color: Colors.purple.shade300,
              margin: EdgeInsets.all(8.0),
              child: InkWell(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      myIcon.iconList[index],
                      size: 48.0,
                      color: Colors.purple.shade100,
                    ),
                    Divider(),
                    Text(
                      'Index $index',
                      textAlign: TextAlign.center,
                      style: GoogleFonts.dmSans(
                        fontSize: 16,
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
                onTap: () {
                  print('Row: $index');
                },
              ),
            );
          },
        );
      },
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MedicalCosmeticsDetailsPage());
  }
}

Collectives™ on Stack Overflow

Adding an Icon to a List using a button and actively updating UI using Provider state management

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related