Flutter中移除CustomPainter绘制内容白色背景的实现方法（底部导航栏场景）

我看了你这段用作底部导航栏的CustomPainter代码，问题出在几个容易忽略的细节上，咱们一步步把白色背景去掉：

问题根源分析 #

你当前代码里的canvas.saveLayer紧接着canvas.restore属于空操作，完全没起到预期作用；另外阴影的绘制方式和路径闭合的处理，也可能导致默认白色底色显现出来。

具体修改方案 #

1. 删掉无用的saveLayer/restore调用

这两行代码没有帮你处理透明，反而可能干扰绘制流程，直接删掉就行。

2. 优化阴影绘制逻辑

单独为阴影创建Paint，设置合适的透明度和模糊效果，确保阴影在透明背景上正确显示，不会带出白色底色。

3. 规范路径闭合方式

用path.close()代替手动lineTo(0, height)，让路径闭合更规范，也避免潜在的绘制异常。

4. 优化重绘判断逻辑

让shouldRepaint只在关键参数（比如height）变化时才返回true，提升性能。

修改后的完整代码 #

import 'dart:ui' as ui;
import 'package:flutter/material.dart';

class BNBCustomPainter extends CustomPainter {
  final double height;
  BNBCustomPainter({
    required this.height,
  });

  @override
  void paint(Canvas canvas, Size size) {
    // 渐变画笔
    Paint gradientPaint = Paint()
      ..style = PaintingStyle.fill
      ..shader = ui.Gradient.linear(
        Offset(0, 0),
        Offset(0, 10),
        [
          Color(0xff0093E9),
          Color(0xff80D0C7),
        ],
      );

    // 构建路径
    Path path = Path();
    path.moveTo(0, height); // 起点
    path.quadraticBezierTo(size.width * 0.5, 0, size.width, height); // 顶部圆弧
    path.lineTo(size.width, size.height); // 右下角
    path.lineTo(0, size.height); // 左下角
    path.close(); // 自动闭合路径到起点

    // 绘制阴影：先画阴影再画路径，确保阴影在底层
    final shadowPaint = Paint()
      ..color = Colors.black.withOpacity(0.3) // 可调整阴影透明度
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 5);
    canvas.drawPath(path, shadowPaint);

    // 绘制渐变路径
    canvas.drawPath(path, gradientPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // 只有当height变化时才重绘
    return oldDelegate is BNBCustomPainter && oldDelegate.height != height;
  }
}

使用时的关键注意事项 #

把这个CustomPainter用作底部导航栏时，一定要确保父容器的背景是透明的，否则还是会显示白色：

bottomNavigationBar: Container(
  color: Colors.transparent, // 必须设置为透明
  child: CustomPaint(
    size: Size(double.infinity, kBottomNavigationBarHeight),
    painter: BNBCustomPainter(height: kBottomNavigationBarHeight - 10),
    child: Row(
      // 这里放你的导航栏按钮
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Icon(Icons.home),
        Icon(Icons.search),
        Icon(Icons.person),
      ],
    ),
  ),
),

这样修改后，你的CustomPainter绘制的渐变导航栏就会是透明背景，不会有白色底色啦～

内容的提问来源于stack exchange，提问作者نعمان منذر محمود الجميلي