SOLUTION
To set Linear Gradient Background on Container:
Container(
height: 200,
width:double.infinity,
decoration: BoxDecoration(
gradient:LinearGradient(
colors: [
Colors.orange,
Colors.orangeAccent,
Colors.red,
Colors.redAccent
//add more colors for gradient
],
begin: Alignment.topLeft, //begin of the gradient color
end: Alignment.bottomRight, //end of the gradient color
stops: [0, 0.2, 0.5, 0.8] //stops for individual color
//set the stops number equal to numbers of color
),
),
)
Full Dart Code:
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Test App",
home: ContainerStyle(),
);
}
}
class ContainerStyle extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Beautiful Linear Background"),
backgroundColor: Colors.redAccent,
),
body:Container(
margin: EdgeInsets.all(20),
height: 200,
width:double.infinity,
decoration: BoxDecoration(
gradient:LinearGradient(
colors: [
Colors.orange,
Colors.orangeAccent,
Colors.red,
Colors.redAccent
//add more colors for gradient
],
begin: Alignment.topLeft, //begin of the gradient color
end: Alignment.bottomRight, //end of the gradient color
stops: [0, 0.2, 0.5, 0.8] //stops for individual color
//set the stops number equal to numbers of color
),
borderRadius: BorderRadius.circular(30), //border corner radius
),
),
);
}
}
Full Summary:
Container--BoxDecoration--gradient:LinearGradient
Container--height,width
gradient:LinearGradient-colors(orange,orangeAccent,red,redAccent),begin,end,stops
Refrence
Click here
Top comments (0)