Skip to content

DropdownButton InkWell doesn't clip when DropdownButton.borderRadius is provided #106560

@BananaMasterz

Description

@BananaMasterz

Steps to Reproduce

  1. Execute flutter run on the code sample
  2. mouse over (or tap and hold depending on the platform) and notice that the hover and highlight colors aren't clipped according to the border set in Theme this also applies to the options of the dropdown items once we click the text field or dropdown button since DropdownButtonFormField extends DropdownButtonHideUnderline.

Expected results:
Hover and highlight to be clipped according to borderRadius or borderSide or have a clipBehavior option.

Actual results:
As seen in the screenshots, the corners are 90 degrees, in both, the dropdown list and the textfield hover

image
image

Code sample
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    var items = [
      'Ayo',
      'This',
      'Don',
      'Look',
      'Right',
    ].map((String val) {
      return DropdownMenuItem(
        value: val,
        child: Text(
          val,
        ),
      );
    }).toList();

    return MaterialApp(
      title: _title,
      theme: ThemeData(
        inputDecorationTheme: const InputDecorationTheme(
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(16 * 2)),
            borderSide: BorderSide(color: Colors.grey, width: 1),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(16)),
            borderSide: BorderSide(color: Colors.blue, width: 2),
          ),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(16 * 2)),
            borderSide: BorderSide(color: Colors.blue, width: 2),
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                DropdownButtonFormField(
                  borderRadius: const BorderRadius.all(
                    /// dramatic radius for easier visualization
                    Radius.circular(50),
                  ),
                  onChanged: (String? value) {},
                  items: items,
                ),
                const SizedBox(height: 50),
                DropdownButton(
                  borderRadius: const BorderRadius.all(
                    /// dramatic radius for easier visualization
                    Radius.circular(50),
                  ),
                  items: items,
                  onChanged: (String? value) {},
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Metadata

Metadata

Assignees

Labels

f: material designflutter/packages/flutter/material repository.found in release: 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer version

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions