なぜ画面外にはみ出すのでしょうか・・・？

Question

前提・実現したいこと

Flutter初心者です。
アイコン＋テキストのついた丸ボタンを実装しようとしています。
LayoutBuilderで画面幅を取得し、その幅の比率を元に、ボタンの大きさやアイコン、フォントの大きさを設定しています。
そうすることでどんな画面サイズでも同じような大きさのボタンが並んで見えると思い、コードを書きました。

発生している問題

webブラウザで見た時にはおおむねイメージ通りの画面になったのですが、実機やエミュレーターで確認した際にボタンが画面外にはみ出てしまいました????
(横幅によって見え方が違うのだと思いますが）

以下に記述のソースコードのように、ひとつのボタンのサイズは、画面幅/4です。
幅/5　などにすればもちろん、はみ出さなくはなるのですが、そもそもなぜ一つのボタンが画面幅/4なのに、はみ出してしまうのでしょうか？
どれだけ横幅を狭めても、同じように画面内に収まると思ったのですが。
拙い質問かもしれませんが、ご教示いただけましたら大変うれしいです<(_ _)>????

該当のソースコード

import 'package:flutter/material.dart';
import 'package:welfareapp/widget.dart';
import 'package:flutter/rendering.dart';

void main() {
  debugPaintSizeEnabled = false;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
          final availableWidth = constraints.maxWidth;

          return Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 20),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    IconButtonWidget(
                      icon: Icons.accessibility,
                      color: Colors.blue[200],
                      text: 'サンプル1',
                      onPressed: () {},
                      size: availableWidth / 4,
                    ),
                    IconButtonWidget(
                      icon: Icons.baby_changing_station,
                      color: Colors.amber[200],
                      text: 'サンプル2',
                      size: availableWidth / 4,
                      onPressed: () {},
                    ),
                    IconButtonWidget(
                      icon: Icons.corporate_fare,
                      color: Colors.red[100],
                      text: 'サンプル3',
                      onPressed: () {},
                      size: availableWidth / 4,
                    ),
                  ],
                ),
              ),
            ],
          );
        }));
  }
}

import 'package:flutter/material.dart';

class IconButtonWidget extends StatelessWidget {
  const IconButtonWidget(
      {@required this.icon,
      @required this.color,
      @required this.text,
      @required this.onPressed,
      this.size});

  final IconData icon;
  final Color color;
  final String text;
  final double size;
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      style:
          ElevatedButton.styleFrom(shape: const CircleBorder(), primary: color),
      child: Container(
        width: size,
        height: size,
        alignment: Alignment.center,
        decoration: const BoxDecoration(shape: BoxShape.circle),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(icon, size: size / 2, color: Colors.white),
            Text(text,
                style: TextStyle(color: Colors.white, fontSize: size / 8)),
          ],
        ),
      ),
      onPressed: onPressed,
    );
  }
}

試したこと

LayoutBuiderの代わりにMediaQueryを使用して画面幅を取得してみましたが、ダメでした。
main.dartのRowウィジェットやColumnウィジェットの幅を狭めてみても、同じようにはみ出していました。

補足情報（FW/ツールのバージョンなど）

Flutter2.0.6
vscode使用

Answer 1

コードを見ると、IconButtonWidgetに渡しているavailableWidth / 4という値はElevatedButtonのchildに渡しているContainerのサイズに渡しています。
ElavatedButtonのサイズはchildの要素に合わせて大きくなるので、ElavatedButtonもContainerのサイズと同じavailableWidth / 4になりますが、ElavatedButtonにはdefaultでpaddingが設定されているので画面サイズが小さいとその分はみ出してしまいます。

return ElevatedButton(
      style:
          ElevatedButton.styleFrom(padding: 0, shape: const CircleBorder(), primary: color),
//padding: 0を追加

上記のように追加するとうまくおさまります。

defaultの値ですが、コード上ではelevated_button.dartの257行目あたり、以下の部分でpadding含め、ボタンのスタイルを設定してあります。

 @override
  ButtonStyle defaultStyleOf(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;

    final EdgeInsetsGeometry scaledPadding = ButtonStyleButton.scaledPadding(
      const EdgeInsets.symmetric(horizontal: 16),
      const EdgeInsets.symmetric(horizontal: 8),
      const EdgeInsets.symmetric(horizontal: 4),
      MediaQuery.maybeOf(context)?.textScaleFactor ?? 1,
    );

    return styleFrom(
      primary: colorScheme.primary,
      onPrimary: colorScheme.onPrimary,
      onSurface: colorScheme.onSurface,
      shadowColor: theme.shadowColor,
      elevation: 2,
      textStyle: theme.textTheme.button,
      padding: scaledPadding,
      minimumSize: const Size(64, 36),
      side: null,
      shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4))),
      enabledMouseCursor: SystemMouseCursors.click,
      disabledMouseCursor: SystemMouseCursors.forbidden,
      visualDensity: theme.visualDensity,
      tapTargetSize: theme.materialTapTargetSize,
      animationDuration: kThemeChangeDuration,
      enableFeedback: true,
      alignment: Alignment.center,
    );

Comments

[Neru_K]

なるほど・・・！
デフォルトでpaddingの値を持っていたのですね~！
そのような発想は、まったく持っていませんでした????
デフォルトでどんな値を持っているかということも含めて、「元のコードを確認してみる」ということがすごく大事なんですね。
とても勉強になりました。ありがとうございます！<(_ _)>