Flutter: How can i put Textfield input into a list to build a ListView.builder

Question

Im trying to build a listviewbuilder since a few days. For that i need the textfield input from another screen. I looked a lot of tutorials and question but it doesnt work.Im trying to put the input from multiple textfields into multiple lists to build a Listview builder. It would be the best if i can save all Textfield input when i press on flatbutton. I hope someone can help me.

First page

List<String> time = ["8:00"];List<String> 
List<String> where = ["Am See"];
List<String> who = ["Eric"];
List<String> when = ["Donnerstag 21.4.21"];






body: SingleChildScrollView(
            physics: ScrollPhysics(),
            child: Column(children: [
              Upperscreen(size: size),
              ListView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  shrinkWrap: true,
                  itemCount: where.length,
                  itemBuilder: (BuildContext context, int Index) {
                    return Column(children: [
                      SizedBox(
                        height: 40,
                      ),
                      Container(
                          child: GestureDetector(
                              onTap: () {
                                Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => Meet1()));
                              },
                              child: Container(
                                  width: size.width * 0.9,
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(70)),
                                    gradient: LinearGradient(
                                      begin: Alignment.topRight,
                                      end: Alignment.bottomRight,
                                      colors: [
                                        Colors.green,
                                        Colors.orange,
                                      ],
                                    ),
                                  ),
                                  child: Column(children: <Widget>[
                                    SizedBox(
                                      height: 10,
                                    ),
                                    Padding(
                                      padding: EdgeInsets.all(20),
                                      child: Column(
                                        children: <Widget>[
                                          Text(
                                            time[Index],
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 40,
                                                fontWeight:
                                                    FontWeight.bold),
                                          ),
                                          SizedBox(
                                            height: 10,
                                          ),
                                          Text(
                                            who[Index],
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 20,
                                                fontWeight:
                                                    FontWeight.bold),
                                          ),
                                          Text(
                                            when[Index],
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 20,
                                                fontWeight:
                                                    FontWeight.bold),
                                          ),
                                          Text(
                                            where[Index],
                                            style: TextStyle(
                                                color: Colors.white,
                                                fontSize: 20,
                                                fontWeight:
                                                    FontWeight.bold),

Second page

child: Column(children: <Widget>[
      SizedBox(
        height: 10,
      ),
      Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(decoration: InputDecoration(hintText: " Time ")),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(hintText: " Who "),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(hintText: " Date "),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(hintText: " Where "),
            ),
            SizedBox(height: 10)
          ],
        ),
      ),
    ]));

Here the Flatbutton to add all.

return FlatButton(
  child: Icon(
    Icons.check_circle_outline_rounded,
    color: Colors.green,
    size: 120,
  ),
  onPressed: () {
    Navigator.of(context).popUntil((route) => route.isFirst);
  },

You have to use controllers for TextFields to get the value of the TextField then you have to pass the value as a parameter if you want to use them in the next page — Sal Man, Mar 09 '21 at 12:37

score 0 · Accepted Answer · answered Mar 09 '21 at 16:23

Use a TextEditingController(), just like this -

TextEditingController() myController = TextEditingController();

Then assign this controller to controller property in TextField() -

TextField(
  controller: myController,
),

Then use myController.text to retrieve the text from TextField(), and pass it to other pages as a String parameter -

Example -

class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //....
      body: FlatButton(
        child: Icon(
        Icons.check_circle_outline_rounded,
        color: Colors.green,
        size: 120,
        ),
        onPressed: () {
            Navigator.push(context, MaterialPageRoute(builder: (builder) {
                 return Screen2(text: myController.text);
            }));
         },
      //....
     ),
    );
  }
}

Second Page -

class Screen2 extends StatelessWidget {
  
  String text;
  Screen2({this.text});
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //....
      body: Text(text),
    );
  }
}

Go to this link to see another example

Now, here I used only 1 parameter "text". You can use multiple parameters like - "text1", "text2", "text3" and so on, as per your requirement, and use as many TextEditingController() for this.

*****Also Note that use of FlatButton() is depreciated, you can use a TextButton() instead

Thank you very much you for your help. It works, but can you please tell me too, how to put the strings into lists, that my listview.builder can use them. — Eric Philippi, Mar 10 '21 at 10:04
@EricPhilippi First make a list like - List list = []; Then insert a value in it using a function or any oher method by using list.add("Hey"). Then use it in ListView.builder. I am also pasting a link for your reference - https://api.dart.dev/stable/2.10.5/dart-core/List-class.html And if you like my answer and it worked, do upvote my answer and mark it as accepted answer too. And if this comment is usefull, then upvote it too. — Shreyansh Sharma, Mar 11 '21 at 03:53

Flutter: How can i put Textfield input into a list to build a ListView.builder

1 Answers1