flutter - How to use a ListView.builder to output a widget when a form is submitted

Question

Hi I have a text form field and when the form is filled I want to output the values on multiple pages with the listview.builder currently I can output the data’s in a single container and when I’d fill the form again it doesn’t add another container it just updates the current container’s values If anyone knows how to do it please help

标签： flutterdartflutter-layout

Answer 1

A complete example:

Source:

import 'package:flutter/material.dart';

class Demo extends StatefulWidget {
  @override
  _DemoState createState() => new _DemoState();
}

class _DemoState extends State<Demo> {
  List<String> _items = new List(); // to store comments

  final myController = TextEditingController();

  void _addComment() {
    if (myController.text.isNotEmpty) {
      // check if the comments text input is not empty
      setState(() {
        _items.add(myController.text); // add new commnet to the existing list
      });

      myController.clear(); // clear the text from the input
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text("DEMO")),
        body: Container(
            padding: EdgeInsets.all(15),
            child: Column(children: [
              Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Expanded(
                        child: TextField(
                      style: TextStyle(color: Colors.black),
                      controller: myController,
                      maxLines: 5,
                      keyboardType: TextInputType.multiline,
                    )),
                    SizedBox(width: 15),
                    InkWell(
                        onTap: () {
                          _addComment();
                        },
                        child: Icon(Icons.send))
                  ]),
              SizedBox(height: 10),
              Expanded(
                  child: ListView.builder(
                      itemCount: _items.length,
                      itemBuilder: (BuildContext ctxt, int index) {
                        return Padding(
                            padding: EdgeInsets.all(10),
                            child: Text("${(index + 1)}. " + _items[index]));
                      }))
            ])));
  }
}