flutter如何实现凹陷效果

在Flutter中如何实现类似凹陷的UI效果？我看到一些设计稿需要让控件看起来像是被按下去的感觉，类似于内阴影或者凹槽的效果。尝试过BoxShadow但只能实现凸起效果，不知道有没有专门的方法可以实现凹陷风格？最好能提供简单的代码示例，谢谢！

2 回复

在Flutter中实现凹陷效果（内阴影）可以通过以下方法：

  1. 使用BoxDecoration的boxShadow：
Container(
  decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.white,
        offset: Offset(-3, -3),
        blurRadius: 5,
        spreadRadius: 0,
      ),
      BoxShadow(
        color: Colors.black12,
        offset: Offset(3, 3),
        blurRadius: 5,
        spreadRadius: 0,
      ),
    ],
  ),
)
  1. 使用Neumorphic风格包： 安装flutter_neumorphic包，更简单实现拟物化设计：
Neumorphic(
  style: NeumorphicStyle(
    depth: -5, // 负值实现凹陷
    color: Colors.grey[300],
  ),
  child: YourWidget(),
)

第一种方法通过两个相反方向的阴影（亮色左上，暗色右下）模拟凹陷。第二种使用现成组件，调节depth为负值即可。

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


在Flutter中实现凹陷效果可以通过以下几种方式：

1. 使用BoxDecoration的阴影

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.grey[300],
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.grey[500]!,
        offset: Offset(4, 4),
        blurRadius: 15,
        spreadRadius: 1,
      ),
      BoxShadow(
        color: Colors.white,
        offset: Offset(-4, -4),
        blurRadius: 15,
        spreadRadius: 1,
      ),
    ],
  ),
)

2. 使用Neumorphic包（推荐）

首先添加依赖：

dependencies:
  flutter_neumorphic: ^3.2.0

使用示例：

Neumorphic(
  style: NeumorphicStyle(
    depth: -5, // 负值表示凹陷
    color: Colors.grey[300],
  ),
  child: Container(
    width: 200,
    height: 200,
    child: Center(child: Text('凹陷效果')),
  ),
)

3. 自定义绘制

CustomPaint(
  size: Size(200, 200),
  painter: _InsetPainter(),
)

class _InsetPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.grey[300]!
      ..style = PaintingStyle.fill;
    
    final shadowPaint = Paint()
      ..color = Colors.black26
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, 4);
    
    canvas.drawRRect(
      RRect.fromRectAndRadius(
        Rect.fromLTWH(0, 0, size.width, size.height),
        Radius.circular(20),
      ),
      paint,
    );
  }
  
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

推荐使用flutter_neumorphic包，它提供了丰富的拟物化设计组件，包括凹陷、凸起等多种效果，使用简单且效果美观。

回到顶部