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

ネコニウム研究所

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

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

2024-5-10 | ,

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にこのプロパティを付けてくれないかな!