1

estoy haciendo una app por aburrimiento y me surgido un problema que lleva dos días tocándome la moral, la cosa es que quiero hacer una lista infinita en la que se vea una foto, un par de iconos y dos textos, para ello he creado, dentro de un ListView.builder, un center que devuelve un container, que retorna una columna y que a su vez devuelve un Row con texto e icono, una foto y un segundo Row con dos textos, todo esto a modo de prueba, sin embargo todo se me queda en el margen izquierdo de la columna y el container ¿Alguna pista de por qué pasa estoy como lo puedo solucionar? Muchas gracias de antemano

Adjunto código:

import 'package:flutter/material.dart';

class HomePageUser extends StatefulWidget {
  const HomePageUser({super.key});

  @override
  State<HomePageUser> createState() => _HomePageUserState();
}

class _HomePageUserState extends State<HomePageUser> {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        //itemCount: 100,
        itemBuilder: (context, index) {
          return Center(
            child: Container (
            margin: const EdgeInsets.all(10),
            alignment:Alignment.center,
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(10.0),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 10.0,
                  spreadRadius: 2.0,
                  offset: const Offset(
                    5.0,
                    5.0,
                  ),
                ),
              ],
            ),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      children: [
                        const Padding(padding: EdgeInsets.all(10), child: Text('Nombre'),),
                        const Padding(padding: EdgeInsets.only(right: 10), child: Icon(Icons.open_in_new),),
                      ],
                    ),
                    Container(
                      height: 100,
                      width: 100,
                    ),
                    Row(
                      children: [
                        Text('Estrellas'),
                        const Padding(padding: EdgeInsets.only(right: 10),),
                        Text('(rango)')
                      ],
                    ),
                  ],
              ),
            ),
          );
        },
    );
  }
}
1
  • como desees que se vea? dices que te queda todo a un lado izquierdo pero no dices como debe mostrarlo Commented el 19 jul. 2022 a las 21:53

1 respuesta 1

1

Para que el contenido se vea al centro, puedes usar el mainAxisAlignment: MainAxisAlignment.center en tus Rows.

Queda así:

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      //itemCount: 100,
      itemBuilder: (context, index) {
        return Container(
          margin: const EdgeInsets.all(10),
          padding: const EdgeInsets.all(20),
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10.0),
            boxShadow: const [
              BoxShadow(
                color: Colors.grey,
                blurRadius: 10.0,
                spreadRadius: 2.0,
                offset: Offset(
                  5.0,
                  5.0,
                ),
              ),
            ],
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: Text('Nombre'),
                  ),
                  Padding(
                    padding: EdgeInsets.only(right: 10),
                    child: Icon(Icons.open_in_new),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const [
                  Text('Estrellas'),
                  Padding(
                    padding: EdgeInsets.only(right: 10),
                  ),
                  Text('(rango)')
                ],
              ),
            ],
          ),
        );
      },
    );
  }

introducir la descripción de la imagen aquí

2
  • 1
    Muchas gracias, me ha arreglado el problema
    – LuisBedia
    Commented el 20 jul. 2022 a las 7:43
  • 1
    si la respuesta de @diegoveloper te sirvió, puedes marcarla como aceptada, para que así puedas ayudar a otras personas que tengan el mismo problema que tu. Commented el 20 jul. 2022 a las 13:39

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.