0

Estoy desarrollando una app en Flutter para un menu en el cual quiero tener un resultado como el siguiente. introducir la descripción de la imagen aquí

El codigo que he estado probando es el siguiente, pero no obtengo el resultado deseado.

return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        ListTile(
          title: Row(
            children: [
              Expanded(child: Text( text, style: style, )),
              const SizedBox( width: 15 ),
              Text( '\$ $price', style: style,),
            ],
          ),
        ),
        Divider( color: Colors.white.withOpacity( 0.5 ),),
      ],
    );

y el resultado que tengo es el siguiente.

introducir la descripción de la imagen aquí

Gracias.

2 respuestas 2

1

Lo podrías hacer directamente con un Row en lugar de usar el ListTile, te quedaría algo así:


return Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  IntrinsicHeight(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 15.0),
                      child: Row(
                        children: [
                          Expanded(
                           child: Text(
                            text,
                            style: style,
                            ),
                          ),
                          Expanded(
                            child: Padding(
                              padding: const EdgeInsets.symmetric(horizontal: 5.0),
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                child: Divider(
                                  color: Colors.white.withOpacity(0.7),
                                  height: 1,
                                ),
                              ),
                            ),
                          ),
                          Text(
                            '\$ $price',
                            style: style,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              );
3
  • Ya habia probado algo parecido y funciona bien mientras el texto del menú no exceda de la primera línea, porque si el menú y el precio exceden el espacio disponible para una línea provoca un desvordamiento. Gracias de todas formas y Saludos. Commented el 18 ene. 2023 a las 6:32
  • solo necesitas definir el tamaño máximo para el texto y hacerlo multilinea, es sencillo, actualizaré mi respuesta Commented el 18 ene. 2023 a las 14:14
  • le agregué un Expanded al Text y ya Commented el 18 ene. 2023 a las 14:16
0

Finalmente el problema lo resolvi con el siguiente código con la ayuda de otros usuarios de Stackverflow en Ingles.

return SizedBox(
  width: double.infinity,
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
        Row(
          children: [
            Expanded( child: Text( text, style: style, maxLines: 2, overflow: TextOverflow.ellipsis, ) ),
          ],),
        Row(
          children: [
            Expanded(
              child: Text( 
                '.' * 150, 
                style: style, 
                maxLines: 1, 
                overflow: TextOverflow.fade,)),
            SizedBox(
              width: 80,
              child: Text( 
                '\$ $price', 
                style: style,
                textAlign: TextAlign.right,)),
          ],
        ),
        
      // Divider( color: Colors.white.withOpacity( 0.5 ),),
    ],
  ),
);

Este fue el resultado final:

introducir la descripción de la imagen aquí

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.