Flutter - How to set Linear Gradient Background in Widget

In mobile app development, We need to set Gradient Background to UI. We can set it easily Gradient Background to a widget. We are going to share in this post how to set the easiest way to Gradient Background.

How to set  Linear Gradient Background to Container :

We are going to set the gradient background of the Container in the below example.

   Container(
                margin: EdgeInsets.all(30),
                height: 200,
                width:double.infinity,
                decoration: BoxDecoration(
                  gradient:LinearGradient(
                      colors: [
                        Colors.red,
                        Colors.redAccent,
                        Colors.blueAccent,
                        Colors.blue
                       
                      ],
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                  ),
                ),
              )

 

Output :

 

How to set  Linear Gradient Background to Card :

We are going to set the gradient background of the Card in the below example.

 Card(
        margin: EdgeInsets.all(30),
        elevation: 5.0,
        child: Container(
          width: double.infinity,
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [
                  Colors.green,
                  Colors.blue,
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
          child: Padding(
            padding: new EdgeInsets.all(15.0),
            child: Center(
              child: Text(
                "Errorgram",
                style: TextStyle(color: Colors.red, fontSize: 40),
              ),
            ),
          ),
        ),
      ),

 

Output : 

 

 

Full Example:

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Errorgram"),
      ),
      body: Card(
        margin: EdgeInsets.all(30),
        elevation: 5.0,
        child: Container(
          width: double.infinity,
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [
                  Colors.green,
                  Colors.blue,
                ],
                begin: const FractionalOffset(0.0, 0.0),
                end: const FractionalOffset(1.0, 0.0),
                stops: [0.0, 1.0],
                tileMode: TileMode.clamp),
          ),
          child: Padding(
            padding: new EdgeInsets.all(15.0),
            child: Center(
              child: Text(
                "Errorgram",
                style: TextStyle(color: Colors.red, fontSize: 40),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 

Conclusion :

Using a container we can set Gradient Background in any widget I hope this post will help you.