How to add custom widget when button is pressed

Question

I used a couple other threads to create an app where you type in some text in a textfield and when you press the button a default container is added to a list with the text in one of the fields. However when I type the text and add the widget the text is changed for all entries instead of just for the one that was added. This is my code:

    import 'dart:core';
    import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int count = 0;
  TextEditingController noteSend = TextEditingController();

  @override
  Widget build(BuildContext context) {
    List<Widget> children = new List.generate(
        count,
        (int i) => new InputWidget(
              i,
              noteRec: noteSend.text,
            ));

    return new Scaffold(
        appBar: new AppBar(title: new Text('some title')),
        body: Column(
          children: <Widget>[
            Container(
              child: TextField(
                controller: noteSend,
              ),
              color: Colors.lightBlueAccent,
              width: 150,
              height: 50,
            ),
            Expanded(
              child: ListView(
                children: children,
                scrollDirection: Axis.vertical,
              ),
            ),
          ],
        ),
        floatingActionButton: new FloatingActionButton(
          child: new Icon(Icons.add),
          onPressed: () {
            setState(() {
              count = count + 1;
            });
          },
        ));
  }
}

class InputWidget extends StatefulWidget {
  final int index;
  final String noteRec;
  InputWidget(this.index, {Key key, this.noteRec}) : super(key: key);

  @override
  _InputWidgetState createState() => _InputWidgetState();
}

class _InputWidgetState extends State<InputWidget> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Row(
        children: <Widget>[
          Column(
            children: <Widget>[
              Icon(
                Icons.image,
                size: 75,
              )
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 80, right: 30),
            child: Column(
              children: <Widget>[
                Text('Note'),
              ],
            ),
          ),
          Column(
            children: <Widget>[
              Text("${widget.noteRec}"),
            ],
          ),
        ],
      ),
    );
  }
}

How can I make the Text different with every entry?

Answer 1

List<Widget> children = new List.generate(
    count,
    (int i) => new InputWidget(
          i,
          noteRec: noteSend.text,
        ));

In this code, you set the input text for all the elements in children. It's the reason all the entries are changed to the same text. You can save the text to a list of the string when you press the save button and call it in List.generate:

List<Widget> children = new List.generate(
    count,
    (int i) => new InputWidget(
          i,
          noteRec: listString[i],
        ));

Answer 2

Try this code

Container(
            height: 200,
            child: Column(
              children: <Widget>[
                Expanded(
                  child: buildGridView(),
                )
              ],
            ),
          ),

Then call the buildGridView that will return Widgets

Widget buildGridView() {
        return Text('text here'); // your future widget
  }