Flutter实现斜向背景：求助制作如图所示背景效果

根据你需要的斜向背景效果，这里提供三种实用实现方式，可根据场景选择：

1. 自定义裁剪路径（ClipPath） #

适合需要精准控制斜切边缘形状的场景，比如非对称斜角：

首先定义裁剪器类：

class DiagonalClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 绘制路径：左上→左侧1/3高度处→右上→右下→左下→闭合
    path.lineTo(0, size.height * 0.3);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

在页面中使用：

Scaffold(
  body: Stack(
    children: [
      ClipPath(
        clipper: DiagonalClipper(),
        child: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blueAccent,
        ),
      ),
      // 前景内容层
      Center(
        child: Text(
          '斜向背景演示',
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    ],
  ),
)

2. 斜切变换（Transform.skew） #

快速实现斜切效果，代码最简单，适合对边缘精度要求不高的场景：

Scaffold(
  body: Stack(
    children: [
      Transform(
        // X轴倾斜-0.2弧度（约11.5度），可根据需求调整数值
        transform: Matrix4.skewX(-0.2),
        origin: Offset(0, 0),
        child: Container(
          width: MediaQuery.of(context).size.width * 1.2, // 加宽避免留白
          height: MediaQuery.of(context).size.height * 0.4,
          color: Colors.blueAccent,
        ),
      ),
      // 前景内容层
      Center(
        child: Text(
          '斜向背景演示',
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    ],
  ),
)

3. 渐变背景（LinearGradient） #

如果需要渐变斜向背景，直接用渐变的起始/结束点控制方向：

Scaffold(
  body: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
        colors: [Colors.blueAccent, Colors.lightBlue.shade300],
      ),
    ),
    child: Center(
      child: Text(
        '渐变斜向背景',
        style: TextStyle(fontSize: 24, color: Colors.white),
      ),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Mr2C2R