How to Make a Rounded Border for Dropdownbutton in Flutter?

There are multiple ways to do this

Solution 1: You need to specify the side: property. By default, it is BorderSide.none.

decoration: ShapeDecoration(
      shape: RoundedRectangleBorder(
        side: BorderSide(width: 1.0, style: BorderStyle.solid),
        borderRadius: BorderRadius.all(Radius.circular(5.0)),
      ),
    ),

Solution 2: Use the DropdownButtonHideUnderline widget and then wrap it with OutlineInputBorder.

InputDecorator(
  decoration: const InputDecoration(border: OutlineInputBorder()),
  child: DropdownButtonHideUnderline(
    child: DropdownButton(
      ...
    ),
  ),
),

Below is the code snippet for demonstrating.

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: RoundedBorderDropdown(),
        ),
      ),
    );
  }
}


class RoundedBorderDropdown extends StatelessWidget {
  final List<String> _dropdownValues = [
    "One",
    "Two",
    "Three",
    "Four",
    "Five"
  ]; //The list of values we want on the dropdown

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Border Button in AppBar'),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(15.0),
            border: Border.all(
                color: Colors.red, style: BorderStyle.solid, width: 0.80),
          ),
            child: DropdownButtonHideUnderline(

          child: DropdownButton(
            items: _dropdownValues
                .map((value) => DropdownMenuItem(
                      child: Text(value),
                      value: value,
                    ))
                .toList(),
            onChanged: ( value) {},
            isExpanded: false,
            value: _dropdownValues.first,
          ),
        ),
      ),
    ));
  }
}

Output: