es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Flutter: ListTile posicionado sobre una imagen – lanza una excepción – BoxConstraints fuerza un ancho infinito.

Flutter: ListTile posicionado sobre una imagen – lanza una excepción – BoxConstraints fuerza un ancho infinito.

28 Jul, 2023 Programación

Tengo una imagen a pantalla completa y quiero mostrar un ListTile sobre ella, posicionado en la parte inferior de la pantalla. Sigo obteniendo la excepción BoxConstraints forces an infinite width.

Widget build(BuildContext context) {
    return Stack(
      children: [
        Image(
          alignment: Alignment.center,
          image: Image.file(File(filePath)).image,
          fit: BoxFit.fill,
          height: double.infinity,
          width: double.infinity,
        ),
        Container(
          child: const Positioned(
            bottom: 0,
            child: ListTile(
              leading: CircleAvatar(
                backgroundImage: NetworkImage(
                    'https://image_sample.jpg'),
              ),
              title: Text("Texto de ejemplo"),
              subtitle: Text('@usuario1'),
            ),
          ),
        ),
      ],
    );
  }

La excepción obtenida es:

imagen de descripción

He intentado restringir el ListTile utilizando ConstrainedBox, pero sigo obteniendo la excepción. Si elimino el ListTile y uso un widget Text simple, funciona correctamente. Entiendo que el ListTile tiene restricciones ilimitadas, ¿entonces cómo puedo hacer que funcione?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema que estás enfrentando se debe a las restricciones sin límites del widget ListTile. Para resolver este problema, puedes envolver tu widget ListTile con un widget SizedBox y proporcionarle una altura. Esto le dará al ListTile una altura fija y, por lo tanto, no tendrá restricciones sin límites.

    Aquí está el código actualizado:

    Widget build(BuildContext context) {
  return Stack(
    children: [
      Image(
        alignment: Alignment.center,
        image: Image.file(File(filePath)).image,
        fit: BoxFit.fill,
        height: double.infinity,
        width: double.infinity,
      ),
      Positioned(
        bottom: 0,
        child: SizedBox(
          height: 60, // Cambia la altura según tus necesidades
          child: ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(
                  'https://image_sample.jpg'),
            ),
            title: Text("Texto de ejemplo"),
            subtitle: Text('@usuario1'),
          ),
        ),
      ),
    ],
  );
}

    En el código anterior, he envuelto el widget ListTile con un widget SizedBox y le he proporcionado una altura de 60. Puedes cambiar la altura según tus necesidades.

    Esto debería resolver el problema y el ListTile debería mostrarse en la parte inferior de la pantalla sobre la imagen de pantalla completa.

Comments are closed.