如何将DropdownMenu宽度拉伸至屏幕全宽？

Question

使用

Material 3

，我有一个 DropdownMenu 小部件，我将其构造为：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

enum ListTime {
  first('8:00-9:35', '8:00', '9:35'),
  second('9:45-11:20', '9:45', '11:20'),
  third('11:35-13:10', '11:35', '13:10'),
  fourth('13:40-15:15', '13:40', '15:15'),
  fifth('15:25-17:00', '15:25', '17:00'),
  sixth('17:10-18:45', '17:10', '18:45'),
  seventh('18:55-20:30', '18:55', '20:30');

  const ListTime(this.label, this.start, this.end);
  final String label;
  final String start;
  final String end;
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          margin: const EdgeInsets.symmetric(
            horizontal: 12.0,
          ),
          child: Container(
            padding: const EdgeInsets.all(12),
            child: DropdownMenu(
              width: double.infinity,
              menuStyle: MenuStyle(),
              leadingIcon: Icon(
                Icons.schedule_outlined,
                size: 20,
              ),
              dropdownMenuEntries: ListTime.values
                  .map<DropdownMenuEntry<ListTime>>((ListTime time) {
                return DropdownMenuEntry<ListTime>(
                  value: time,
                  label: time.label,
                );
              }).toList(),
            ),
          ),
        ),
      ),
    );
  }
}

但是，当我将 DropdownMenu 的宽度设置为

double.infinity

时，下拉菜单本身超出了 DropdownMenu 小部件的宽度。

我也将它包裹在

Expand and Sizedbox.expand

中，但随后显示错误。

添加了完整的代码示例。将其复制并粘贴到 DartPad 中。 之后，您会看到下拉列表比输入字段宽得多。

Answer 1

这是您的解决方案。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

enum ListTime {
  first('8:00-9:35', '8:00', '9:35'),
  second('9:45-11:20', '9:45', '11:20'),
  third('11:35-13:10', '11:35', '13:10'),
  fourth('13:40-15:15', '13:40', '15:15'),
  fifth('15:25-17:00', '15:25', '17:00'),
  sixth('17:10-18:45', '17:10', '18:45'),
  seventh('18:55-20:30', '18:55', '20:30');

  const ListTime(this.label, this.start, this.end);
  final String label;
  final String start;
  final String end;
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
       children: [
          Container(
              width: MediaQuery.of(context).size.width,
           margin: const EdgeInsets.symmetric(
            horizontal: 12.0,
          ),
            padding: const EdgeInsets.all(12),
            child: DropdownMenu(
              width: double.infinity,
              menuStyle: MenuStyle(),
              leadingIcon: Icon(
                Icons.schedule_outlined,
                size: 20,
              ),
              dropdownMenuEntries: ListTime.values
                  .map<DropdownMenuEntry<ListTime>>((ListTime time) {
                return DropdownMenuEntry<ListTime>(
                  value: time,
                  label: time.label,
                );
              }).toList(),
            ),
          ),]
        ),
      ),
    );
  }
}