How to make FlatButtons the same width in Flutter

Question

I have three FlatButtons widgets in a Column widget. The FlatButtons all have a Text widget as a child. The Text widgets show three different strings 'Sök på karta', 'Sök på betyg', 'Favoriter'. These string all have different lengths, which causes the size of the FlatButtons to differ.

The code below shows the current setup. The UI produced by this setup is attached in an image below as well.

import 'package:flutter/material.dart';

class HomeView extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hitta restaurang'),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: Center(
          child: Stack(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Column(
                children: <Widget>[
              
                  FlatButton(
                      color: Colors.blue,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      padding: EdgeInsets.only(left: 50, right: 50),
                      onPressed: () {},
                      child: Text(
                        'Sök på betyg',
                        style: TextStyle(fontSize: 18, color: Colors.white),
                      )),
                  FlatButton(
                      color: Colors.blue,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      onPressed: () {},
                      padding: EdgeInsets.only(left: 50, right: 50),
                      child: Text(
                        'Sök på karta',
                        style: TextStyle(fontSize: 18, color: Colors.white),
                      )),
                  FlatButton(
                      color: Colors.blue,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      padding: EdgeInsets.only(left: 50, right: 50),
                      onPressed: () {},
                      child: Text(
                        'Favoriter',
                        style: TextStyle(fontSize: 18, color: Colors.white),
                      )),
                ],
              )
            ],
          ),
        ],
      )),
    );
  }
}

Answer 1

You can wrap you FlatButton widgets in Container widgets and set the width and height of the container. I have added a modification to your example code below:

class HomeView extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hitta restaurang'),
        centerTitle: true,
        backgroundColor: Colors.blue,
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Container(
            height: 50,
            width: 200,
            child: FlatButton(
                color: Colors.blue,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                padding: EdgeInsets.only(left: 50, right: 50),
                onPressed: () {},
                child: Text(
                  'Sök på betyg',
                  style: TextStyle(fontSize: 18, color: Colors.white),
                )),
          ),
          Container(
            height: 50,
            width: 200,
            child: FlatButton(
                color: Colors.blue,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                onPressed: () {},
                padding: EdgeInsets.only(left: 50, right: 50),
                child: Text(
                  'Sök på karta',
                  style: TextStyle(fontSize: 18, color: Colors.white),
                )),
          ),
          Container(
            height: 50,
            width: 200,
            child: FlatButton(
                color: Colors.blue,
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10)),
                padding: EdgeInsets.only(left: 50, right: 50),
                onPressed: () {},
                child: Text(
                  'Favoriter',
                  style: TextStyle(fontSize: 18, color: Colors.white),
                )),
          )
        ],
      )),
    );
  }
}

This produces the following output: