Flutter - как получить значение TextField и отобразить его как новый текст

Question

Я пытаюсь получить значение, которое пользователь вводит в TextFormField, а затем отобразить его как новое сообщение. Теперь я могу получить значение с помощью контроллера и отобразить его, проблема в том, что мне нужно отобразить все сообщения, которые вводит пользователь, и расположить их друг над другом (как мессенджер).

Это сам FormField, я понимаю, что мне нужно сохранить значение, которое вводит пользователь, а затем создать из него сообщение, отправив его куда-нибудь еще, но я не знаю, как это сделать. (Вероятно, пустота, которая так или иначе сделает это?)

final chatfield = TextFormField(
  controller: myController,
  style: TextStyle(
    decorationColor: Colors.white,
    color: Colors.white,
  ),
  autofocus: false,
  onSaved: (String value) {
  },
  decoration: InputDecoration(
    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
    hintStyle: TextStyle(color: Colors.white),
  ),
);

Единственное, что сейчас делает контроллер - это получить значение и отобразить его, я хотел бы сохранить и отобразить все значения, которые пользователь вводит в TextFormField.

Answer 1

Здесь у вас есть базовый пример, вы можете использовать StatefulWidget, StreamBuilder, FutureBuilder и т. Д.

      class ChatListSample extends StatefulWidget {
        @override
        ChatListSampleState createState() {
          return new ChatListSampleState();
        }
      }

      class ChatListSampleState extends State<ChatListSample> {
        TextEditingController myController = TextEditingController();

        List<String> messages = List();

        @override
        Widget build(BuildContext context) {
          final chatfield = TextFormField(
            controller: myController,
            style: TextStyle(
              decorationColor: Colors.white,
              color: Colors.white,
            ),
            autofocus: false,
            onSaved: (String value) {},
            decoration: InputDecoration(
              contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
              border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
              hintStyle: TextStyle(color: Colors.white),
            ),
          );

          return Scaffold(
              backgroundColor: Colors.purple,
              body: Stack(
                children: <Widget>[
                  Padding(
                    padding:
                        const EdgeInsets.only(left: 20.0, right: 20, bottom: 100),
                    child: ListView.builder(
                      itemCount: messages.length,
                      itemBuilder: (context, index) {
                        return ListTile(
                          title: Text(messages[index]),
                        );
                      },
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        chatfield,
                        MaterialButton(
                          child: Text("send message"),
                          onPressed: () {
                            setState(() {
                              messages.add(myController.text);
                              myController.clear();
                            });
                          },
                        )
                      ],
                    ),
                  )
                ],
              ));
        }
      }