CODEWITHSUNDEEP
flutterdart
Alexei
Alexei

Reputation: 15726

Not rounded Container widget

I need to rounded corners of Container widget (red background)

Snippet:

 new Stack(children: [
                          new ClipRRect(
                            borderRadius: BorderRadius.all(Radius.circular(
                                Constants.ROUNDED_CORNER_RADIUS)),
                            child: new Container(
                                margin: const EdgeInsets.fromLTRB(
                                    Constants.DEFAULT_MARGIN,
                                    Constants.HALF_DEFAULT_MARGIN,
                                    Constants.DEFAULT_MARGIN,
                                    Constants.HALF_DEFAULT_MARGIN),
                                height: 40.0,
                                width: 72.0,
                                color: Colors.red),
                ),

Result:

enter image description here

Why not rounded widget Container with red background?

Upvotes: 0

Views: 45

Answers (1)

Josteve Adekanbi
Josteve Adekanbi

Reputation: 12713

The problem is the margin has cut out where the ClipRRect will clip

It is clipping it but you can't see it because of the margin

You can use the borderRadius property in the decoration of the Container like this

Container(
            margin: EdgeInsets.symmetric(horizontal: 40),
            child: Container(
              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
              width: 72,
              height: 40,
              decoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(10)
              ),
            ),
          )

Upvotes: 1

Related Questions