how to shape divider from corners-CodePudding

Dividers are not coming circular as expected

Container(
              width: 135,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
              ),
              child: Divider(
                height: 20,
                thickness: 5,
                color: colorwhite,
              ),
            ),

CodePudding user response：

You can use this divder 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,
      ),
    );
  }
}

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