Home / Questions / 247183
Accepted
Roberto Hermosilla F
Asked: 2020-03-20 20:12:51 +0800 CST 2020-03-20 20:12:51 +0800 CST

How to insert a textformfield at the bottom of the page in flutter

  • 772

I need to insert a textformfield at the bottom of my page with a button on the right. On this page and inside the build widget, I have a listview with a fixed size and I want a text to be entered at the end.

enter image description here

@override
Widget build(BuildContext context) {
return new Scaffold(
    appBar: new AppBar(
      title: new Text("Mensajes de trabajo"),
      backgroundColor: Colors.deepOrange,
    ),
    body: Container(
      height: 450,
      child: FutureBuilder(
        future: _capturaComuna(),
        builder: (BuildContext context, AsyncSnapshot snapshot){
          if (snapshot.data == null){
            return Container(
              child: Center(
                child: Text("Cargando...")
              )
            );
          } else {
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Card(
                  child: ListTile(
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(snapshot.data[index].imagen_mensaje),
                    ),
                    title: new Text(snapshot.data[index].nombre_persona + '   ' + snapshot.data[index].fecha_mensaje),
                    subtitle: Text(snapshot.data[index].texto_mensaje),
                  )
                );
              },
            );
          }
        }
      )
    )
  );
}
flutter

1 Answers

  1. Best Answer

    Here I made an example of how it should be, using MediaQueryso you don't have to put a fixed size on the Container, just replace with your snapshot.

      @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: new AppBar(
            title: new Text("Mensajes de trabajo"),
            backgroundColor: Colors.deepOrange,
          ),
          body: Container(
            height: MediaQuery.of(context).size.height,
            child: FutureBuilder(
                future: _capturaComuna(),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  if (snapshot.data == null) {
                    return Container(child: Center(child: Text("Cargando...")));
                  } else {
                    return Stack(
                      children: [
                        ListView.builder(
                          padding: EdgeInsets.only(bottom: 60),
                          itemCount: snapshot.data.length,
                          itemBuilder: (BuildContext context, int index) {
                            return Card(
                                child: ListTile(
                              title: new Text(snapshot.data[index]),
                              subtitle: Text(snapshot.data[index]),
                            ));
                          },
                        ),
                        Positioned(
                          bottom: 0.0,
                          left: 0.0,
                          right: 0.0,
                          child: Container(
                            color: Colors.white,
                            child: Row(
                              children: [
                                Expanded(
                                  child: Padding(
                                    padding: const EdgeInsets.all(8.0),
                                    child: TextFormField(
                                      decoration: InputDecoration(
                                          hintText: "Ingresa texto aquí"),
                                    ),
                                  ),
                                ),
                                RaisedButton(
                                  child: Text("Enviar"),
                                  onPressed: () {},
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    );
                  }
                }),
          ));
    }

    With this, when the keyboard appears it pushes your bottom bar so you can see what you are entering in the TextField.

    • 2