How to use some CSS elements in flutter

▲
1
▼

Hello guys I was looking for something and dind't found any answer.

I'm trying to find something like position: absolute; background-image: radial-gradient(circle at 50% 48.193905%, rgb(13, 114, 255) 0%, transparent 100%); filter: brightness(109); to use in flutter, but with no success. My main problem is on the circle % and the brightness. Is flutter not providing these ? Or is there any widget that allow us to do that?

Currently I'm using something like this

Container(
      decoration: BoxDecoration(
            gradient: RadialGradient(
      colors: [
        myColor(fColor),
        Color(0x00000000)
      ],
      radius: 1.0,
  ),
 ),
);

Thanks you

css
flutter
dart
asked on Stack Overflow Jan 2, 2021 by RichardLutter • edited Jan 2, 2021 by RichardLutter

2 Answers

▲
0
▼

For radial gradient, wrap your widget in a Container and pass a decoration -

Container(
     decoration: BoxDecoration(
       gradient: RadialGradient(...some configuration)

For filters, try using BackdropFilter. Check out the official flutter docs

For absolute positioning, you'd need a bit more. Use Stack and wrap its children with Align or Positioned.

answered on Stack Overflow Jan 2, 2021 by sidrao2006
▲
0
▼

You can move the gradient around using 'center' parameter to move it across x and y axis (x, y)

Example:

                      decoration: BoxDecoration(
                        gradient: RadialGradient(
                          colors: [
                            Colors.black,
                            Colors.pink,
                            Colors.green,
                            Colors.orange,
                          ],
                          center: Alignment(-0.5, -0.20),  //(x,y)
                          // focal: Alignment(0.7, -0.01),
                          // focalRadius: 4.0,
                        ),

You can also use focal and focalRadius parameters to adjust the focal. You can see more useful details on this link https://www.woolha.com/tutorials/flutter-using-radialgradient-examples

If you want to add an image on top of the gradient, you can do it with an Opacity and Stack Widget.

Example:

               Stack(
                  children: [
                    Container(
                      height: 225,
                      decoration: BoxDecoration(
                        gradient: RadialGradient(
                          colors: [
                            Colors.black,
                            Colors.orange,
                            Colors.pink,
                            Colors.green,
                          ],
                          center: Alignment.topRight,
                          tileMode: TileMode.repeated,
                        ),
                        borderRadius: BorderRadius.circular(
                          25.0,
                        ),
                        border: Border.all(color: Colors.black),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.red,
                            blurRadius: 5.0,
                          ),
                        ],
                      ),
                    ),
                    Stack(
                      children: [
                        Opacity(
                          opacity: 0.6,
                          child: Image(
                            width: MediaQuery.of(context).size.width,
                            image: AssetImage('lib/assets/imgs/example.jpg'),
                            fit: BoxFit.fill,
                          ),
                        ),
                      ],
                    )
                  ],
                ),
answered on Stack Overflow Jan 2, 2021 by Texv

User contributions licensed under CC BY-SA 3.0