Flutter padding between border and widget

Question

I'm trying to use Flutter to create a card widget with an icon and a title. But i'm not able to add some margin between border of the cards and the widget.

Here's my card code:

class MyCard extends StatelessWidget{
 MyCard({this.title, this.icon});
 final Widget title;
 final Widget icon;
 @override
 Widget build(BuildContext context) {
 return new Container(
 padding: EdgeInsets.only(bottom: 20.0),
 child: new Card(
 child: new Row(
 children: <Widget>[
 this.icon,
 new Container(
 width: 20.0, //I also don't know if this is legal
 ),
 this.title
 ]
 )
 )
 );
 }
}

That's the result, but I'd like to have more padding inside the card in order to have taller cards and the icons more on the right.

Result

• boformer: Regarding the "I also don't know if this is legal" comment. It's totally ok, the easiest way to add spaces between Row items. You can also used SizedBox instead of Container (internally the Container will also creates a SizedBox). As seen in the answer of @ap14

Answer 1

You can wrap widgets in card inside Padding widget or you can use container's padding or margin property to achieve desired layout.

P.S. I have added padding at different levels. Remove or add more padding according to your need.

Code:

class MyCard extends StatelessWidget{
 MyCard({this.title, this.icon});
 final Widget title;
 final Widget icon;
 @override
 Widget build(BuildContext context) {
 return new Container(
 padding: EdgeInsets.only(bottom: 20.0),
 child: new Card(
 child: Padding(
 padding: EdgeInsets.symmetric(vertical: 2.0),
 child: new Row(
 children: <Widget>[
 Padding(
 padding: EdgeInsets.symmetric(horizontal: 5.0),
 child: this.icon,
 ),
 new SizedBox(
 width: 20.0,
 ),
 Container(
 padding: EdgeInsets.symmetric(vertical: 0.5, horizontal: 1.0),
 margin: EdgeInsets.all(2.0),
 child: this.title,
 )
 ]
 ),
 )
 )
 );
 }
}

Answer 2

class MyCard extends StatelessWidget{
 MyCard({this.title, this.icon});
 final Widget title;
 final Widget icon;
 @override
 Widget build(BuildContext context) {
 return new Container(
 padding: EdgeInsets.only(bottom: 20.0),
 child: new Card(
 child: new Row(
 children: <Widget>[
// Change Your Code Here
 new Padding(padding: new EdgeInsets.only(left: 8.0),child: this.icon,),
 new Container(
 width: 20.0, //I also don't know if this is legal
 ),
 this.title
 ]
 )
 )
 );
 }
}

• boformer: Not a good solution. This doesn't add padding on the right of the title
• Sher Ali: @boformer it's just a solution you can decorate it more as per your requirement :)

Answer 3

Container(
 padding: const EdgeInsets.all(1),
 decoration: BoxDecoration(
 border: Border.all(
 color: Theme.of(context).accentColor, width: 3),
 borderRadius: BorderRadius.circular(20),
 ),
 child: Container(
 margin: const EdgeInsets.all(2),
 padding: const EdgeInsets.all(15),
 decoration: BoxDecoration(
 borderRadius: BorderRadius.circular(15),
 color: Theme.of(context).accentColor,
 ),
 child: Text('Evcil Hayvanlar',
 style: Theme.of(context)
 .textTheme
 .button
 .copyWith(color: Colors.white, fontSize: 24)),
 ))

You can try this way also