How to create a rounded corner of DropdownButtonFormField (Flutter)

Question

How to create a rounded corner of DropdownButtonFormField in Flutter. I created this DropdownButtonFormField . Now want to make its corner rounded.

Here is the code of it:

  child: DropdownButtonFormField<String>(
    isExpanded: true,
    items: subCategories(),
    decoration: InputDecoration(
      contentPadding:
          EdgeInsets.only(left: 40, right: 40, bottom: 15, top: 15),
      labelText: "Sub Category",
      floatingLabelBehavior: FloatingLabelBehavior.always,
    ),
  ),

Answer 1

Unfortunately DropdownButtonFormField does not have a shape property that you could configure but you could use PopupMenuButton to achieve rounded corners for the popup container.

PopupMenuButton(
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8)),
      ...
      ),

Answer 2

You can use PopupMenuButton for this:

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Color(0xfffad9c1),
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends HookWidget {
  final categories = List.generate(4, (index) => 'Category $index');

  @override
  Widget build(BuildContext context) {
    final _selected = useState(1);
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: PopupMenuButton(
            onSelected: (value) => _selected.value = value,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(8.0))),
            itemBuilder: (context) {
              return categories
                  .map(
                    (value) => PopupMenuItem(
                      value: value,
                      child: Text(value),
                    ),
                  )
                  .toList();
            },
            offset: Offset(1, 40),
            child: Container(
              padding: EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.brown),
                  borderRadius: BorderRadius.all(Radius.circular(20))),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text('Sub Category: ${categories[_selected.value]}'),
                  Icon(Icons.arrow_downward),
                ],
              ),
            )),
      ),
    );
  }
}

Answer 3

You can use OutlineInputBorder like this:

DropdownButtonFormField<String>(
      isExpanded: true,
      items: [
        DropdownMenuItem(
          child: Text(''),
        ),
      ],
      onChanged: (value) {},
      decoration: InputDecoration(
        contentPadding:
            EdgeInsets.only(left: 40, right: 40, bottom: 15, top: 15),
        labelText: "Sub Category",
        floatingLabelBehavior: FloatingLabelBehavior.always,
        border: OutlineInputBorder( // <--- this line
          borderRadius: BorderRadius.circular(10), // <--- this line
        ),
      ),
    );