Question 77032 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I create a circle outline with a shadow in Flutter?

I need a circular OutlinedButton with an elevation but that property is not available for that widget. I’m trying to create a circle outline with a shadow and wrap it in a GestureDetector to achieve the same behavior but all options that I have tried have the shadow all the way to the center of the circle or don’t have any shadow in the inner part of the circle.

This is the output that I’m looking for:

circle with shadow

How can I achieve this?

Tags:

6

Answers


  1. 0

    wrap the OutlinedButton in a Container and apply a BoxShadow to the Container.

    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"),
    ),
  ),
)
    Login or Signup to reply.
  2. 0 
     Widget build(BuildContext context) {
  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"),
      ),
    ),
  ),
);
}
    Login or Signup to reply.
  3. 0

    Try This Code:

      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,
    ),
  ),
);

    }
    enter image description here

    Login or Signup to reply.
  4. 0

    you can take IconButton and take circle_outlined as icon and give shadow as per your need:

    IconButton(
                    onPressed: () {},
                    iconSize: 50,
                    icon: const Icon(
                      Icons.circle_outlined,
                      shadows: [Shadow(blurRadius: 20)],
                    ),
                    color: Colors.blue,
                  ),
    Login or Signup to reply.
  5. 0

    Try below code hope its help to you. I have try same like as your shared image

      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,
          ),
        ],
      ),
    ),
  ),
),

    Result-> image

    Login or Signup to reply.
  6. 0

    you can use a standard OutlinedButton widget with a modified shape property:

    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);
    }
  }
}

    now you can use it as follows:

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

    notice that all params are optional and contain some default values

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search