android – Issues using GridViews in Column in simple Flutter application-ThrowExceptions

Exception or error:

I’ve recently started to learn flutter and am therefore building a didactic application i call “Basketly”.

The MainView. As you can see i got a simple structure: an Appbar followed by a Column that wraps GridView "Einkaufswagen" followed by GridView "Produkte"

the UIs structure is pretty simple:

     @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Basketly - dein Einkauf'),
          actions: <Widget>[
            new FlatButton.icon(
              label: new Text("Einstellungen"),
              onPressed: () {
                /*nav to settings */
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => SettingsView()));
              },
              icon: new Icon(Icons.settings),
            ),
          ],
        ),
        body: new Column(
          mainAxisSize: MainAxisSize.max,
            children: <Widget>[
          new Text(
            "Einkaufswagen",
            style: new TextStyle(
                fontSize: 12.0,
                color: Colors.amber,
                fontWeight: FontWeight.w600,
                fontFamily: "Roboto"),
          ),

          Expanded(
            child: new GridView.count(
                crossAxisCount: 6,
                children: this.widget.basketItems,
              ),
          ),

          new Divider(color: Colors.grey),
          new Text(
            "Produkte",
            style: new TextStyle(
                fontSize: 12.0,
                color: Colors.amber,
                fontWeight: FontWeight.w600,
                fontFamily: "Roboto"),
          ),

      new GridView.count(
                crossAxisCount: 6,
                children: this.widget.allItems,
                shrinkWrap: true),


          new Divider(color: Colors.grey),

          //TODO here we input some expandeable gridviews or something

          new MetaProdCategory("Reinigungsmittel"),
          new MetaProdCategory("Getränke"),
          new MetaProdCategory("Obst"),
          new MetaProdCategory("Milch & Käse"),
          new MetaProdCategory("Gemüse"),


          new Row( children: <Widget>[
            new Switch(onChanged: switchChanged, value: false),
            new Text("Vegan"),
            new Switch(onChanged: switchChanged, value: false),
            new Text(
              "Bio",
            ),
            new Switch(onChanged: switchChanged, value: false),
            new Text(
              "Regional",
            ),
            new Switch(onChanged: switchChanged, value: false),
            new Text(
              "Fair",
            ),
          ]),
        ]));

My desired functionality is like described in the image: if you tap on one of the Icons (ProdCategory) in “Produkte” it is removed from “Produkte” and added to “Einkaufswagen” and vice-versa. It should server as simple shopping-list.

I therefore implemented:

  List<ProdCategory> basketItems; // the items currently in the basket
  List<ProdCategory> allItems; // all Items

…which serve as the datastructures keeping the ProdCategory Items.

and callbacks to add/remove them from the lists:

  // updates the current basket by adding a productCategory to it
  // (and removing from allItems)
  addToBasket(ProdCategory prod) {
    setState(() {
      log("addToBasket called");
      prod.upOrDown = !prod.upOrDown;
      this.widget.basketItems.add(prod);
      this.widget.allItems.remove(prod);
    });

..including some logging, to make sure everything works as expected:

log("---------basketItems:");
this.widget.basketItems.forEach((element) {
  log(element.stringify());
});
log("----------allItems:");
this.widget.allItems.forEach((element) {
  log(element.stringify());
});

now to the problem!

when i tab one of the ProdCategories (Brot in this case), according to log everything is working as expected:

[log] you tapped on Brot
[log] addToBasket called
[log] ---------basketItems:
[log] Brot true
[log] ----------allItems:
[log] Bier false
[log] Senf false
[log] Lauch false
[log] Steak false
[log] Bergkäse false
[log] Mehl false
[log] Kürbis false
[log] Oliven false
[log] Pfeffer false

as you can see, Brot now resides in basketItems and was removed from allItems – just as expected.

…But somehow, the UI doesnt show Brot in Einkaufswagen GridView.

I have no idea what i am doing wrong and are working on this problems since some hours without success.
It seems there are quite a lot of bugs in Flutter around GridView, especially when used in Column — but i suspect there has to be a proper solution for the usability i require?

Here is the whole source.

How to solve:

How about this?

new GridView.builder(
    itemBuilder: (BuildContext context, int index) {
      return this.widget.basketItems[index];
    },
    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2,
    ),
    itemCount: this.widget.basketItems.length,
    shrinkWrap: true),

and

new GridView.builder(
    itemBuilder: (BuildContext context, int index) {
      return this.widget.allItems[index];
    },
    gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 6,
    ),
    itemCount: this.widget.allItems.length,
    shrinkWrap: true),

Leave a Reply

Your email address will not be published. Required fields are marked *