Debug School

rakesh kumar
rakesh kumar

Posted on

How to set Linear Gradient Background on Container in Flutter

App: -Output Screenshot:
Image description

SOLUTION
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
        ),
    ),
)
Enter fullscreen mode Exit fullscreen mode
 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

          ),
       ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Full Summary:
Container--BoxDecoration--gradient:LinearGradient
Container--height,width
gradient:LinearGradient-colors(orange,orangeAccent,red,redAccent),begin,end,stops
Refrence
Click here

Top comments (0)