How to set Linear Gradient Background on Container in Flutter App

Flutter is known for its beautiful user interface (UI) design, in this guide as well, we are going to show you the way to set linear gradient background on Container. The UI looks beautiful with gradient background. See the code below and learn how to do it.

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

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