Flutter如何实现内发光效果

在Flutter中如何实现内发光效果？我尝试使用BoxShadow，但只能实现外发光。有没有什么方法可以让发光效果出现在元素内部，类似于CSS的inset box-shadow？希望能提供一个具体的代码示例或实现思路。

2 回复

Flutter中实现内发光效果，可使用BoxDecoration的boxShadow属性，设置spreadRadius为负值，并调整blurRadius和color。示例代码：

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.blue.withOpacity(0.5),
        blurRadius: 20,
        spreadRadius: -10, // 负值实现内发光
      ),
    ],
  ),
)

更多关于Flutter如何实现内发光效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现内发光效果，可以通过以下几种方式：

1. 使用BoxDecoration（推荐）

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.blue.withOpacity(0.6), // 发光颜色
        spreadRadius: -5, // 负值实现内发光
        blurRadius: 20,   // 模糊程度
        offset: Offset(0, 0),
      ),
    ],
  ),
)

2. 使用Stack叠加实现

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        boxShadow: [
          BoxShadow(
            color: Colors.blue.withOpacity(0.4),
            spreadRadius: -10,
            blurRadius: 15,
          ),
        ],
      ),
    ),
  ],
)

3. 自定义Painter实现更复杂效果

class InnerGlowPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..maskFilter = MaskFilter.blur(BlurStyle.inner, 10);
    
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(0, 0, size.width, size.height),
        Radius.circular(20),
      ),
      paint,
    );
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

// 使用
CustomPaint(
  size: Size(200, 200),
  painter: InnerGlowPainter(),
)

关键参数说明：

  • spreadRadius: 设为负值实现内发光效果
  • blurRadius: 控制发光模糊程度
  • color: 设置发光颜色和透明度

第一种方法最简单实用，能满足大部分内发光需求。

回到顶部