Adds borderRadius property to DropdownButton (#84298)

packages/flutter/lib/src/material/dropdown.dart

@@ -43,6 +43,7 @@ class _DropdownMenuPainter extends CustomPainter {
     this.color,
     this.elevation,
     this.selectedIndex,
+    this.borderRadius,
     required this.resize,
     required this.getSelectedItemOffset,
   }) : _painter = BoxDecoration(
@@ -50,7 +51,7 @@ class _DropdownMenuPainter extends CustomPainter {
          // configuration in the paint() function and you must provide some sort
          // of onChanged callback here.
          color: color,
-         borderRadius: BorderRadius.circular(2.0),
+         borderRadius: borderRadius ?? const BorderRadius.all(Radius.circular(2.0)),
          boxShadow: kElevationToShadow[elevation],
        ).createBoxPainter(),
        super(repaint: resize);
@@ -58,6 +59,7 @@ class _DropdownMenuPainter extends CustomPainter {
   final Color? color;
   final int? elevation;
   final int? selectedIndex;
+  final BorderRadius? borderRadius;
   final Animation<double> resize;
   final ValueGetter<double> getSelectedItemOffset;
   final BoxPainter _painter;
@@ -85,6 +87,7 @@ class _DropdownMenuPainter extends CustomPainter {
     return oldPainter.color != color
         || oldPainter.elevation != elevation
         || oldPainter.selectedIndex != selectedIndex
+        || oldPainter.borderRadius != borderRadius
         || oldPainter.resize != resize;
   }
 }
@@ -94,6 +97,7 @@ class _DropdownMenuItemButton<T> extends StatefulWidget {
   const _DropdownMenuItemButton({
     Key? key,
     this.padding,
+    required this.borderRadius,
     required this.route,
     required this.buttonRect,
     required this.constraints,
@@ -107,6 +111,7 @@ class _DropdownMenuItemButton<T> extends StatefulWidget {
   final BoxConstraints constraints;
   final int itemIndex;
   final bool enableFeedback;
+  final BorderRadius borderRadius;
 
   @override
   _DropdownMenuItemButtonState<T> createState() => _DropdownMenuItemButtonState<T>();
@@ -172,6 +177,16 @@ class _DropdownMenuItemButtonState<T> extends State<_DropdownMenuItemButton<T>>
       padding: widget.padding,
       child: widget.route.items[widget.itemIndex],
     );
+    final BorderRadius itemBorderRadius;
+    if (widget.route.items.length == 1) {
+      itemBorderRadius = widget.borderRadius;
+    } else if (widget.itemIndex == 0) {
+      itemBorderRadius = BorderRadius.only(topLeft: widget.borderRadius.topLeft, topRight: widget.borderRadius.topRight);
+    } else if (widget.itemIndex == widget.route.items.length - 1) {
+      itemBorderRadius = BorderRadius.only(bottomLeft: widget.borderRadius.bottomLeft, bottomRight: widget.borderRadius.bottomRight);
+    } else {
+      itemBorderRadius = BorderRadius.zero;
+    }
     // An [InkWell] is added to the item only if it is enabled
     if (dropdownMenuItem.enabled) {
       child = InkWell(
@@ -180,6 +195,7 @@ class _DropdownMenuItemButtonState<T> extends State<_DropdownMenuItemButton<T>>
         onTap: _handleOnTap,
         onFocusChange: _handleFocusChange,
         child: child,
+        borderRadius: itemBorderRadius,
       );
     }
     child = FadeTransition(opacity: opacity, child: child);
@@ -202,6 +218,7 @@ class _DropdownMenu<T> extends StatefulWidget {
     required this.constraints,
     this.dropdownColor,
     required this.enableFeedback,
+    this.borderRadius,
   }) : super(key: key);
 
   final _DropdownRoute<T> route;
@@ -210,6 +227,7 @@ class _DropdownMenu<T> extends StatefulWidget {
   final BoxConstraints constraints;
   final Color? dropdownColor;
   final bool enableFeedback;
+  final BorderRadius? borderRadius;
 
   @override
   _DropdownMenuState<T> createState() => _DropdownMenuState<T>();
@@ -260,6 +278,7 @@ class _DropdownMenuState<T> extends State<_DropdownMenu<T>> {
           constraints: widget.constraints,
           itemIndex: itemIndex,
           enableFeedback: widget.enableFeedback,
+          borderRadius: widget.borderRadius ?? BorderRadius.zero,
         ),
       ];
 
@@ -271,6 +290,7 @@ class _DropdownMenuState<T> extends State<_DropdownMenu<T>> {
           elevation: route.elevation,
           selectedIndex: route.selectedIndex,
           resize: _resize,
+          borderRadius: widget.borderRadius,
           // This offset is passed as a callback, not a value, because it must
           // be retrieved at paint time (after layout), not at build time.
           getSelectedItemOffset: () => route.getItemOffset(route.selectedIndex),
@@ -420,6 +440,7 @@ class _DropdownRoute<T> extends PopupRoute<_DropdownRouteResult<T>> {
     this.dropdownColor,
     this.menuMaxHeight,
     required this.enableFeedback,
+    this.borderRadius,
   }) : assert(style != null),
        itemHeights = List<double>.filled(items.length, itemHeight ?? kMinInteractiveDimension);
 
@@ -434,6 +455,7 @@ class _DropdownRoute<T> extends PopupRoute<_DropdownRouteResult<T>> {
   final Color? dropdownColor;
   final double? menuMaxHeight;
   final bool enableFeedback;
+  final BorderRadius? borderRadius;
 
   final List<double> itemHeights;
   ScrollController? scrollController;
@@ -466,6 +488,7 @@ class _DropdownRoute<T> extends PopupRoute<_DropdownRouteResult<T>> {
           style: style,
           dropdownColor: dropdownColor,
           enableFeedback: enableFeedback,
+          borderRadius: borderRadius,
         );
       },
     );
@@ -562,6 +585,7 @@ class _DropdownRoutePage<T> extends StatelessWidget {
     this.style,
     required this.dropdownColor,
     required this.enableFeedback,
+    this.borderRadius,
   }) : super(key: key);
 
   final _DropdownRoute<T> route;
@@ -575,6 +599,7 @@ class _DropdownRoutePage<T> extends StatelessWidget {
   final TextStyle? style;
   final Color? dropdownColor;
   final bool enableFeedback;
+  final BorderRadius? borderRadius;
 
   @override
   Widget build(BuildContext context) {
@@ -599,6 +624,7 @@ class _DropdownRoutePage<T> extends StatelessWidget {
       constraints: constraints,
       dropdownColor: dropdownColor,
       enableFeedback: enableFeedback,
+      borderRadius: borderRadius,
     );
 
     return MediaQuery.removePadding(
@@ -883,6 +909,7 @@ class DropdownButton<T> extends StatefulWidget {
     this.menuMaxHeight,
     this.enableFeedback,
     this.alignment = AlignmentDirectional.centerStart,
+    this.borderRadius,
     // When adding new arguments, consider adding similar arguments to
     // DropdownButtonFormField.
   }) : assert(items == null || items.isEmpty || value == null ||
@@ -1167,6 +1194,14 @@ class DropdownButton<T> extends StatefulWidget {
   ///    relative to text direction.
   final AlignmentGeometry alignment;
 
+  /// Defines the corner radii of the menu's rounded rectangle shape.
+  ///
+  /// The radii of the first menu item's top left and right corners are
+  /// defined by the corresponding properties of the [borderRadius].
+  /// Similarly, the radii of the last menu item's bottom and right corners
+  /// are defined by the corresponding properties of the [borderRadius].
+  final BorderRadius? borderRadius;
+
   @override
   State<DropdownButton<T>> createState() => _DropdownButtonState<T>();
 }
@@ -1320,6 +1355,7 @@ class _DropdownButtonState<T> extends State<DropdownButton<T>> with WidgetsBindi
       dropdownColor: widget.dropdownColor,
       menuMaxHeight: widget.menuMaxHeight,
       enableFeedback: widget.enableFeedback ?? true,
+      borderRadius: widget.borderRadius,
     );
 
     navigator.push(_dropdownRoute!).then<void>((_DropdownRouteResult<T>? newValue) {

packages/flutter/test/material/dropdown_test.dart

@@ -3472,4 +3472,81 @@ void main() {
     expect(find.byType(RawScrollbar), findsNothing);
 
   }, variant: TargetPlatformVariant.all());
+
+  testWidgets('borderRadius property works properly', (WidgetTester tester) async {
+    const double radius = 20.0;
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: Center(
+            child: DropdownButton<String>(
+              borderRadius: BorderRadius.circular(radius),
+              value: 'One',
+              items: <String>['One', 'Two', 'Three', 'Four']
+                .map<DropdownMenuItem<String>>((String value) {
+                  return DropdownMenuItem<String>(
+                    value: value,
+                    child: Text(value),
+                  );
+              }).toList(),
+              onChanged: (_) { },
+            ),
+          ),
+        ),
+      ),
+    );
+
+    await tester.tap(find.text('One'));
+    await tester.pumpAndSettle();
+
+    expect(
+      find.ancestor(
+        of: find.text('One').last,
+        matching: find.byType(CustomPaint),
+      ).at(2),
+      paints
+        ..save()
+        ..rrect()
+        ..rrect()
+        ..rrect()
+        ..rrect(rrect: const RRect.fromLTRBXY(0.0, 0.0, 144.0, 208.0, radius, radius)),
+    );
+
+    final InkWell firstItem = tester.widget(find.widgetWithText(InkWell, 'One'));
+    final InkWell lastItem = tester.widget(find.widgetWithText(InkWell, 'Four'));
+
+    expect(firstItem.borderRadius, const BorderRadius.vertical(top: Radius.circular(radius)));
+    expect(lastItem.borderRadius, const BorderRadius.vertical(bottom: Radius.circular(radius)));
+  });
+
+  testWidgets('borderRadius is properly applied to InkWell when there is only one item', (WidgetTester tester) async {
+    const BorderRadius borderRadius = BorderRadius.all(Radius.circular(5.0));
+
+    await tester.pumpWidget(
+      MaterialApp(
+        home: Scaffold(
+          body: Center(
+            child: DropdownButton<String>(
+              borderRadius: borderRadius,
+              value: 'One',
+              items: const <DropdownMenuItem<String>>[
+                DropdownMenuItem<String>(
+                  child: Text('One'), value: 'One'
+                ),
+              ],
+              onChanged: (_) { },
+            ),
+          ),
+        ),
+      ),
+    );
+
+    await tester.tap(find.text('One'));
+    await tester.pumpAndSettle();
+
+    final InkWell menuItem = tester.widget(find.widgetWithText(InkWell, 'One'));
+
+    expect(menuItem.borderRadius, borderRadius);
+  });
 }