How can I set boder radius to drop down menu

Question

I am looking to make my dropdown menu to look like an oval shape. I want to set the border radius.

I tried to set the menuStyle property shape but did not know how to achieve it.

Code I am working on

class DropdownWidget extends StatefulWidget {
  const DropdownWidget({super.key});

  @override
  State<DropdownWidget> createState() => _DropdownWidgetState();
}

class _DropdownWidgetState extends State<DropdownWidget> {
  final controller=TextEditingController();
  Routes? route;

  @override
  Widget build(BuildContext context) {
    return DropdownMenu<Routes>(
        menuStyle: MenuStyle(
               // should i add something here

        ),

        requestFocusOnTap: true,
        enableFilter: true,
        onSelected: ( Routes? routeitem ){
          setState(() {
            route=routeitem;
          });
        },
        controller: controller,
        dropdownMenuEntries: Routes.values.map<DropdownMenuEntry<Routes>>((Routes route) {
          return DropdownMenuEntry<Routes>(
            value: route,
            label: route.label,
          );
        }).toList(),

      );
  }
}

Answer 1

You can use the inputDecorationTheme property of DropdownMenu:

DropdownMenu(
  inputDecorationTheme: InputDecorationTheme(
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10), // Set border radius here
     ),
  ),
),

Answer 2

In MenuStyle, you can set RoundedRectangleBorder as its shape like this:

MenuStyle(
  shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30))),
)

You can also make the border elliptical:

MenuStyle(
  shape: MaterialStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.elliptical(20, 40)))),
)