I just updated my code in Flutter to use TextButton instead of old FlatButton
. I can't figure out how to set width and height of a button though.
I got two problems. First one is that I have this icon Button now:
TextButton.icon( label: Container(), style: TextButton.styleFrom(padding: EdgeInsets.all(0), backgroundColor: Colors.black26), icon: Icon(Icons.share, color: Theme.of(context).primaryColor), onPressed: () {}),
I can't figure out how to get rid of the padding on the left and the right. Although I did set the padding inside the style to zero.
My Second Problem is a button that I had like this:
ButtonTheme( materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, height: 10, minWidth: 15, padding: EdgeInsets.only(top: 5, bottom: 5, right: 5, left: 5), child: FlatButton( color: Colors.white.withOpacity(0.9), child: <MyChild>, onPressed: () {}, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(12.0), side: BorderSide( color: condition ? Theme.of(context).primaryColor : widget.color != null ? widget.color : Colors.black54, width: 0.5)), )); }
Now I updated my code to this:
OutlinedButton( style: OutlinedButton.styleFrom( tapTargetSize: MaterialTapTargetSize.shrinkWrap, padding: EdgeInsets.only(top: 0, bottom: 0, right: 5, left: 5), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), side: BorderSide( width: 0.5, color: condition ? Theme.of(context).primaryColor : widget.color != null ? widget.color : Colors.black54), primary: Colors.white.withOpacity(0.9), ), child: <MyChild>, onPressed: () {})
But it looks like this now: The padding on top/bottom is too much but I can't figure out how to minimize it.
Any advice? Thank you!
Edit: I tried to use OutlinedButtonTheme but this did not allow me to set a height etc.
43 Answers
Flutter TextButton
is the new button. Since Flutter 2.0 FlatButton is deprecated.
Example of how to use this button with custom styles. This is a back button with an icon. It has a wide pressable area and alignment to left according to design.
For inner padding just use Padding
widget in the child property - it gives you consistent style for any String length.
TextButton( onPressed: () => Navigator.pop(context), style: TextButton.styleFrom( padding: EdgeInsets.zero, minimumSize: Size(50, 30), tapTargetSize: MaterialTapTargetSize.shrinkWrap, alignment: Alignment.centerLeft), child: Icon( CupertinoIcons.back, color: Colors.black, size: 18, ), ),
For those who are curious about tapTargetSize: MaterialTapTargetSize.shrinkWrap,
property - more info is here https://stackoverflow.com/a/71841707/7198006
You need to set three attributes: minimumSize
, padding
and tapTargetSize
TextButton( onPressed: (){}, child: Icon(Icons.delete, color: Colors.black54), style: TextButton.styleFrom( minimumSize: Size.zero, padding: EdgeInsets.zero, tapTargetSize: MaterialTapTargetSize.shrinkWrap, ), )
Edit:
I have added some padding in my code, and it looks good.
padding: EdgeInsets.fromLTRB(10.0, 3.0, 10.0, 3.0),
1Okay, I just figured it out. One need to set the minimumSize
attribute.
OutlinedButton.styleFrom( minimumSize: Size(widthValue, heightValue), )
This was what made my Buttons bigger than I wanted.
ncG1vNJzZmirpJawrLvVnqmfpJ%2Bse6S7zGiorp2jqbawutJobW9qaWaFdIKOn6OurKSav27AxLGrm62kqbyvedGepKiulWK9orDDoqWgZZGjsW61zaecq2WglrGltc2g