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

How to style the roundness of the corner flutter?

I’m creating a dialog and I need a rounded corners like this:

Expected result

But when I add BorderRadius to the dialog it’s not the same. Actual result:

Actual result

My code:

Dialog(
  backgroundColor: Colors.white,
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(38),
  ),
  …
),

How can I create rounded corner like first picture or style the roundness?

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    By using:

    shape: ContinuousRectangleBorder(
  borderRadius: BorderRadius.circular(64),
),

    We can get required type of border style.


  2. 0

    I think Flutter doens’t have smooth corners for rounded so try to use a package name smooth_corner

    But there is a lot more on this so try to venture others.

    Dialog example although I am using showGeneralDialog, the concept of what you want to achieve exists as an example:

    showGeneralDialog(
  context: context!,
  barrierColor: const Color(0xFF1A1919).withOpacity(0.3),
  barrierDismissible: true,
  barrierLabel: '',
  transitionDuration: const Duration(milliseconds: 360),
  transitionBuilder: (c, a, s, ch) {
    return Transform.scale(
      scale: a.value,
      child: Opacity(
        opacity: a.value,
        child: Dialog(
          alignment: Alignment.center,
          // Add a child Column to the dialog, then inside it will be a Container with rounded corners
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 200,
                height: 200,
                alignment: Alignment.center,
                decoration: ShapeDecoration(
                  shape: SmoothRectangleBorder(
                    borderRadius: BorderRadius.circular(40),
                    smoothness: 0.6,
                  ),
                  color: Colors.amber,
                ),
                child: Text(''),
              ),
            ],
          ),
        ),
      ),
    );
  },
  pageBuilder: (c, r, x0) {
    return const SizedBox.shrink();
  },
);
    Login or Signup to reply.
  3. 0

    I think you can either use clip-path or custom painter in Flutter.

    If you have the svg image of your design then you can go to this website, or if you can draw that shape then you can go this website

    It will generate all the custom painter code for you so you don’t have to worry about it.

    Login or Signup to reply.
  4. 0

    You can use ContinuousRectangleBorder instead of using smooth_corner package. It does not require any packages to be installed:

    Dialog(
  backgroundColor: Colors.white,
  elevation: 0.0,
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.circular(38.0),
  ),
  …
),
    Login or Signup to reply.
  5. 0

    You can achieve by doing this

    showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            title: const Text("Title"),
            content: const DialogContent(),
            actions: actionWidgets,
          );
        },
      );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search