How to add gradient color to Divider in Flutter

user_13513562 0
Viewed 1235

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,
)
dart flutter
2 Answers

Just use a Container() with [BoxDecoration][1] 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. [1]: https://api.flutter.dev/flutter/painting/BoxDecoration-class.html

user_123573630

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),
        ),
      ),
    ),
  );
user_37059050
Related