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

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

概要

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

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

TextButtonの場合は、width: double.infinityしたSizedBoxを使って親の横幅いっぱいに広げることができたが、DropdownButtonではこの方法でサイズを変えることはできなかった。

DropdownButtonの場合は、isExpandedプロパティをtrueにするだけで親の横幅いっぱいに広げることができる。

import 'package:flutter/material.dart';

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

class DropdownButtonExpandSample1 extends StatefulWidget {
  const DropdownButtonExpandSample1({super.key});
  @override
  DropdownButtonExpandState createState() => DropdownButtonExpandState();
}

class DropdownButtonExpandState extends State<DropdownButtonExpandSample1> {
  String? selectedDropdownMenuItem = '1';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: DropdownButton<String>(
          value: selectedDropdownMenuItem,
          isExpanded: true,
          onChanged: (String? v) {
            setState(() {
              selectedDropdownMenuItem = v;
            });
          },
          items: const [
            DropdownMenuItem(
              value: '1',
              child: Text('One'),
            ),
            DropdownMenuItem(
              value: '2',
              child: Text('Two'),
            ),
            DropdownMenuItem(
              value: '3',
              child: Text('Three'),
            )
          ],
        ),
      ),
    );
  }
}

まとめ（感想文）

もう全部のWedgetにこのプロパティを付けてくれないかな！