DropdownButtonFormField input decorator focus/hover is not clipped and appears behind fill color #147069
Description
Steps to reproduce
Partly the problem was described and marked as solved here: #131282. But unfortunately I'm still experiencing this issue. on Web.
When using an input decorator theme in ThemeData, the form field of the DropdownButtonFormField gets the correct themed result, but the shape is not clipped based on used radius of the input decorator for focused and hovered states.
The other problem is following: if the filled parameter is true, the hover/focus color appears behind the fill color (when I'm using a TextFormField, the color appears above the fill color).
Here you can see a DropdownButtonFormField and TextFormField:
Expected results
On focus/hover the highlight color of the DropdownButtonFormField appears above fill color and is clipped with border radius.
Actual results
The highlight is not clipped and appears behind fill color.
Code sample
Code sample
void main() {
runApp(
const App(),
);
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
inputDecorationTheme: InputDecorationTheme(
filled: true,
fillColor: Colors.white,
errorMaxLines: 3,
contentPadding: const EdgeInsets.fromLTRB(12, 0, 12, 18),
border: MaterialStateOutlineInputBorder.resolveWith((final states) {
if (states.contains(MaterialState.error)) {
return OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(color: Colors.red),
);
}
if (states.contains(MaterialState.focused)) {
return OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: const BorderSide(color: Colors.blueGrey),
);
}
return OutlineInputBorder(
borderRadius: BorderRadius.circular(14),
borderSide: BorderSide.none,
);
}),
),
),
home: Scaffold(
backgroundColor: Colors.grey.shade50,
body: Padding(
padding: const EdgeInsets.all(100),
child: Column(
children: [
DropdownButtonHideUnderline(
child: DropdownButtonFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 15),
hintText: 'Dropdown Field',
),
items: ['Item 1', 'Item 2', 'Item 3'].map((final String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (final String? value) {},
),
),
const SizedBox(height: 20),
TextFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 15),
hintText: 'Text Field',
),
),
],
),
),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
2024-04-19.14.24.06.mov
Logs
No response
Flutter Doctor output
Doctor output
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.5, on macOS 14.4.1 23E224 darwin-arm64, locale ru-RU)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3.6)
[✓] IntelliJ IDEA Community Edition (version 2022.2)
[✓] VS Code (version 1.88.1)
[✓] Connected device (3 available)
! Error: Browsing on the local area network for Ksu-iPhone. Ensure the device is unlocked and attached with a cable or associated with the same local area
network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources
• No issues found!Metadata
Metadata
Assignees
Labels
Type
Projects
Status