CODEWITHSUNDEEP
flutterdart
Elias Fizesan
Elias Fizesan

Reputation: 305

How to add gradient color to Divider in Flutter

I have a Divider widget with a solid color but I want to set it to a gradient color. Is there a way to do this?

Divider(
    height: 20,
    thickness: 2.5,
    indent: 0,
    endIndent: 100,
)

Upvotes: 6

Views: 3290

Answers (2)

C4s4r
C4s4r

Reputation: 444

Just use a Container() with BoxDecoration to create a gradient.

SizedBox(
  width: 200,
  height: 4,
  child: Container(
    decoration: BoxDecoration(
      gradient: //...
    ),
  ),
),

The pre-defined divider is good but not powerful when it comes to customization.

Upvotes: 7

user3705905
user3705905

Reputation: 86

If you wish to use the exact same parameters as the official Divider and yet have the possibility to gradient AND to round these nasty square sides, you can use this ds is my DividerStyle containing the parameters:

    return SizedBox(
    height: ds.heigth,
    child: Center(
      child: Container(
        height: ds.thickness,
        margin: EdgeInsetsDirectional.only(start: ds.indent, end: ds.endIndent),
        decoration: BoxDecoration(
          color: ds.color.getColor(),
          gradient: ds.color.getGradient(),
          borderRadius: ds.roundEdge
              ? BorderRadius.all(Radius.circular(ds.thickness))
              : null,
          border: Border.all(color: Colors.transparent, width: 1),
        ),
      ),
    ),
  );

Upvotes: 0

Related Questions