'How to Convert CSS Gradient to Flutter Gradient

How to convert CSS Gradient

background: linear-gradient(177.82deg, rgba(138, 160, 55, 0.2) 51.9%, #8E9B5E 69.3%);

to Flutter Gradient?

cssflutterlinear-gradients


Solution 1:[1]

you just need to know :

  1. the hex colors of the Gradient
  2. the direction (like at my example it's from top to bottom and to say it to Flutter, it'll be from topCenter bottomCenter)

see the code example:

          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.red.withOpacity(0.1),
                Colors.green.withOpacity(0.8),
              ],
            ),
         ),
       )

enter image description here

Note number 1: that I just used the red and the green to make it clear for you, but you can use the hex colors like that

  • convert just the hashtag to 0xff like:

#8E9B5E

to

0xff8E9B5E

and you can replace:

Colors.red.withOpacity(0.1),

to be like:

Color(0xff8E9B5E),

Note number 3: the function of .withOpacity(0.1) is just for Opacity like the percentage of the color appearance (from 0.0 to 1.0) and you can change the value of the Opacity or delete it if you want and use just Colors.red or Color(0xff8E9B5E)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohamed Reda

Related Questions