How can I make say a container with a shaded color like the picture attached?
I do not just use an image, because it would be a lot harder to make thodr small changes to it, and the color needs to be the whole screen width at times, and maybe I'm going to animate it.
class Gradiant extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: new BoxDecoration(
gradient: new LinearGradient(
colors: [Colors.blue[800], Colors.purple, Colors.red],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
stops: [0.2, 0.6, 1]),
),
),
);
}
}
You can use the gradient
property of the BoxDecoration
to get what you want.
I added a demo:
class StackOver extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
// use your preferred colors
Colors.red[900],
Colors.blue[900],
],
// start at the top
begin: Alignment.topCenter,
// end at the bottom
end: Alignment.bottomCenter,
),
),
),
);
}
}
RESULT:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.