3

necesito insertar un textformfield al final de mi página con un botón a la derecha. En esta página y dentro del build widget, tengo un listview con un tamaño fijo y deseo que al final se pueda ingresar un texto.

introducir la descripción de la imagen aquí

@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),
                  )
                );
              },
            );
          }
        }
      )
    )
  );
}
3
  • hmm porque le pones un tamaño fijo al container? no debería ser responsive? el 20 mar. 2019 a las 15:20
  • Diego, gracias.... lo hice para limitar el listview y darle espacio al textformfield el 20 mar. 2019 a las 15:53
  • Claro, con MediaQuery solucionas eso, revisa mi respuesta abajo el 20 mar. 2019 a las 16:12

1 respuesta 1

2

Aquí hice un ejemplo de como debería ser, usando MediaQuery para no tener que poner un tamaño fijo en el Container, solo reemplaza por tu 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: () {},
                                ),
                              ],
                            ),
                          ),
                        )
                      ],
                    );
                  }
                }),
          ));
    }

Con esto, cuando el teclado aparece empuja tu barra inferior para que puedas ver que ingresas en el TextField.

2
  • En este ejemplo puedes ver como le puse padding: EdgeInsets.only(bottom: 60), para dar un espacio la barra inferior, puedes cambiar el tamaño si deseas. el 20 mar. 2019 a las 15:55
  • 1
    Funcionó perfecto, gracias Diego! el 21 mar. 2019 a las 1:36

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.