如何在 DropdownButtonFormField 中設置圓角邊框？ 使用 flutter

Question

如何在 DropdownButtonFormField 中設置圓角邊框？ 以及如何在下拉圖標中制作背景顏色？ 請看下面的圖片

            Container(
                padding: EdgeInsets.only(top: 10),
                width: (globals.screenWidth * 0.8),
                height: (globals.screenHeight * 0.08),
                color: Colors.white,
         
                child: DropdownButtonFormField(
                  style: TextStyle(
                    fontSize: globals.fontsize_18,
                    color: Colors.black,
                    fontWeight: FontWeight.normal,
                  ),
                  value: _selectedLocation,
                  onChanged: (newValue) {
                    setState(() {
                      _selectedLocation = newValue;
                    });
                  },
                  items: _locations.map((location) {
                    return DropdownMenuItem(
                      child: new Text(location),
                      value: location,
                    );
                  }).toList(),
                )
              )

結果

這是我想要的結果

Answer 1

這應該做！

Container(
                padding: EdgeInsets.only(top: 10),
                width: (globals.screenWidth * 0.8),
                height: (globals.screenHeight * 0.08),
                decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(10),
                ),
                child: DropdownButtonFormField(
                  style: TextStyle(
                    fontSize: globals.fontsize_18,
                    color: Colors.black,
                    fontWeight: FontWeight.normal,
                  ),
                  value: _selectedLocation,
                  onChanged: (newValue) {
                    setState(() {
                      _selectedLocation = newValue;
                    });
                  },
                  items: _locations.map((location) {
                    return DropdownMenuItem(
                      child: new Text(location),
                      value: location,
                    );
                  }).toList(),
                )
              )

將此添加到 DropdownButtonFormField

DropdownButtonFormField(
                icon: Container(
                  color: Colors.black,
                  child: Icon(Icons.keyboard_arrow_down, color: Colors.white,),
                ),
            ),

Answer 2

這是一個帶有PopupMenuButton的解決方案，它也允許配置菜單項。

完整源代碼：

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final _selected = useState(locations[0]);
    return Scaffold(
      backgroundColor: Color(0xff1b2052),
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
              'Where do you want to go today?',
              style: TextStyle(
                fontSize: 32.0,
                color: Colors.white54,
              ),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 48.0),
            MyDropdown<String>(
              items: locations,
              selected: _selected.value,
              onChanged: (newLocation) => _selected.value = newLocation,
            ),
          ],
        ),
      ),
    );
  }
}

class MyDropdown<T> extends StatelessWidget {
  final List<T> items;
  final T selected;
  final ValueChanged<T> onChanged;

  const MyDropdown({Key key, this.items, this.selected, this.onChanged})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton(
        onSelected: onChanged,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ),
        itemBuilder: (context) {
          return items
              .map(
                (value) => PopupMenuItem(
                  value: value,
                  child: Text(value.toString()),
                ),
              )
              .toList();
        },
        offset: Offset(1, 1),
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.brown),
            borderRadius: BorderRadius.all(Radius.circular(8.0)),
          ),
          clipBehavior: Clip.antiAlias,
          child: IntrinsicHeight(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Location: ${selected}'),
                ),
                Container(
                  padding: const EdgeInsets.all(4.0),
                  color: Colors.black54,
                  child: Icon(Icons.expand_more, color: Colors.white54),
                ),
              ],
            ),
          ),
        ));
  }
}

final List<String> locations = [
  'Earth',
  'Jupiter',
  'Mars',
  'Mercury',
  'Neptune',
  'Saturn',
  'Uranus',
  'Venus',
];