본문으로 건너뛰기

Flutter box decoration mutiple visuals

Color + Gradient

❌ Color + Gradient. - in a single decoration

This won't work (it will ignore the color.)

See, we have both bg color and opacity gradients. still only gradients will be visible

Container(
decoration: BoxDecoration(
color: Colors.blue, // <--------- this will be ignored.
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.purple.withOpacity(0.1),
Colors.blue.withOpacity(0.1)
]
)
),
);

✅ Color + Gradient. - chunked decoration

The correct way of mixing Color + Gradient is chunking the decorations in the correct order-hierarchy

Container(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [
Colors.purple.withOpacity(0.1),
Colors.blue.withOpacity(0.1)
]
)
)
)
);

Color + Image

Container(
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: const DecorationImage(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.black,
width: 8,
),
borderRadius: BorderRadius.circular(12),
),
)
// official flutter team's example from https://api.flutter.dev/flutter/painting/BoxDecoration-class.html