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

how to achieve this view using dialog or widget : flutter

I’m working on a view which have a list of coupon and when I select any coupon then a dialog will appear where we can check coupon details. My query is how to show a dialog which is a half circle cut from both side in that dialog. currently I’m doing using a stack with positioned children with background color, but it is not as I want.
I’m also share a screen shot for what I’m looking for. It could be a great help for methis is what I'm looking for

Tags:

2

Answers


  1. 0

    You can place the sliced image with the half circle in the Column in your Stack

    Column(
  children: [
    Container(
    width: double.infinity,
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(50),
        topRight: Radius.circular(50),
      ),
    ),
    child: //Contents of top fold,
    ),
    Container(
      padding: const EdgeInsets.all(0),
      width: double.infinity,
      child: //Image with half circle
    ),
    Container(
    width: double.infinity,
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(50),
        bottomRight: Radius.circular(50),
      ),
    ),
    child: //Contents of bottom fold,
    ),
  ],
),
    Login or Signup to reply.
  2. 0

    Create one custom UI and add that into your container.
    Here is UI part

    
class DolDurmaClipper extends CustomClipper<Path> {
  final double holeRadius;

  DolDurmaClipper({required this.holeRadius});

  @override
  Path getClip(Size size) {
    var bottom = size.height / 2;
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(0.0, size.height - bottom - holeRadius)
      ..arcToPoint(
        Offset(0, size.height - bottom),
        clockwise: true,
        radius: Radius.circular(1),
      )
      ..lineTo(0.0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, size.height - bottom)
      ..arcToPoint(
        Offset(size.width, size.height - bottom - holeRadius),
        clockwise: true,
        radius: Radius.circular(1),
      );

    path.lineTo(size.width, 0.0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(DolDurmaClipper oldClipper) => true;
}

    You have to use this class in your widget

    
Widget couponWidget() {
  return Container(
    height: //Add height as per requirement
    width: //Add width as per requirement,
    margin: const EdgeInsets.only(left: 20, right: 20, top: 20),
    child: ClipPath(
      clipper: DolDurmaClipper(holeRadius: 20),
      child: Container(
        decoration: BoxDecoration(
            color: Colors.black, borderRadius: BorderRadius.circular(10)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const SizedBox(height: 15),// Top widgets
            Padding( //Separater line
              padding: const EdgeInsets.only(left: 20, right: 20),
              child: Container(
                color: Colors.grey,
                height: 2,
              ),
            ),
            const SizedBox(height: 32),// Bottom widgets
          ],
        ),
      ),
    ),
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search