How to make Layout Gradient with Flutter

hey there welcome to new blog. in this article i will show you the easiest way to make gradients in your flutter app. Generally to add or make gradients in flutter application we use Container widget with gradient attribute. but in this article we will use easiest way to generate mind-blowing layout gradient and use in your flutter app.

here is the simple of the traditional code where we are adding gradient property to container to whit help of another widget called LinearGradient() inside box decoration.

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.red, Colors.orange, Colors.yellow],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: Text(
    'Hello world !'
  ),rae
)

BoxDecoration -> gradient

here inside container one can use BoxDecoration to add gradient with help you LinearGradient() property where you can use a

  1. colors :- array of colors to build gradient.
  2. begin: Alignment.topLeft :- define start of color gradient
  3. end: Alignment.bottomRight :- define end of gradient to

Here is the easiest way to write this code directly

  • Goto this Website : https://fluttergradientgenerator.com/
  • select STYLE on the right hand side bar [Linear, Radial]
  • now select Direction
  • select start end end colors
  • now click on that bluew button sys GET CODE

preview of website.


Result of GET CODE

LinearGradient(
      colors: [Colors.red, Colors.orange, Colors.yellow],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),

Now you can copy this code and past it to your project source code inside container -> boxdecoration -> gradient property and your time is saved ๐Ÿ•ฐ๏ธ.


I hope this article will help you to find easiest way to build flutter app with beautiful layout gradients. you can find me on Instagram @_rajjani or subscribe me on Youtube RAJ JANI for more flutter and programming related content.

THNAKS for Reading ๐Ÿ“–

Raj Avatar