Search code examples
flutterflutter-layout

How to change the Flutter TextButton height?


This is the output:

enter image description here

  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');
                      },
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
    }

     }

Solution

  • 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"),
                            ),
                          ),
                        ),
                      ],
                    ),