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.

To set Linear Gradient Background on Container:

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

Full Dart Code:

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

Output Screenshot:

In this way, you can set linear gradient background to the Container() widget in Flutter.

No any Comments on this Article


Please Wait...