【Flutter】Flatbutton内にwidget配置したらサイドスペースができてしまう

はじめに

Flatbuttonを配置して、その中にTextとかImage.asset等のwidgetを配置すると、
配置したwidgetのサイドに謎のスペースが出来て少し困ったので、対処方法を載せます。
(他のボタンwidgetは試していませんので、自分で試してみてください！)

開発環境

言語/フレームワーク	Version
Flutter	1.12.13+hotfix.9
Dart	2.3.1

サクッとデモ

失敗コード

例として、こんなコードを書いたとします。
300x100のFlatbuttonを作り、その中に300x100のTextを配置したものです。

main.dart

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            width: 300,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red),
            ),
            child: FlatButton(
              onPressed: () {},
              child: Container(
                width: 300,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    "ボタン",
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

↓実際に実機にbuildしたものがこちら↓ (写真の赤枠はFlatbutton、青の長方形がText部分です。)

成功コード

サイドスペースが出来てしまう理由としては、Flatbuttonウィジェットがデフォルトでpaddingかけてしまうらしいので、

padding: EdgeInsets.all(0.0),

を指定してあげればおkです。

↓実機で見てみても、ちゃんとピッタリ重なりましたね。↓

全体コード

これが完成コードです。

main.dart

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Container(
            width: 300,
            height: 100,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.red),
            ),
            child: FlatButton(
              padding: EdgeInsets.all(0.0), //追加したところ
              onPressed: () {},
              child: Container(
                width: 300,
                height: 100,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    "ボタン",
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

結果

解決したらなんだこんなことかよ！って思うよね(全部とは言わない)