【Flutter】TextButtonを親の横幅いっぱいに広げる

FlutterでTextButtonを親の横幅いっぱいに広げたい！

概要

今回の記事では、FlutterでTextButtonを親の横幅いっぱいに広げる手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

width: double.infinityしたSizedBoxの中にTextButtonを配置することでTextButtonを親の横幅いっぱいに広げることができる。

import 'package:flutter/material.dart';

class TextButtonExpandSample1 extends StatelessWidget {
  const TextButtonExpandSample1({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: SizedBox(
          width: double.infinity,
          child: TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Colors.blue,
              shape: const RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(4)),
              ),
              padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
            ),
            onPressed: () => {},
            child: const Padding(
              padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
              child: Text("Text Button",
                  style: TextStyle(fontSize: 16.0, color: Colors.white)),
            ),
          ),
        ),
      ),
    );
  }
}