Posted in Dart Flutter

Flutter – How to set Linear Gradient Background on Container

Flutter – How to set Linear Gradient Background on Container Posted on May 22, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Flutter is knows for its beautiful UI design, in the post as well, I’m going to show 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.

linear gradient background

To set Liner Gradient Background:

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';

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

}

In this way, you can make your Container beautiful by linear gradient background on it.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *