dart 如何在Flutter中创建带有阴影的圆形轮廓?

okxuctiv  于 2023-02-01  发布在  Flutter
关注(0)|答案(7)|浏览(236)

我需要一个带有标高的圆形OutlinedButton,但是该属性对该小部件不可用。我尝试创建一个带有阴影的圆形轮廓,并将其包裹在GestureDetector中以实现相同的行为,但是我尝试过的所有选项都将阴影一直放置到圆形的中心,或者在圆形的内部没有任何阴影。
这是我正在寻找的输出:

我怎样才能做到这一点?

bxjv4tth

bxjv4tth1#

    • 请尝试此代码:**
Widget build(BuildContext context) {
return Scaffold(
  body:  Container(
    alignment: Alignment.center,
    padding: EdgeInsets.all(20),
    child: IconButton(
      onPressed: () {},
      iconSize: 200,
      icon: const Icon(
        Icons.circle_outlined,
        shadows: [Shadow(blurRadius: 70)],
      ),
      color: Colors.blue,
    ),
  ),
);

}

t5zmwmid

t5zmwmid2#

您可以使用IconButton和 *circle_outlined作为图标 *,并根据您的需要给予阴影:

IconButton(
                    onPressed: () {},
                    iconSize: 50,
                    icon: const Icon(
                      Icons.circle_outlined,
                      shadows: [Shadow(blurRadius: 20)],
                    ),
                    color: Colors.blue,
                  ),
jgwigjjp

jgwigjjp3#

尝试下面的代码,希望它对你有帮助。我已经尝试一样,你的共享图像

Container(
  alignment: Alignment.topCenter,
  padding: const EdgeInsets.all(20),
  child: Container(
    height: 200,
    width: 200,
    decoration: BoxDecoration(
      color: Colors.transparent,
      shape: BoxShape.circle,
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.9),
          spreadRadius: 6, //change on your need
          blurRadius: 10,
          offset: const Offset(0, 3),
        )
      ],
    ),
    child: Container(
      height: 200,
      width: 200,
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.transparent,
        border: Border.all(color: Colors.blue, width: 5),
        boxShadow: const [
          BoxShadow(
            color: Colors.black26,
          ),
          BoxShadow(
            color: Colors.white,
            spreadRadius: -10.0, //change on your need
            blurRadius: 12.0,
          ),
        ],
      ),
    ),
  ),
),

结果-〉

dauxcl2d

dauxcl2d4#

将OutlinedButton Package 在容器中并将BoxShadow应用于容器。

GestureDetector(
  onTap: () {},
  child: Container(
    width: 100.0,
    height: 100.0,
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      boxShadow: [
        BoxShadow(
          color: Colors.black26,
          blurRadius: 10.0,
          offset: Offset(0, 10),
        ),
      ],
    ),
    child: OutlinedButton(
      onPressed: () {},
      child: Text("Button"),
    ),
  ),
)
scyqe7ek

scyqe7ek5#

一个蓝色的Container(带有一个BoxShape.circle),另一个Container作为一个白色的子容器,但是有一个小的边距,所以在这个边距中可以放置子容器的BoxShadow

i7uaboj4

i7uaboj46#

小部件构建(BuildContext上下文){

return Scaffold(
  
  backgroundColor: Colors.white,
  
  body: InkWell(
    
    onTap: () {},
    
    child: Container(
      
      height: 150,
      
      width: 150,
      
      decoration: BoxDecoration(
        
          color: Colors.transparent,
          
          borderRadius: const BorderRadius.all(
            
            Radius.circular(100),
            
          ),
          border: Border.all(
              color: Color(0xff00AEEF), 
              width: 3.w),
          
          boxShadow: [
            
            BoxShadow(
              
              color: Colors.grey.withOpacity(0.9),
              
              spreadRadius: 4,
              
              blurRadius: 10,
              
              offset: Offset(0, 3),
              
            )
          ]),
      child: OutlinedButton(
        
        onPressed: () {},
        
        child: Text("You can add Text and icon"),
      ),
    ),
  ),
);

}

gxwragnw

gxwragnw7#

你可以使用一个标准的OutlinedButton小工具,并修改shape属性:

class RingBorder extends CircleBorder {
  const RingBorder({
    this.thickness = 12,
    this.color = Colors.blue,
    this.shadowColor = Colors.black,
    this.shadowRadius = 6,
    this.paintShadowCounter = 1,
  });

  final double thickness;
  final Color color;
  final Color shadowColor;
  final double shadowRadius;
  final int paintShadowCounter;

  @override
  CircleBorder copyWith({BorderSide? side, double? eccentricity}) => this;

  @override
  void paint(ui.Canvas canvas, ui.Rect rect, {ui.TextDirection? textDirection}) {
    final path = Path()
      ..fillType = PathFillType.evenOdd
      ..addOval(Rect.fromCircle(center: rect.center, radius: rect.shortestSide / 2 - shadowRadius))
      ..addOval(Rect.fromCircle(center: rect.center, radius: rect.shortestSide / 2 - shadowRadius - thickness));

    final paint = Paint()..color = color;
    canvas.drawPath(path, paint);

    paint
      ..color = shadowColor
      ..maskFilter = MaskFilter.blur(BlurStyle.outer, shadowRadius);
    for (int i = 0; i < paintShadowCounter; i++) {
      canvas.drawPath(path, paint);
    }
  }
}

现在,您可以按如下方式使用它:

OutlinedButton(
  style: ButtonStyle(
    shape: MaterialStatePropertyAll(RingBorder(
      color: Colors.orange,
      paintShadowCounter: 4,
      shadowRadius: 12,
    )),
  ),
  onPressed: () => print('pressed'),
  child: Container(),
);

请注意,所有参数都是可选的,并且包含一些默认值

相关问题