Adding GridTiles to List<Widget> dynamically

Question

I have a list of players and I want to render this list to GridTile Buttons. How can I do this? I already tried doing a function that returns GridTiles as a list, but could not get it to work. I've already read something about maps.

My approach is, to have buttons which contain the name and the number of the player. (Player is a class i've created)

This is my example atm:

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    List<Player> players = new List<Player>();
    players.add(new Player("Tom", 10, "test"));
    players.add(new Player("Mike", 22, "test"));
    players.add(new Player("John", 33, "test"));

    List<Widget> list = new List<Widget>();
    list.add(new Text("Test"));
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Players'),
      ),
      body: new GridView.count(
        crossAxisCount: 4,
        children: new List<Widget>.generate(16, (index) {
          return new GridTile(
            child: new Card(
                color: Colors.blue.shade200,
                child: new Center(
                  child: new Text('tile $index'),
                )
            ),
          );
        }),
      ),
    );
  }
}

hi tom, can you please clarify what are you actually trying to achieve? and what is the issue you are facing. — Vicky Salunkhe
– Vicky Salunkhe, Commented Apr 6, 2019 at 11:55
I wanna render the list players as buttons. Foreach player in players there has to be a button. But I don't know how to do this — Tom Marienfeld
– Tom Marienfeld, Commented Apr 6, 2019 at 12:03

Vicky Salunkhe · Accepted Answer · 2019-04-06 13:33:50Z

Try this

class Players{
  int id;
  String name;
  Players({this.id,this.name});
  //Getters
  String get getName => name;
  int get getID => id;
}

class DemoPageGridTile extends StatelessWidget {

   List<Players> _listData = new List<Players>();

 DemoPageGridTile(){
   _generateList();
 }

  _generateList(){
    for(int i=0; i<45; i++){
      _listData.add(Players(id: i+1, name: "xyz_$i"));
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridTile example"),
      ),
      body: GridView.builder(
       gridDelegate:  new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      itemBuilder: (BuildContext context, int index) {
           return Container(
             margin: EdgeInsets.all(4.0),
             child: RaisedButton(
              onPressed: (){ print(_listData[index].id.toString()); },
              child: Text(_listData[index].getName),
            ),
           );
      },
        itemCount: _listData.length,
      ),
    );
  }
}

Collectives™ on Stack Overflow

Adding GridTiles to List<Widget> dynamically

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