Make textfield move when adding items in listview

Question

My question is as follows: When placing the employee id and clicking add, enter the employee id and name in the list, as in the photo:

When adding, the contributor overwrites the textfield... I’m trying to keep the text field below the last item on the list.

It is a simple listview and a simple textfield. It follows the code

ListView.builder(
   scrollDirection: Axis.vertical,
   shrinkWrap: true,
   itemCount: listaUsers.length,
   itemBuilder: (context, index) {
      return ListTile(
         dense: true,
         title: Row(
            children: <Widget>[
               Text(
                  listaUsers[index]
                  .id
                  .toString(),
                  style: TextStyle(color: Colors.black, fontSize: 13),
               ),
               Text(" - "),
               Text(
                  listaUsers[index].name,
                  style: TextStyle(color: Colors.black, fontSize: 13),
               ),               
            ],
         ),
         onTap: () => _onTapped(user),
         trailing: IconButton(
            icon: Icon(Icons.remove),
            onPressed: () {},
         )
      ); 
   }),
   Padding(
      padding: EdgeInsets.only(left: 10),
      child: Container(
         padding: EdgeInsets.only(left: 15, right: 15),
         child: Row(children: <Widget>[
            Expanded(
               child: TextField(
                  controller: addColaborador,
                  decoration: InputDecoration(
                     hintText: "ID COLABORADOR",
                     contentPadding: EdgeInsets.only(bottom: 0),
                     labelStyle: TextStyle(color: Colors.blueAccent)
                  ),
               ),
            ),
            IconButton(
               icon: Icon(Icons.add),
               onPressed: () {
                  _buscarId();
               },
            )
         ]
      )
   )
)  

Answer 1

You could add the Textfield below Listview.Built into a Column, so as you add the items in Listview, it grows and pushes the Textview down.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  TextEditingController controller = TextEditingController();

  final List<String> list = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ListView'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: SingleChildScrollView(
          child: Column(
            children: [
              ListView.builder(
                  shrinkWrap: true,
                  itemCount: list.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(list[index]),
                      trailing: IconButton(
                        icon: Icon(Icons.remove),
                        onPressed: () {
                          setState(() {
                            list.removeAt(index);
                          });
                        },
                      ),
                    );
                  }),
              Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: controller,
                      decoration: InputDecoration(
                        hintText: 'ID COLABORADOR',
                      ),
                    ),
                  ),
                  IconButton(
                      icon: Icon(Icons.add),
                      onPressed: () {
                        if (controller.text != null) {
                          setState(() {
                            list.add(controller.text);
                            controller.clear();
                          });
                        }
                      }),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

I believe to be simple, add the textfield always after the last item.

Video

ListView(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    children: List.generate(listaUsers.length, (index) {
      Widget child = ListTile(
          dense: true,
          title: Row(
            children: <Widget>[
              Text(
                listaUsers[index].id.toString(),
                style: TextStyle(color: Colors.black, fontSize: 13),
              ),
              Text(" - "),
              Text(
                listaUsers[index].name,
                style: TextStyle(color: Colors.black, fontSize: 13),
              ),
            ],
          ),
          onTap: () => _onTapped(user),
          trailing: IconButton(
            icon: Icon(Icons.remove),
            onPressed: () {},
          ));

      return child;
    }).toList()
      ..add(Padding(
          padding: EdgeInsets.only(left: 10),
          child: Container(
              padding: EdgeInsets.only(left: 15, right: 15),
              child: Row(children: <Widget>[
                Expanded(
                  child: TextField(
                    controller: addColaborador,
                    decoration: InputDecoration(
                        hintText: "ID COLABORADOR",
                        contentPadding: EdgeInsets.only(bottom: 0),
                        labelStyle: TextStyle(color: Colors.blueAccent)),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () {
                    _buscarId();
                  },
                )
              ])))))