CODEWITHSUNDEEP
flutterflutter-layout
Deyvi Tabora
Deyvi Tabora

Reputation: 109

How to add border radius to a container in flutter?

I'm trying to add border radius to my container but can't get it to work for me.

Container(
   color: ColorPallete.secondColor[50],
   height: 400.0,
   width: 500.0,
   padding: const EdgeInsets.all(10.0),
   decoration: BoxDecoration(
   borderRadius: BorderRadius.circular(10.0),
   ),
   child: SvgPicture.asset(
     'assets/images/svg/megacategory/art__grocery.svg',
   ),
),

Console error

Upvotes: 1

Views: 1700

Answers (3)

Rajesh Kumar
Rajesh Kumar

Reputation: 1

Container( height: 200.0, width: 300.0, padding: const EdgeInsets.all(10.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10.0), color: Colors.green[50], ), child: AssetImage( 'assets/images/index.png', ), ),

Upvotes: -1

Bensal
Bensal

Reputation: 4130

If you have decoration property in the container, you are supposed to pass the color within the decoration and not the container directly.

Container(
//Not allowed color: ColorPallete.secondColor[50],
height: 400.0,
width: 500.0,
padding: const EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: ColorPallete.secondColor[50], //place it here
borderRadius: BorderRadius.circular(10.0),
),
child: SvgPicture.asset(
 'assets/images/svg/megacategory/art__grocery.svg',
),
),

Upvotes: 0

Dbono.dev
Dbono.dev

Reputation: 156

the error that you are receiving is that whenever you have a decoration for a container you need to make sure that color parameter is in the decoration instead of just the container. Below I have changed your code to not produce that error message, if you are still having issues getting the border radius to work after this change let me know!

Container(
   height: 400.0,
   width: 500.0,
   padding: const EdgeInsets.all(10.0),
   decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(10.0),
       color: ColorPallete.secondColor[50],
   ),
   child: SvgPicture.asset(
     'assets/images/svg/megacategory/art__grocery.svg',
   ),
),

Upvotes: 3

Related Questions