如何在Flutter中实现渐显Divider？Opacity组件尝试失败求代码

你需要的是左右两端渐隐的分割线，Opacity只能控制整体透明度，没法实现局部渐变消失的效果。可以通过Container结合LinearGradient来实现，以下是两种实用的实现方式：

方式一：全渐变分割线 #

Container(
  height: 1, // 分割线高度，可按需调整
  width: double.infinity,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [
        Colors.transparent,
        Colors.grey.shade400,
        Colors.transparent,
      ],
      stops: const [0.0, 0.5, 1.0],
    ),
  ),
)

方式二：中间实色+两端渐变过渡 #

如果想要中间保留实色分割线，仅两端渐变消失，可通过Row组合组件实现：

Row(
  children: [
    // 左侧渐变过渡
    Expanded(
      child: Container(
        height: 1,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.transparent, Colors.grey.shade400],
            end: Alignment.centerLeft,
          ),
        ),
      ),
    ),
    // 中间实色分割段
    Container(
      width: 200, // 中间实色部分宽度，可按需调整
      height: 1,
      color: Colors.grey.shade400,
    ),
    // 右侧渐变过渡
    Expanded(
      child: Container(
        height: 1,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [Colors.grey.shade400, Colors.transparent],
            start: Alignment.centerLeft,
          ),
        ),
      ),
    ),
  ],
)

你可以根据需求修改渐变颜色、分割线高度、中间实色段宽度等参数，就能实现图中的效果。

内容的提问来源于stack exchange，提问作者Fatih Yılmaz