Flutter: Create button for each item in a list of strings (Dart)

Question

I have a list of Strings (called namesList). For each String inside the list I want to create a button with one of the names.

As you can see in the code below, I have tried to make use of the for loop. However, when playing the code I can only see the first Button with the text "Anna".

 import 'package:flutter/material.dart';
 class ButtonsWithName extends StatefulWidget{
 @override
   State<StatefulWidget> createState() {
   // TODO: implement createState
   return _ButtonsWithNameState();
   }
 }

 class _ButtonsWithNameState extends State<ButtonsWithName> {
   String name1;
   String name2; 
   String name3;
   String name4;
   String name5;
   var namesList = new List<String>();


 @override
 void initState() {
 name1 = 'Anna';
 name2 = 'Bernd';
 name3 = 'Christina';
 name4 = 'David';
 name5 = 'Elena',
 namesList.add(name1);
 namesList.add(name2);
 namesList.add(name3);
 namesList.add(name4);
 namesList.add(name5);

 super.initState();
 }


Widget _buildButtonsWithNames() {
 for(int i=0; i < namesList.length; i++){
  RaisedButton(child: Text(answerList[0]));
}
return RaisedButton[i];
}


 @override
 Widget build(BuildContext context) {
 return Scaffold(
   body: Wrap(children: <Widget>[
    _buildButtonsWithNames();
   ]);
 )
 }
}

I expect to have 5 RaisedButtons in the end with the texts of the String-list, namely a button with the text "Anna", a button with the text "Bernd", and so and so forth. I would really I appreciate anyone's help on this matter!

Moujabr · Accepted Answer · 2019-05-12 17:57:52Z

6

The result you got is normal, because your _buildButtonsWithNames() list return just one button, instead of list of buttons. So the solution is to create this list, fill it and then return it. See below how it should be:

import 'package:flutter/material.dart';

class ButtonsWithName extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _ButtonsWithNameState();
  }
}

class _ButtonsWithNameState extends State<ButtonsWithName> {
  String name1;
  String name2;
  String name3;
  String name4;
  String name5;
  var namesList = new List<String>();
  List<RaisedButton> buttonsList = new List<RaisedButton>();

  @override
  void initState() {
    super.initState();
    name1 = 'Anna';
    name2 = 'Bernd';
    name3 = 'Christina';
    name4 = 'David';
    name5 = 'Elena';
    namesList.add(name1);
    namesList.add(name2);
    namesList.add(name3);
    namesList.add(name4);
    namesList.add(name5);
  }

  List<Widget> _buildButtonsWithNames() {
    for (int i = 0; i < namesList.length; i++) {
      buttonsList
          .add(new RaisedButton(onPressed: null, child: Text(namesList[i])));
    }
    return buttonsList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Wrap(children: _buildButtonsWithNames()));
  }
}

answered May 12, 2019 at 17:57

Moujabr

5571 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WeAreThePeople Over a year ago

Great that actually worked perfectly! Thank you so much :) Just one question: Why do I have to type here: Wrap(children: ) instead of Wrap(children: <Widget> [],)?

Moujabr Over a year ago

Because _buildButtonsWithNames() return a list of widget, 5 RaisedButton, and not just a single one. When you write this children: <Widget> [], it expects Widget type between brackets, so if you have already a list of Widget it will not accept it, for that we give it directly to children which it expects a List<Widget> type.

WeAreThePeople Over a year ago

Awesome! That is such a great answer. Understood it perfectly. Thank you so much again! :)

Sergei Sevriugin · Accepted Answer · 2021-02-02 07:43:12Z

This works for me, thanks to previous answer with some improvements:

    import 'package:flutter/material.dart';
import 'package:audioplayers/audio_cache.dart';

void main() => runApp(XylophoneApp());

class XylophoneApp extends StatelessWidget {
  final player = AudioCache();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            child: PlaySoundButtons()
          ),
        ),
      ),
    );
  }
}

class PlaySoundButtons extends StatefulWidget {
  @override
  _PlaySoundButtonsState createState() => _PlaySoundButtonsState();
}

class _PlaySoundButtonsState extends State<PlaySoundButtons> {
  List<String> soundNames = [
    'note1.wav',
    'note2.wav',
    'note3.wav',
    'note4.wav',
    'note5.wav',
    'note6.wav',
    'note7.wav',
  ];
  List<FlatButton> buttonsList = [];

  final player = AudioCache();

  @override
  void initState() {
    super.initState();
    for (int i = 0; i <  soundNames.length; i++) {
      buttonsList.add(new FlatButton(onPressed: () {
        player.play(soundNames[i]);
      }, child: Text(soundNames[i])));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(children: buttonsList);
  }
}

Collectives™ on Stack Overflow

Flutter: Create button for each item in a list of strings (Dart)

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related