CODEWITHSUNDEEP
dartflutter
Viktor K.
Viktor K.

Reputation: 393

Flutter. Container border gradient. White to transparent

Do You know any way how to make a container border with gradient? I want to make it to fade from one color to the same with 0 opacity.

Also i was thinking about to use a blend mode, i dont think its a good idea

at this moment i see only one way. To make it with flare: https://www.2dimensions.com/a/stellarcreed/files/flare/border-gradient/preview

Upvotes: 1

Views: 8556

Answers (4)

iAugustozSatoshi
iAugustozSatoshi

Reputation: 66

You can use this package: https://pub.dev/packages/gradient_borders

Eg.:
     Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        border: const GradientBoxBorder(
          gradient: LinearGradient(colors: [Colors.blue, Colors.red]),
          width: 4,
        ),
        borderRadius: BorderRadius.circular(16)
      ),
    ),

Upvotes: 0

technical_geek
technical_geek

Reputation: 11

I think currently the only way to do this is to stack container with gradient colors below your container. And keep the size of the gradient color container a little bigger than your upper container.

Upvotes: 1

Musa Jahun
Musa Jahun

Reputation: 66

Try this, this should work, use LinerGradient, you can adjust the Alignment for different directions. But this is for the container, not the border. You can stack other components on top of it.

Container(
    height: 100,
    decoration: BoxDecoration(
        color: Styles.colorWhite,
        gradient: LinearGradient(
            tileMode: TileMode.clamp,
            begin:  Alignment(0.0, -1.0),
            end: Alignment(0.0, 0.2),
            colors: [Color(0x1AFFFFFF),Color(0x4DFFFFFF), Colors.white])
        ),
    padding: EdgeInsets.only(top: 1, bottom: 20, left: 15, right: 15),
),

This is how it looks

Upvotes: 1

Haroun Hajem
Haroun Hajem

Reputation: 5628

Try this: 

Center(
  child: new Container(
    decoration: new BoxDecoration(
      color: Colors.purple,
      gradient: new LinearGradient(
        colors: [Colors.red, Colors.cyan],
      ),
    ),
    child: new FlutterLogo(
      size: 200.0,
    )
  ),
);

Here is more information regarding this question.

Upvotes: 2

Related Questions