How to create buttons with for loop in a column in Flutter?

Issue

I need to implement lists of buttons in a column depending on the data entry. So, for that I have to use for loop. Each button requires two entires id, text. I can make it with List. But it accepts only string value not the integer.

This is the code I tried.

code

Widget getTextWidgets(List<String> strings)
  {
    List<Widget> list = new List<Widget>();
    for(var i = 0; i < strings.length; i++){
        list.add(new ButtonForHome(
          lable: strings[i],
          onPressed: (){},
          ));
    }
    return new Column(children: list);
  }

I want to put id in onPressed event. How can I implement in the Flutter?

Solution

Nilesh Rathod has indeed given the descriptive answer for the same. In flutter there is also, a way to achieve this, which is quite similar to POJO class, is

  • To create own widget and specify the fields needs to be passed when we are using the widget
  • Add the widget to the list, with the data specified for passing
  • You can track, the id, by pressing itself also

I can clearly see that, you have created your own widget named as ButtonForHome, which takes in label for now. What you can do is, to make your widget takes in two argument, and you can do it like this:

class ButtonForHome extends StatelessWidget {
  final String label;
  final int id;  // this will save your day

  // @required will not let user to skip the specified key to be left null
  ButtonForHome({@required this.label, @required this.id});

  @override
  Widget build(BuildContext context) {
    return Container(
       child: Center(
        child: RaisedButton(
            color: Colors.blue,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(18.0),
            ),
            child: Text(this.label),
            onPressed: () => print(this.id) // Here you print your id using your button only
        )
    );
  }
}

Now creating your button with a list, or adding via list

  • You can do it via ListView.builder()
  • You can do it via your way, i.e., List<Widget>.add()

I am gonna show the solution in your way only:

Widget getTextWidgets(List<String> strings){
  List<Widget> list = new List<Widget>();

  for(var i = 0; i < strings.length; i++){
    list.add(ButtonForHome(
      id: i, // passing the i value only, for clear int values
      label: strings[i]
    ));
  }

  return Column(children: list);
}

With the new flutter in place, you don’t need to do new every time while defining a widget. It understands now, so no need of const, new at all

So, wherever you populate your getTextWidget, it will show up the Widgte ButtonForHome, which has unique id, and label. Now the ButtonForHome, prints the id of that particular widget which was passed uniquely. So now, you can see your result happening.

I hope this is what you were looking for. Try it, and let me know.

Answered By – Alok

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.