Question 76696 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter, how to remove spaces around text in a TextButton?

As titled, padding: EdgeInsets.zero doesn’t seem to work.
enter image description here

Container(
  height: 30,
  width: 60,
  padding: EdgeInsets.zero,
  decoration: BoxDecoration(
      color: Colors.green, borderRadius: BorderRadius.circular(6)),
  child: Padding(
    padding: EdgeInsets.zero,
    child: TextButton(
      child: Text('Login', style: TextStyle(fontSize: 14, color: Colors.white)),
      onPressed: () {},
    ),
  ),
),
Tags:

2

Answers


  1. 0

    Try this: Wrap your container in this

    MediaQuery.removePadding(
  context:context,
  removeTop:true,
  removeBottom:true,
  child: Container(....)
)
    Login or Signup to reply.
  2. 0

    From your comment:

    The text Login doesn’t fully shown, I would like to maintain the size of the green box, while making the size of the text inside as big as possible.

    You can do that like this. No need for Containers

    ElevatedButton(
  onPressed: () {},
  child: Text('Login', style: TextStyle(fontSize: 18)),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.green),
    padding: MaterialStateProperty.all(EdgeInsets.zero),
  ),
),

    You can also change the minimum size of the widget by adding minimumSize to the ButtonStyle. For example:

    minimumSize: MaterialStateProperty.all(Size(10, 10)),

    This will make the minimum size 10×10, if your text size is small enough.
    But keep in mind that you need to be able to easily press the button too.

    Also check this:
    https://api.flutter.dev/flutter/material/ButtonStyle-class.html

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search