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.

¿Cómo puedo agregar un gradiente de color a una Tarjeta en flutter?

Quiero agregar un gradiente de color a una tarjeta en Flutter, intenté varias maneras con Container y decoration, pero no logro hacer funcionar todo el código como debería.

Este es el código actual que funciona, quiero reemplazar la línea 3 con un gradiente:

   return new Card(
      elevation: 5.0,
      color: color.orangeAccent, //Quiero reemplazar este color con un gradiente
      child: Padding(
          padding: new EdgeInsets.all(15.0),
          child: Column(
            children: <Widget>[
                InkWell(
                onTap: () {},
                child: Container(
                    child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[],
                    ),
                ),
                ),
            ]
          )
      ),
   );

Jugué con el consejo dado en esta publicación aquí pero no puedo integrarlo correctamente con mi código.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para agregar un gradiente de color a una tarjeta en Flutter, puedes usar la propiedad BoxDecoration del widget Container. Reemplaza la línea 3 con el siguiente código:

    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.orangeAccent, Colors.orange],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ),
    ),
    

    Esto crea un gradiente lineal que va desde Colors.orangeAccent hasta Colors.orange, desde la parte superior hasta la parte inferior de la tarjeta. Puedes ajustar los colores y la dirección del gradiente para que se adapte a tu diseño. El código actualizado debería verse así:

    return new Card(
    elevation: 5.0,
    child: Container(
    decoration: BoxDecoration(
    gradient: LinearGradient(
    colors: [Colors.orangeAccent, Colors.orange],
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    ),
    ),
    child: Padding(
    padding: new EdgeInsets.all(15.0),
    child: Column(
    children: <widget>[
    InkWell(
    onTap: () {},
    child: Container(
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <widget>[],
    ),
    ),
    ),
    ],
    ),
    ),
    ),
    );

Comments are closed.