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

how to decrease textbutton height Flutter

How can I decrease the height of the text button? If I force a small height for him it works. But I want the height to be just the height of the text letter. It is possible? I tried wrapping it in an Expanded but it doesn’t work.

Container(
            color: Colors.amberAccent[100],
            child: TextButton(
              onPressed: () {},
              child: const Text('Visualizar',
                  style: TextStyle(color: Colors.black)),
              style: TextButton.styleFrom(
                padding: EdgeInsets.zero,
              ),
            ),
          )

as it is now in the code:

enter image description here

How I want it to look:

enter image description here

Tags:

3

Answers


  1. 0

    you can set the width & height of textbutton as follows

    TextButton(
            style: TextButton.styleFrom(
                fixedSize: const Size(300, 100),
                foregroundColor: Colors.red,
                backgroundColor: Colors.yellow,
                textStyle: const TextStyle(fontSize: 20)),
            onPressed: () {},
            child: const Text('TextButton width & height'),
          ),

    or just set height only like this

    TextButton(
  child: Text('Text Button'),
  style: TextButton.styleFrom(fixedSize: Size.fromHeight(350)),
),
    Login or Signup to reply.
  2. 0

    You can create simple custom buttons with InkWell. This way its height is same as your Text widget’s height.

    class CustomButton extends StatelessWidget {
  const CustomButton({super.key, required this.child, required this.onPressed});

  final Widget child;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onPressed,
      child: child,
    );
  }
}
    Login or Signup to reply.
  3. 0

    You can also wrap your TextButton with a fixed height/width SizedBox/Container

    Container example:

    Container(
        height: 20.0, // whatever height you wanna give
        width: 80.0,  // whatever width you wanna give
        color: Colors.amberAccent[100],
        child: TextButton(
          onPressed: () {},
          child: const Text('Visualizar',
              style: TextStyle(color: Colors.black)),
          style: TextButton.styleFrom(
            padding: const EdgeInsets.all(4.0),
          ),
        ),
      )

    SizedBox(It doesn’t have the color argument, that’s why I removed it from the below code) example:

    SizedBox(
        height: 20.0, // whatever height you wanna give
        width: 80.0,  // whatever width you wanna give
        child: TextButton(
          onPressed: () {},
          child: const Text('Visualizar',
              style: TextStyle(color: Colors.black)),
          style: TextButton.styleFrom(
            padding: const EdgeInsets.all(4.0),
          ),
        ),
      )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search