Flutter Container (color gradient)

If a color gradient is required, we can add a gradient effect to the 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)//开始颜色和结束颜色])),
    );
  }
}

The effect is:

This is the first type, that is, the position can be customized, such as top to bottom, left to right, etc.,

There is another way to do it from the middle to the four sides

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,
      )

Change the keyword to RadialGradient:

The front colors in colors are in the middle, and the others spread around