0

Estoy tratando de replicar un diseño que observe de otra app a modo de practica, para lo cual no logro alinear los elementos de forma correcta, tal como lo visualizo en la siguiente imagen.

Diseño que intento realizar

introducir la descripción de la imagen aquí

Lo que e intentado

He intentado de varias maneras pero no logro posicionar correctamente los elementos, si logro acomodar lo marcado de verde, pero lo marcado de blanco y azul no logro posicionar correctamente. El código que tengo actualmente.

Card(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Row(
        children: [
          Padding(
            padding: const EdgeInsets.all(15.0),
            child: Icon(
              Icons.ac_unit,
              size: 45.0,
              color: Colors.blue,
            ),
          ),
          Text(
            'Billetera',
            style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold),
          ),
          Spacer(),
          IconButton(icon: Icon(Icons.more_vert), onPressed: null)
        ],
      ),
      Row(
        children: [
          Text('Saldo actual'),
          Spacer(),
          Text('\$0.00'),
        ],
      )
    ],
  ),
);

1 respuesta 1

0

Es que son componentes separados, cada uno está en un Row distinto.

Quizás podrías posicionarlo con Stack, pero por ahora para resolver el issue, considera el padding y size de Icons.ac_unit.

Entonces solo agrégale a la izquierda un SizedBox, así :

              Row(
                  children: [
                        const SizedBox(
                          width: 30.0 + 45.0,
                        ),
                        Text('Saldo actual'),
                        Spacer(),
                        Text('\$0.00'),
                      ],
                )

30 = padding izquierdo + derecho

45 = icon size

1
  • Estudiare el Stack para ver de que manera queda mejor y mas sencillo, Gracias por lo mientras.
    – Richard
    Commented el 17 ago. 2020 a las 23:25

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.