【Flutter】ContainerやButtonウィジェット同士の位置を詰めたいです

Question

前提

ログイン画面を作成しているのですが、利用規約（TextButtonウィジェット）とプライバシーポリシー（TextButtonウィジェット）同士がどうしても離れてしまします。
ネットで調べたのですが、余白を開ける方法や、画面の端につめるなどの方法しか見つからず、二つのウィジェットの位置を詰める(近づける)方法はわからなかったので質問させていただきます。
アドバイスいただけたら幸いです。

該当のソースコード

import 'package:ex_diary/new_account.dart';
import 'package:ex_diary/privacy_policy.dart';
import 'package:ex_diary/terms_of_use.dart';
import 'package:flutter/material.dart';
import 'login.dart';

void main() async {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key});
  @override
  State<MyApp> createState() => LoginTransit();
}

class LoginTransit extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    final double deviceHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: Colors.orangeAccent,
      body: Center(
        child: Column(
          children: <Widget>[
            SizedBox(
              height: deviceHeight * 0.3,
            ),
            Container(
              alignment: Alignment.center,
              child: Text('タイトルへようこそ'),
            ),
            SizedBox(
              height: deviceHeight * 0.2,
            ),
            Container(
              child: TextButton(
                child: Text("アカウント作成"),
                onPressed: () {
                  // ログイン画面へ
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => NewAccount()));
                },
              ),
            ),
            // SizedBox(
            //   height: deviceHeight * 0.1,
            // ),
            Container(
              child: TextButton(
                child: Text("ログイン"),
                onPressed: () {
                  // ログイン画面へ
                  Navigator.push(context,
                      MaterialPageRoute(builder: (context) => login()));
                },
              ),
            ),
            SizedBox(
              height: deviceHeight * 0.2,
            ),
            const Divider(height: 0),
            TextButton(
              child: Text(
                "利用規約",
                style: TextStyle(
                  decoration: TextDecoration.underline,
                ),
              ),
              onPressed: () {
                // 利用規約画面へ
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => TermsOfUse()));
              },
            ),
            TextButton(
              child: Text(
                "プライバシーポリシー",
                style: TextStyle(
                  decoration: TextDecoration.underline,
                ),
              ),
              onPressed: () {
                // プライバシーポリシー画面へ
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => PrivacyPolicy()));
              },
            ),
          ],
        ),
      ),
    );
  }
}

試したこと

・styleFormでminimumISizeを設定
・Positioned
・Align

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

[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-arm, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.73.0)

Answer 1

「flutter textbutton padding」でググり、トップに出てきたページ
https://crieit.net/posts/Flutter-TextButton
に掲載されている方法ですが、TextButtonに以下のスタイルを適用するとpaddingが小さくなります。

style: ButtonStyle(
        padding: MaterialStateProperty.all(EdgeInsets.zero),
        minimumSize: MaterialStateProperty.all(Size.zero),
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),

Dart DevTools-Widget Inspectorのレイアウトを見ると各ウィジェットの位置や大きさの情報を見ることができます。

私の環境ではTextの高さが20、TextButtonのサイズが48となっていました。
そのためTextのmarginかTextButtonのpaddingのどちらかに隙間が設定されていると仮定し、それで検索をかけたところ同じような問題を抱えた人がいたのか、トップに解決を示唆するページが出ました。

Comments

[bbiiq]

回答ありがとうございます。
教えてくださったサイトで隙間を詰めることができました。ありがとうございます。