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

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:

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

/* #White */

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

CodePudding user response：

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

CodePudding user response：

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