如何在Flutter中为分割线添加渐变颜色

Question

我有一个实心颜色的分隔线小部件，但我想将其设置为渐变颜色。 有什么方法可以做到这一点吗？

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

- Elias Fizesan

Answer 1

只需使用带有[BoxDecoration] [1]的 Container()即可创建一个渐变。

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

预定义的分隔符在自定义方面有所不足。[1]: https://api.flutter.dev/flutter/painting/BoxDecoration-class.html

- C4s4r

---

在数字 4 后面缺少逗号，无法编辑它，因为对帖子的编辑必须是 6 个或更多字符。 - David Chopin

Answer 2

如果您希望使用与官方Divider完全相同的参数，但又想要渐变和圆角这些讨厌的正方形边缘，您可以使用这个ds是我的DividerStyle包含的参数：

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

- user3705905