-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Closed
Copy link
Labels
f: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.0Found to occur in 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version
Description
Steps to Reproduce
- Execute
flutter runon the code sample - 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
Themethis also applies to the options of the dropdown items once we click the text field or dropdown button sinceDropdownButtonFormFieldextendsDropdownButtonHideUnderline.
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
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.flutter/packages/flutter/material repository.found in release: 3.0Found to occur in 3.0Found to occur in 3.0found in release: 3.1Found to occur in 3.1Found to occur in 3.1frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onr: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer version
Type
Projects
Status
Done (PR merged)

