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

ネコニウム研究所

PCを利用したモノづくりに関連する情報や超個人的なナレッジを掲載するブログ

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

2024-3-27 | ,

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';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: const TextButtonExpandSample1()
      )
    )
  );
}

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)),
            ),
          ),
        ),
      ),
    );
  }
}

まとめ(感想文)

なんでもかんでもSizedBoxで解決だ!