1

Estoy haciendo una parte de la APP, donde imprimo varios rows. Lo que me pasa es que cuando llega al final de la pantalla me da error por que se excede de los límites. Me parece una cosa bastante simple pero no consigo dar con la clave.

¿No se puede una vez que llegue al tope, que baje a la siguiente fila el row?

Padding(
   padding:  EdgeInsets.fromLTRB(0, 25, 0, 0),
   child: SingleChildScrollView(
   child: Column(
       children: [
          Container(
            child: Padding(
            padding:  EdgeInsets.fromLTRB(20, 12, 20, 0),
              child: Row(
                children: [
                    //Esto en este caso se repite 5 veces
                    if(registro[index]['efectivo'] == "on")
                    Padding(
                      padding:  EdgeInsets.fromLTRB(0, 0, 20, 0),
                      child: Column(
                      children: [
                       SvgPicture.network( 'http://url/images/svg/efectivo2.svg',
                       width: 35.0,
                       ),
                       SizedBox(height: 8.0,),
                       Text("EFECTIVO" .toUpperCase(), style: const TextStyle(
                       fontSize: 9.0,
                       color: Colors.black,
                       fontWeight: FontWeight.w800
                       ),)
                     ],
                   ),
                  ),
                 //Hasta aquí
                ]
              )
            )
          )
       ],
   ),
  ),
),

He probado con GridView.count y sí consigo lo que busco, pero además hace scroll sobre ese mismo container.

2
  • Puedes aclarar un poco más el problema? No entiendo muy bien ¿Qué te sale de error? Commented el 8 jul. 2022 a las 15:37
  • Hola @JonathanPerez perdona que no se como explicarlo mejor. No me sale error, es fallo de diseño. Es decir si por ejemplo iteramos 5 imagenes con un texto debajo en un Row y el que hace 5 no cabe en pantalla, quiero que en lugar de que siga en la misma fila, baje abajo.
    – Miguel
    Commented el 8 jul. 2022 a las 15:39

1 respuesta 1

1

Si el error que te sale son unas franjas negras con amarillo, es porque los elementos que intentas mostrar en pantalla no caben, entonces, te recomiendo que crees un GridView.builder y a este darle una altura dinámica dependiendo de los items que quieras que haya por fila donde ['variable] => variable de acceso:

 Container(
      height: tamanoGridServicio(
          registro[0]['variable'].length),
      child: GridView.builder(
             physics: NeverScrollableScrollPhysics(),
             gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                                crossAxisCount: 5,
             childAspectRatio: 0.9,
             crossAxisSpacing: 0.5),
             adding: EdgeInsets.only(left: 20, right: 20, top: 20),
             itemBuilder: (context, index) {
               return Column(
                   children: [
                     SvgPicture.network(
                      'url${registro[0]['variable'][index]['variable']}',
                       width: 35.0),
                       Container(
                         child: Text(registro[0]['variable']
                                      [index]['variable']),
                          )
                        ],
                       );
                     },
               itemCount: registro[0]['variable'].length,
                          ),
                        )

Aquí tendríamos el método para la altura:

double tamanoGridServicio(int? longitud) {
double? result;
if (longitud != null) {
  if (longitud <= 5) {
    result = 100;
  } else if (longitud >= 5 && longitud <= 10) {
    result = 190;
  } else if (longitud >= 10 && longitud <= 15) {
    result = 240;
  }
}
return result!;

}

9
  • Me sudece lo mismo @JonathanPerez , he encerrado el Column pero me sigen saliendo las franjas
    – Miguel
    Commented el 8 jul. 2022 a las 15:54
  • Que column estás encerrando, porque veo que tienes muchos, te recomiendo leer, sobre el Widget Expanded, este va a hacer que el widget ocupe el espacio necesario de la pantalla para mostrar la lista Commented el 8 jul. 2022 a las 16:00
  • mmmm no se como dicirte cual he encerrado. De echo el que he encerrado está antes de el código que te he puesto
    – Miguel
    Commented el 8 jul. 2022 a las 16:06
  • Voy a editar la pregunta. No está bien el código
    – Miguel
    Commented el 8 jul. 2022 a las 16:08
  • Y ese estaría bien, yo creo que también deberías encerrar la columna donde metes los datos con imagenes y a su vez el SingleChildScrollView deberías encerrarlo en un Expanded, quedaría algo asi: 1er caso => Sin..Chil..Scr..Vi.. => Column | 2do caso => Expanded => Sin..Chil..Scr..Vi.. => Column Commented el 8 jul. 2022 a las 16:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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