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:  After:  After (when filled is not set to true):  ## 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). https://dart.googlesource.com/external/github.com/flutter/flutter/+/5881b13b9707b510bfa9d0ef0881ac98d24a8774
Monorepo is:
With depot_tools installed and on your path, create a directory for your monorepo checkout and run these commands to create a gclient solution in that directory:
mkdir monorepo cd monorepo gclient config --unmanaged https://dart.googlesource.com/monorepo gclient sync -D
This gives you a checkout in the monorepo directory that contains:
monorepo/ DEPS - the DEPS used for this gclient checkout commits.json - the pinned commits for Dart, flutter/engine, and flutter/flutter tools/ - scripts used to create monorepo DEPS engine/src/ - the flutter/buildroot repo flutter/ - the flutter/engine repo out/ - the build directory, where Flutter engine builds are created third_party/ - Flutter dependencies checked out by DEPS dart/ - the Dart SDK checkout. third_party - Dart dependencies, also used by Flutter flutter/ - the flutter/flutter repo
Flutter's instructions for building the engine are at Compiling the engine
They can be followed closely, with a few changes:
goma_ctl ensure_start is sufficient.Example build commands that work on linux:
MONOREPO_PATH=$PWD if [[ ! $PATH =~ (^|:)$MONOREPO_PATH/flutter/bin(:|$) ]]; then PATH=$MONOREPO_PATH/flutter/bin:$PATH fi export GOMA_DIR=$(dirname $(command -v gclient))/.cipd_bin goma_ctl ensure_start pushd engine/src flutter/tools/gn --goma --no-prebuilt-dart-sdk --unoptimized --full-dart-sdk autoninja -C out/host_debug_unopt popd
The Flutter commands used to build and run apps will use the locally built Flutter engine and Dart SDK, instead of the one downloaded by the Flutter tool, if the --local-engine option is provided.
For example, to build and run the Flutter spinning square sample on the web platform,
MONOREPO_PATH=$PWD cd flutter/examples/layers flutter --local-engine=host_debug_unopt \ -d chrome run widgets/spinning_square.dart cd $MONOREPO_PATH
To build for desktop, specify the desktop platform device in flutter run as -d macos or -d linux or -d windows. You may also need to run the command
flutter create --platforms=windows,macos,linux
on existing apps, such as sample apps. New apps created with flutter create already include these support files. Details of desktop support are at Desktop Support for Flutter
Tests in the Flutter source tree can be run with the flutter test command, run in the directory of a package containing tests. For example:
MONOREPO_PATH=$PWD cd flutter/packages/flutter flutter test --local-engine=host_debug_unopt cd $MONOREPO_PATH
Please file an issue or email the dart-engprod team with any problems with or questions about using monorepo.
We will update this documentation to address them.
flutter commands may download the engine and Dart SDK files for the configured channel, even though they will be using the local engine and its SDK.gclient sync needs to be run in an administrator session, because some installed dependencies create symlinks.