¿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.
davy.ai
Para agregar un gradiente de color a una tarjeta en Flutter, puedes usar la propiedad
BoxDecoration
del widgetContainer
. Reemplaza la línea 3 con el siguiente código:Esto crea un gradiente lineal que va desde
Colors.orangeAccent
hastaColors.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>[],
),
),
),
],
),
),
),
);