Taha Tesser
|
1bc791697c
|
Update default menu text styles for Material 3 (#131930)
Related https://github.com/flutter/flutter/issues/131676
## Description
#### Fix default input text style for `DropdownMenu`
### Fix default text style for `MenuAnchor`'s menu items (which `DropdownMenu` uses for menu items)
### Default `DropdownMenu` Input text style
### Default `DropdownMenu` menu item text style
### Default `MenuAnchor` menu item text style
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
/// Flutter code sample for [DropdownMenu]s. The first dropdown menu has an outlined border.
void main() => runApp(const DropdownMenuExample());
class DropdownMenuExample extends StatefulWidget {
const DropdownMenuExample({super.key});
@override
State<DropdownMenuExample> createState() => _DropdownMenuExampleState();
}
class _DropdownMenuExampleState extends State<DropdownMenuExample> {
final TextEditingController colorController = TextEditingController();
final TextEditingController iconController = TextEditingController();
ColorLabel? selectedColor;
IconLabel? selectedIcon;
@override
Widget build(BuildContext context) {
final List<DropdownMenuEntry<ColorLabel>> colorEntries =
<DropdownMenuEntry<ColorLabel>>[];
for (final ColorLabel color in ColorLabel.values) {
colorEntries.add(
DropdownMenuEntry<ColorLabel>(
value: color, label: color.label, enabled: color.label != 'Grey'),
);
}
final List<DropdownMenuEntry<IconLabel>> iconEntries =
<DropdownMenuEntry<IconLabel>>[];
for (final IconLabel icon in IconLabel.values) {
iconEntries
.add(DropdownMenuEntry<IconLabel>(value: icon, label: icon.label));
}
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorSchemeSeed: Colors.green,
// textTheme: const TextTheme(
// bodyLarge: TextStyle(
// fontWeight: FontWeight.bold,
// fontStyle: FontStyle.italic,
// decoration: TextDecoration.underline,
// ),
// ),
),
home: Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
const Text('DropdownMenus'),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownMenu<ColorLabel>(
controller: colorController,
label: const Text('Color'),
dropdownMenuEntries: colorEntries,
onSelected: (ColorLabel? color) {
setState(() {
selectedColor = color;
});
},
),
const SizedBox(width: 20),
DropdownMenu<IconLabel>(
controller: iconController,
enableFilter: true,
leadingIcon: const Icon(Icons.search),
label: const Text('Icon'),
dropdownMenuEntries: iconEntries,
inputDecorationTheme: const InputDecorationTheme(
filled: true,
contentPadding: EdgeInsets.symmetric(vertical: 5.0),
),
onSelected: (IconLabel? icon) {
setState(() {
selectedIcon = icon;
});
},
),
],
),
),
const Text('Plain TextFields'),
Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 150,
child: TextField(
controller: TextEditingController(text: 'Blue'),
decoration: const InputDecoration(
suffixIcon: Icon(Icons.arrow_drop_down),
labelText: 'Color',
border: OutlineInputBorder(),
)),
),
const SizedBox(width: 20),
SizedBox(
width: 150,
child: TextField(
controller: TextEditingController(text: 'Smile'),
decoration: const InputDecoration(
prefixIcon: Icon(Icons.search),
suffixIcon: Icon(Icons.arrow_drop_down),
filled: true,
labelText: 'Icon',
)),
),
],
),
),
if (selectedColor != null && selectedIcon != null)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You selected a ${selectedColor?.label} ${selectedIcon?.label}'),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 5),
child: Icon(
selectedIcon?.icon,
color: selectedColor?.color,
),
)
],
)
else
const Text('Please select a color and an icon.')
],
),
),
),
);
}
}
enum ColorLabel {
blue('Blue', Colors.blue),
pink('Pink', Colors.pink),
green('Green', Colors.green),
yellow('Yellow', Colors.yellow),
grey('Grey', Colors.grey);
const ColorLabel(this.label, this.color);
final String label;
final Color color;
}
enum IconLabel {
smile('Smile', Icons.sentiment_satisfied_outlined),
cloud(
'Cloud',
Icons.cloud_outlined,
),
brush('Brush', Icons.brush_outlined),
heart('Heart', Icons.favorite);
const IconLabel(this.label, this.icon);
final String label;
final IconData icon;
}
```
</details>
|
2023-08-22 22:21:00 +00:00 |
|