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

Issue

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);
  },

Solution

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

Answered By – Shreyansh Sharma

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)