如果需要颜色的渐变,我们可以在Container中添加一个渐变的效果:
class MyApp2 extends StatefulWidget {
const MyApp2({Key? key}) : super(key: key);
@override
State<MyApp2> createState() => _MyApp2State();
}
class _MyApp2State extends State<MyApp2> {
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,//渐变开始于上面的中间开始
end: Alignment.bottomCenter,//渐变结束于下面的中间
colors: [Color(0xFF94377F), Color(0xFFF79283)//开始颜色和结束颜色])),
);
}
}
效果是:
这是第一种,也就是可以自定义位置的,如上到下,左到右等等,
还有另外一种可以做到从中间到四周
class MyApp1 extends StatefulWidget {
const MyApp1({Key? key}) : super(key: key);
@override
State<MyApp1> createState() => _MyApp1State();
}
class _MyApp1State extends State<MyApp1> {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
gradient: RadialGradient(colors: [Colors.black, Colors.blue])),
width: 50,
height: 50,
)
将关键词改为RadialGradient即可:
colors中的颜色靠前的则在中间,其他的向四周扩散