CODEWITHSUNDEEP
flutterflutter-layout
Midhilaj
Midhilaj

Reputation: 4987

RoundedRectangleBorder is not working for Container widget

I need to make Container edge circle and how to do that when i try RoundedRectangleBorder it showing error

 Container(
      width: 100,height: 100,
      margin: EdgeInsets.all(10.0),
      decoration: BoxDecoration(
         color: Colors.orange,
         shape: RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(18.0),
         )
      ),
 ),

Upvotes: 8

Views: 6059

Answers (3)

Sai Kiran Katayath
Sai Kiran Katayath

Reputation: 289

The container is no longer accepting RoundedRectangledBorder as a shape, You've to use the BoxShape class only for the shape property

But still, you can achieve the desired behavior like this

Container(decoration: BoxDecoration(border: Border.all(color: Colors.purple, width:2),color:Colors.purple.withOpacity(0.2),shape:BoxShape.rectangle,borderRadius: BorderRadius.circular(12.0)),

By doing this you can give borderRadius,shape and borders as well

if you're not getting the borderRadius the you can wrap your container inside a ClipRRect() and access the borderRadius property inside the ClipRRect

Upvotes: 0

Ravinder Kumar
Ravinder Kumar

Reputation: 8010

This error suggests,

argument type RoundedRectangleBorder cannot be assigned to parameter type BoxShape

So if you want to use RoundedRectangleBorder then you have to use it inside shape parameter,

Container(
            width: 100,height: 100,
            margin: EdgeInsets.all(10.0),
                    decoration:  ShapeDecoration(
                color: Colors.orange,
              shape: RoundedRectangleBorder( // <--- use this
                borderRadius: BorderRadius.all(
                  Radius.circular(10),
                ),
              ),
            ),
       ),

Output,

enter image description here

@Anil Chauhan's approach is also correct so you can use that too.

Upvotes: 7

Anil Chauhan
Anil Chauhan

Reputation: 716

Try this: 

 Container(
     width: 100,height: 100,
     margin: EdgeInsets.all(10.0),
     decoration: BoxDecoration(
       color: Colors.orange,
       borderRadius: BorderRadius.circular(10.0)
    ),
 ),

Upvotes: 2

Related Questions