How to change the Flutter TextButton height?

Question

This is the output:

1. I try to make an app but when I use the TextButton , I get the space between two Buttons
2. I need one by one without space
3. If I use the Expanded Widget, ScrollChildView doesn't work
4. I try but I can't clear this stuff.
5. I try to make this type of TextButton .

Anyone know or have any idea about this?

    import "package:flutter/material.dart";
    import 'package:audioplayers/audio_cache.dart';

    class Account extends StatefulWidget {
    Account({Key key}) : super(key: key);

    @override
    _AccountState createState() => _AccountState();
    }

    class _AccountState extends State<Account> {
    @override
    Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Stack(
            children: [
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    TextButton(
                      child: Container(
                        child: Text(
                          'One',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.red),
                      ),
                      onPressed: () {
                        final player = AudioCache();
                        player.play('note1.wav');
                      },
                    ),
                    SizedBox(
                      height: 1,
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Two',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.green),
                      ),
                      onPressed: () {
                        final player = AudioCache();
                        player.play('note2.wav');
                      },
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Three',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.blue),
                      ),
                      onPressed: () {
                        final player = AudioCache();
                        player.play('note3.wav');
                      },
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Four',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.grey),
                      ),
                      onPressed: () {
                        final player = AudioCache();
                        player.play('note4.wav');
                      },
                    ),
                    TextButton(
                      child: Container(
                        child: Text(
                          'Five',
                          style: TextStyle(color: Colors.white, fontSize: 10),
                        ),
                      ),
                      style: ButtonStyle(
                        backgroundColor:
                            MaterialStateProperty.all<Color>(Colors.purple),
                      ),
                      onPressed: () {
                        final player = AudioCache();
                        player.play('note5.wav');
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
    }

     }

Answer 1

You just wrap your text button with the SizedBox and set height and width as follows:

SizedBox(
  height: 30,
  width: 150,
  child: TextButton(...),
)

Answer 2

• Full available height:

   SizedBox( height: double.infinity, // <-- match_parent child: TextButton(...) )

• Specific height:

   SizedBox( height: 100, // <-- Your height child: TextButton(...) )

Answer 3

In Flutter 2.0, you can set the height of the TextButton directly without depending on other widgets by changing the ButtonStyle.fizedSize :

TextButton(
  child: Text('Text Button'),
  style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
),

If you want to modify all TextButton s, put it in the ThemeData like below:

return MaterialApp(
  theme: ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(fixedSize: Size.fromHeight(150)),
    ),
  ),

Live Demo

Answer 4

use the following to even add your preferred size as well

N/B: child sized box is the main child widget inside Padding widget

Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(30.0),
                      child: SizedBox(
                        height: 60,
                        width: 200,
                        child: ElevatedButton.icon(
                          onPressed: () {
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => RegistrationMenu()));
                          },
                          style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.red.shade800),
                          ),
                          icon: Icon(Icons.person_add_alt_1_rounded, size: 18),
                          label: Text("Register Users"),
                        ),
                      ),
                    ),
                  ],
                ),

Answer 5

Wrap the TextButton in an "Expanded" Widget.

          Expanded(
            child: TextButton(
              style: TextButton.styleFrom(
                backgroundColor: Colors.red,
                padding: EdgeInsets.zero,
              ),
              child: const Text(''),
              onPressed: () {
                playSound(1);
              },
            ),
          ),

Answer 6

Another solution would be wrapping with ConstrainedBox and using minWidth & minHeight

properties.

---

ConstrainedBox(
  constraints:BoxConstraints(
    minHeight:80,
    minWidth:200
    ),
  child:TextButton(..)
)

Answer 7

it's simple

TextButton(
    style: ButtonStyle(
      fixedSize: MaterialStateProperty.all<Size>(
        // width : double.maxFinite
        // height: 56.0
        const Size(double.maxFinite, 56.0),
      
      ),
       // fill color
      backgroundColor: MaterialStateProperty.all<Color>(
      Theme.of(context).primaryColorDark,
      ),

    ),
    onPressed: (){
      // todo: action
    },
    child: Text(
      'button name',
    ),
  );

Answer 8

TextButton(
onPressed: _submitOrder,
child: Padding(
padding: EdgeInsets.only(left: 20, right: 20),
child: Text("Raise")),
style: ButtonStyle(
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(50)),
side: BorderSide(color: Colors.green)))),
)

Answer 9

TextButton(
  style: ButtonStyle(
    tapTargetSize: MaterialTapTargetSize.shrinkWrap
  ),
  child: Text(''),
);