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

how to shape the divider in flutter from sharp to smooth circular on both the corners?

ave wrapped the Dividers with Containers and trying to provide border radius to clipoff the diveder edge. Edges are not circular as expected.

            Container(
              width: 135,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
              ),
              child: Divider(
                height: 25
                thickness: 5,
                color: Color(0xFFFFFFFF),
              ),
            ),

as provided in below design:
Circular Corner of Divider

position: absolute;
width: 134px;
height: 5px;
left: calc(50% - 134px/2 + 0.5px);
bottom: 8px;

/* #White */

background: #FFFFFF;
border-radius: 100px;
Tags:

2

Answers


  1. 0

    You can try to wrap Divider in Container and then do the clipping things but it would be great if you directly create a Container that behaves like Divider like this.

    You can use this divider widget:

    class DividerWidget extends StatelessWidget {
  const DividerWidget({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 10,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(100),
        color: Colors.red,
      ),
    );
  }
}
    Login or Signup to reply.
  2. 0

    Just simply add clipBehavior: Clip.hardEdge in Container as shown below .

    Container(
          width: 135,
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(100),
          ),
          child: Divider(
            height: 20,
            thickness: 5,
            color: colorwhite,
          ),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search