CODEWITHSUNDEEP
flutterdart
Markel Martiartu
Markel Martiartu

Reputation: 64

FlatButton child is not centered inside the button

I have a widget that displays a Text with and a FlatButton with an Icon. The problem is that the icon is not centered inside the button. enter image description here

Here's the code I'm using:

child: Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Text("Text", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),),
    Container(
      color: Colors.lightBlue,
      width: 40.0,
      child: FlatButton(onPressed: () {},
        child: Icon(Icons.edit, size: 20.0, color: Colors.white,),
        shape: CircleBorder(),
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
    )
  ],
)

Upvotes: 0

Views: 156

Answers (2)

Josteve Adekanbi
Josteve Adekanbi

Reputation: 12673

There's a default padding on FlatButton set it to EdgeInsets.zero Like this

FlatButton(
      padding: EdgeInsets.zero,
      onPressed: (){},
      child: Icon(Icons.edit)
    )

Upvotes: 1

Mouaad
Mouaad

Reputation: 191

hello you should use another type of buttons, for example:

        IconButton(
          color: Colors.lightBlue,
          icon: Icon(Icons.edit, size: 20.0, color: Colors.white,),
          onPressed: () { },
        ),

for more buttons you can see the official website : https://flutter.dev/docs/development/ui/widgets/material#Buttons

Upvotes: 0

Related Questions