skip to Main Content

How to remove internal spacing from a text button in flutter?

enter image description here

Remove the internal spacing of the button

TextButton(
            style: ButtonStyle(
                padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
                    EdgeInsets.zero),
                    tapTargetSize: MaterialTapTargetSize.shrinkWrap
              ),
              
              onPressed: () {},
              child: Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                      color: const Color(0xffF6F6F7),
                      borderRadius: BorderRadius.circular(50)),
                  child: const Padding(
                    padding: EdgeInsets.all(12.0),
                    child: Icon(CupertinoIcons.search),
                  ))),

2

Answers


  1. Why are you trying to use a text button, It seems you are supposed to use an icon button here.
    The text button itself shows no boundary (shows shadow only on hover), there you can set the padding to any value below 4 to reduce the gap. Although usually it’s not recommended to place anything that close to a button.

    Login or Signup to reply.
  2. As long as the child has fixed size, you can remove padding through making the TextButton to be as big as its child:

    just set :

    minimumSize: MaterialStatePropertyAll(Size(50,50)),
    

    note: keep padding set to zero

    Hope it helps you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search