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.

Quiero que la imagen se expanda al tamaño de la tarjeta.

19 Jun, 2023 Programación

Estoy tratando de poner una imagen dentro de la tarjeta, pero la imagen se desborda.

Este es mi código:

Card(
        clipBehavior: Clip.antiAlias,
        elevation: 5.0,
        shape: RoundedRectangleBorder(
          side: BorderSide(width: 0.1),
          borderRadius: BorderRadius.circular(24),
        ),
        child: Ink(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [AppColors.secundary, Colors.lime],
            ),
          ),
          child: Column(
            children: <widget>[
              Image.asset(
                AppImages.audi1,
              ),
              ListTile(
                title: const Text('Accidente'),
              ),
            ],
          ),
        ),
      ),

Mira cómo estás.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar el problema de que la imagen se desborde fuera de la tarjeta, puedes agregar un widget Flexible o Expanded alrededor del widget Image.asset. Esto permitirá que la imagen ocupe solo el espacio disponible dentro de la tarjeta, evitando que se desborde. Aquí hay un ejemplo:

    Card(
  clipBehavior: Clip.antiAlias,
  elevation: 5.0,
  shape: RoundedRectangleBorder(
    side: BorderSide(width: 0.1),
    borderRadius: BorderRadius.circular(24),
  ),
  child: Ink(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [AppColors.secondary, Colors.lime],
      ),
    ),
    child: Column(
      children: <widget>[
        Expanded(
          child: Image.asset(
            AppImages.audi1,
            fit: BoxFit.cover,
          ),
        ),
        ListTile(
          title: const Text('Accidente'),
        ),
      ],
    ),
  ),
),

    Nota que agregué el parámetro fit: BoxFit.cover al widget Image.asset, lo que le indica que ajuste la imagen al espacio disponible manteniendo su relación de aspecto. El widget Expanded o Flexible permite que la imagen se expanda verticalmente para llenar el espacio disponible dentro de la columna.

Comments are closed.