Flutter GridView.builder how to update

问题

I am trying to build an Flutter App with a GriView of cards and I want to add a new Card every time I hit the floatingActionButton. But how to update my view? I know the items are added to my list, but the GridView doesn't show the change.

  List<Widget> cardsList = [];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('Team Kitty'),
      ),
      body: GridView.builder(
          itemCount: cardsList.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int index) {
            return Container(child: cardsList[index]);
          }),
      floatingActionButton: new FloatingActionButton(
        onPressed: addCard(),
        tooltip: 'Add Card',
        child: new Icon(Icons.add),
      ),
    );
  }
  addCard() {
    setState(() {
      cardsList.add(_RobotCard());
    });
  }
}

I find it hard to find good Grid documentation, maybe someone has a hint?

Thx Guys

回答1:

You invoke addCard method while your widget is built instead of passing method's reference as onPressed parameter:

floatingActionButton: new FloatingActionButton(
  onPressed: addCard, // pass method reference here
  tooltip: 'Add Card',
  child: new Icon(Icons.add),
)

回答2:

Its too late to answer, but this might help someone who came here finding solution to similar problem .

The problem with this is , list will be updated with values , but builder doesn't rebuild the list immediately which is in visible region of the screen. If suppose you have a long list of cards , and if you add a new item to this list, then it wont be rebuild immediately . To see the change ,keep scrolling down the list and then come back up , then you can see that the builder has rebuild the list. Hence to solve this issue after not finding any relevant answers, I tried this ,May be it might not be the best solution but it works . The approach is, if you have a list

List CardList =List();

and it initially has 5 items. So builder would have build 5 cards on the screen. Then , if a new 6th item is added , then even if you do

setState((){ 
  CardList.add(newItem);
})

Builder won't rebuild immediately . To solve this, use a variable of type Widget, and initialize with empty Text .

Widget WidgetToBeShownInBody = Text("");

Use this under scaffold , as shown :

@override Widget build(BuildContext context) {
return new Scaffold(
  appBar: AppBar(
    title: Text('Team Kitty'),
  ),
  body: WidgetToBeShownInBody,

  floatingActionButton: new FloatingActionButton(
    onPressed: addCard(),
    tooltip: 'Add Card',
    child: new Icon(Icons.add),
  ),
);}

And Modify the onPressed function as this, So, on every press of the button, empty text is shown in the scaffold for few milliseconds(which is negligible and goes unnoticed) and then the updated list of cards is shown on the screen.

addCard() {
  //Show Empty Widget for few milliseconds
  setState(() {
    WidgetToBeShownInBody=Text("");
  });
  //update the list with new Item.
  cardList.add(SomeNewItem);
  //after some milliseconds ,
  //use setState to update the variable to list of cards returned by GridViewBuilder
  Timer(Duration(milliseconds: 50), () {
    setState(() {
      WidgetToBeShownInBody=GridView.builder(
          itemCount: cardsList.length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int index) {
            return Container(child: cardsList[index]);
          });
    });

  });
}

The above code is kind of fooling the build function , that now UI only has a simple empty text. But after few milliseconds , UI is rebuild-ed, as the setState updates the new value of variable "WidgetToBeShownInBody" with list of cards. When a new item is added, show a empty widget instead of the builder for few milliseconds , and then after some millisecond delay , send the builder list with 6 items. Hence builder rebuilds the UI with 6 items and "WidgetToBeShownInBody" is updated with new list of cards.

Hope this is clear and useful!! If someone finds a proper solution for this , please do update . Thanks!

来源：https://stackoverflow.com/questions/52515456/flutter-gridview-builder-how-to-update

标签

android

dart

Flutter