flutter

History

Fix DropdownButtonFormField overlay colors management (#159472 )

## Description

This PR fixes some `DropdownButtonFormField` issues where the overlay
color overflows.

Before this PR, `DropdownButtonFormField` was relying on an `InkWell` to
display overlay colors. This resulted in several issues related to the
`InkWell` overflowing because it is not aware of the inner container
inside `InputDecorator`, for instance see
https://github.com/flutter/flutter/issues/106659.

With this PR, `DropdownButtonFormField` does not use an `InkWell` but
rely on `InputDecorator` to paint overlay colors. `InputDecorator`
paints overlay colors only on its internal container, this fixes the
color overflowing when using `InkWell`. With this change users can
opt-in for overlay colors to be painted by setting InputDecorator.filled
to true (similarly to TextField and accordingly to [the Material
specification](https://m2.material.io/components/menus#dropdown-menu)).

Code sample from https://github.com/flutter/flutter/issues/106659 with
InputDecoration.filled set to true:

<details><summary>Code sample with InputDecoration.filled set to
true</summary>

```dart
import 'package:flutter/material.dart';

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

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

  static const String _title = 'Flutter Code Sample';
  final _formKey = GlobalKey<FormState>();

  @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(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(32)),
            borderSide: BorderSide(color: Colors.blue, width: 2),
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 500,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Form(
                  key: _formKey,
                  child: DropdownButtonFormField(
                    onTap: () {
                      _formKey.currentState!.validate();
                    },
                    validator: (String? v) => 'Required',
                    onChanged: (String? value) {},
                    items: items,
                    // Set InputDecoration.filled to true if overlays should be visible.
                    // See Material specification for filled vs outlined dropdown button:
                    // https://m2.material.io/components/menus#dropdown-menu.
                    decoration: const InputDecoration(filled: true),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}


``` 
</details> 

Before:


![image](https://github.com/user-attachments/assets/3c22975f-9b8c-4184-8ffe-67f2191bf563)

After:


![image](https://github.com/user-attachments/assets/47ac35c3-b516-454f-bd47-2d35d85f172f)

After (when filled is not set to true):


![image](https://github.com/user-attachments/assets/faf46e40-5817-4d64-9158-7a57d94a9776)


## Related Issue

Fixes [DropdownButtonFormField InkWell spreads to error
message](https://github.com/flutter/flutter/issues/106659).
Fixes [DropdownButtonFormField input decorator focus/hover is not
clipped and appears behind fill
color.](https://github.com/flutter/flutter/issues/147069)
First step for [DropDownButtonFormField hoverColor has no effect in web
and desktop platforms](https://github.com/flutter/flutter/issues/151460)

## Tests

Adds 4 tests.
Updates 2 tests (remove checks specific to InkWell usage and use filled:
true when checking for hover/focus colors).
Removes 1 test (test specific to InkWell usage, because this PR removes
the InkWell the test is obsolete).