Flutter Container(颜色渐变)

如果需要颜色的渐变，我们可以在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中的颜色靠前的则在中间，其他的向四周扩散