David Martos
63018fe6cb
Relax the warning of unavailable tokens in gen_defaults when a default value is provided ( #140872 )
...
Fixes some false positives and false negatives from the `gen_defaults` tool regarding unavailable tokens in the Material spec.
Fixes #140871
# Before
# After
These new issues that are logged are being fixed in https://github.com/flutter/flutter/pull/140573
---
*If you had to change anything in the [flutter/tests] repo, include a link to the migration guide as per the [breaking change policy].*
2024-01-23 09:35:22 +00:00
LongCatIsLooong
5892a0039b
Remove more textScaleFactor references ( #141816 )
...
Remove more `textScaleFactor` references from flutter/flutter.
- Some changes are related to label scaling: the padding EdgeInsets values of some chip subclasses scale linearly between predetermined "max" padding values and "min" padding values. Before they scale with the `textScaleFactor` scalar, now they scale with the font size and are still capped at the original "max" and "min" values.
- The rest of them are tests or size heuristics that depend on `textScaleFactor`, these are replaced by an effective text scale factor computed using a default font size (which is determined in a pretty random fashion, but it will only make a difference on Android 14+).
No API changes in this batch. There are still some references left that I intend to remove in a different batch that would introduce API changes.
2024-01-20 00:27:18 +00:00
Ian Hickson
77c3807c80
Revert "Make tests more resilient to Skia gold failures and refactor flutter_goldens for extensive technical debt removal ( #140101 )" ( #141814 )
...
Reverts https://github.com/flutter/flutter/pull/140101
That PR somehow made non-matching gold tests not fail at HEAD.
Fixes https://github.com/flutter/flutter/issues/141880
- Blocked by https://github.com/flutter/flutter/issues/140169
- https://github.com/flutter/flutter/pull/141427
2024-01-19 20:29:11 +00:00
David Martos
197cd4d665
Update margin between label and icon in Tab to better reflect Material specs ( #140698 )
...
This PR improves the distance between the label and the icon in the Tab widget.
I updated the margin to 2 pixels, taken from the Figma design page for Material 3. On Material 2 I left the default value of 10 pixels.
Related to #128696 (In particular, the distance between label and icon)
Here are some screenshots for comparison. I looked a bit into the other mentioned issue of the tab height not following the M3 spec. Flutter uses 72 and the spec uses 64. But because Tab is a PreferredSizeWidget, I don't think there is an easy way to provide a different size depending on `ThemeData.useMaterial3`, because there is no `BuildContext` available.
I provide a sample image for the 64 height as well for context on the linked issue, even though it's not part of the PR changes.
The screenshots are taken side by side with the image at: https://m3.material.io/components/tabs/guidelines
## Original
## New (tab height = 72, Flutter default for 8 years)
## New (tab height = 64, M3 spec)
2024-01-18 23:04:26 +00:00
Christopher Fujino
9e9af67b9a
unpin web_socket_channel and roll pub packages ( #141424 )
...
Fixes https://github.com/flutter/flutter/issues/141032
We pinned to web_socket_channel v2.4.1 because v2.4.2 was retracted, however v2.4.3 is now available.
2024-01-12 19:13:08 +00:00
auto-submit[bot]
c2286a7642
Reverts "manual pub roll to pick up dds fixes" ( #141033 )
...
Reverts flutter/flutter#140979
Initiated by: loic-sharma
This change reverts the following previous change:
Original Description:
Fixes https://github.com/flutter/flutter/issues/137163
Fixes https://github.com/flutter/flutter/issues/139181
2024-01-05 19:10:19 +00:00
Christopher Fujino
e256d49117
manual pub roll to pick up dds fixes ( #140979 )
...
Fixes https://github.com/flutter/flutter/issues/137163
Fixes https://github.com/flutter/flutter/issues/139181
2024-01-04 19:43:06 +00:00
Furkan Acar
83ac76050d
Add SegmentedButton.styleFrom ( #137542 )
...
fixes https://github.com/flutter/flutter/issues/138289
---
SegmentedButtom.styleFrom has been added to the segment button, so there is no longer any need to the button style from the beginning. It works like ElevatedButton.styleFrom only I added selectedForegroundColor, selectedBackgroundColor. In this way, the user will be able to change the color first without checking the MaterialState states. I added tests of the same controls.
#129215 I opened this problem myself, but I was rejected because I handled too many items in a PR. For now, I wrote a structure that only handles MaterialStates instead of users.
old (still avaliable)
<img width="626" alt="image" src="https://github.com/flutter/flutter/assets/65075121/9446b13b-c355-4d20-bda2-c47a23d42d4f ">
new (just an option for developer)
<img width="483" alt="image" src="https://github.com/flutter/flutter/assets/65075121/0a645257-4c83-4029-9484-bd746c02265f ">
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
/// Flutter code sample for [SegmentedButton].
void main() {
runApp(const SegmentedButtonApp());
}
enum Calendar { day, week, month, year }
class SegmentedButtonApp extends StatefulWidget {
const SegmentedButtonApp({super.key});
@override
State<SegmentedButtonApp> createState() => _SegmentedButtonAppState();
}
class _SegmentedButtonAppState extends State<SegmentedButtonApp> {
Calendar calendarView = Calendar.day;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: Scaffold(
body: Center(
child: SegmentedButton<Calendar>(
style: SegmentedButton.styleFrom(
foregroundColor: Colors.amber,
visualDensity: VisualDensity.comfortable,
),
// style: const ButtonStyle(
// foregroundColor: MaterialStatePropertyAll<Color>(Colors.deepPurple),
// visualDensity: VisualDensity.comfortable,
// ),
segments: const <ButtonSegment<Calendar>>[
ButtonSegment<Calendar>(
value: Calendar.day,
label: Text('Day'),
icon: Icon(Icons.calendar_view_day)),
ButtonSegment<Calendar>(
value: Calendar.week,
label: Text('Week'),
icon: Icon(Icons.calendar_view_week)),
ButtonSegment<Calendar>(
value: Calendar.month,
label: Text('Month'),
icon: Icon(Icons.calendar_view_month)),
ButtonSegment<Calendar>(
value: Calendar.year,
label: Text('Year'),
icon: Icon(Icons.calendar_today)),
],
selected: <Calendar>{calendarView},
onSelectionChanged: (Set<Calendar> newSelection) {
setState(() {
calendarView = newSelection.first;
});
},
),
),
),
);
}
}
```
</details>
2024-01-03 21:26:02 +00:00
Polina Cherkasova
6368d65622
Upgrade to version of leak tracker that does not depend on test_widgets. ( #140247 )
...
Contributes to: https://github.com/flutter/flutter/issues/135856
2023-12-19 04:28:09 +00:00
Polina Cherkasova
6a85684877
Increase versions of leak tracker libraries. ( #140018 )
...
Contributes to https://github.com/flutter/flutter/issues/135856
2023-12-15 05:18:23 +00:00
Ian Hickson
fca7bc9e28
Roll dependencies ( #139606 )
...
test-exempt: rolling dependencies
2023-12-06 19:22:06 +00:00
Qun Cheng
c7d4b32fdd
Update the default outline color for OutlinedButton ( #138768 )
...
Fix b/311343182
This is to update the default outline for `OutlinedButton`. When the button is focused, the outline color should be primary color.
2023-11-22 20:16:37 +00:00
Qun Cheng
ed70f4e248
Adaptive Switch ( #130425 )
...
Currently, `Switch.factory` delegates to `CupertinoSwitch` when platform
is iOS or macOS. This PR is to:
* have the factory configure the Material `Switch` for the expected look
and feel.
* introduce `Adaptation` class to customize themes for the adaptive
components.
2023-11-07 10:26:23 -08:00
Qun Cheng
dee88d19c1
Update Carousel tokens to v0.202 ( #137728 )
...
This PR is to export the carousel tokens from database. Only carousel tokens are updated.
Related to #125980
2023-11-02 00:45:23 +00:00
Qun Cheng
4a0f261b4e
Add Card.filled and Card.outlined factory methods ( #136229 )
...
Fixes #119401
This PR is to:
* add `Card.filled` and `Card.outlined` factory methods so that we can use tokens for these two types of cards to generate default theme instead of providing hard-corded values in example.
* update card.2.dart example.
* add test file for card.2.dart example.
* fix some mismatch caused by editing the auto-generated defaults by hand in navigation_bar.dart and navigation_drawer.dart.
2023-11-01 23:29:49 +00:00
Polina Cherkasova
bcf267359c
Move dependency on leak_tracker from dependencies to dev_dependencies in flutter_test. ( #137633 )
...
Analyzer's dependency on autosnapshotting causes issues.
Because every version of integration_test from sdk depends on leak_tracker from hosted and autosnapshotting depends on leak_tracker from path, integration_test from sdk is forbidden.
So, because autosnapshotting depends on integration_test from sdk, version solving failed.
2023-10-31 21:12:52 +00:00
flutter-pub-roller-bot
d7c82888c3
Roll pub packages ( #136924 )
...
This PR was generated by `flutter update-packages --force-upgrade`.
2023-10-20 20:36:29 +00:00
Elliott Brooks
01eef7ca13
Upgrade Flutter deps to pull in latest vm_service and dwds ( #136734 )
...
Generated by running `flutter update-packages --force-upgrade`
Updates vm_service to [12.0.0](https://pub.dev/packages/vm_service/versions/12.0.0 ) and dwds to [22.0.0](https://pub.dev/packages/dwds/versions/22.0.0 )
The changes to `packages/flutter_tools/lib/src/isolated/devfs_web.dart` are for the new interface of DWDS introduced in https://github.com/dart-lang/webdev/pull/2243
FYI @bkonyi
2023-10-19 18:29:02 +00:00
Michael Goderbauer
437361321a
Bump file,process,process_runner ( #136418 )
2023-10-12 13:05:24 -07:00
Kevin Moore
3e60999b11
Allow latest pkg:material_color_utilities ( #132445 )
...
* Allow latest pkg:material_color_utilities
* Bump other dependencies to their latest - including pkg:web
2023-10-11 23:57:16 +00:00
Gray Mackall
f4b5fc1803
Unpin url launcher (remake) ( #134958 )
...
More up to date version of https://github.com/flutter/flutter/pull/133786 .
Fixes https://github.com/flutter/flutter/issues/111304
2023-09-20 02:43:57 +00:00
Michael Goderbauer
b966b2beee
Enable private field promotion for dev ( #134480 )
...
New feature in upcoming Dart 3.2. See https://github.com/dart-lang/language/issues/2020 . Feature is enabled by bumping the min SDK version to 3.2.
Part of https://github.com/flutter/flutter/issues/134476 .
2023-09-12 18:29:00 +00:00
Taha Tesser
1e770c3808
Add cancelButtonStyle & confirmButtonStyle to the DatePickerThemeData ( #132847 )
...
fixes [Unable to adjust the color for "Cancel" and "Ok" button in datePicker dialog](https://github.com/flutter/flutter/issues/127739 )
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
datePickerTheme: DatePickerThemeData(
cancelButtonStyle: TextButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
side: BorderSide(color: Colors.red),
),
backgroundColor: Colors.white,
foregroundColor: Colors.red,
elevation: 3,
shadowColor: Colors.red,
),
confirmButtonStyle: TextButton.styleFrom(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
),
backgroundColor: Colors.green[700],
foregroundColor: Colors.white,
elevation: 3,
shadowColor: Colors.green[700],
),
),
),
home: const Example(),
);
}
}
class Example extends StatelessWidget {
const Example({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DatePickerDialog(
initialDate: DateTime.now(),
firstDate: DateTime(2020),
lastDate: DateTime(2030),
),
),
);
}
}
```
</details>
### Before
Not possible to customize action buttons from the `DatePickerThemeData`.
### After
2023-08-30 21:16:13 +00:00
Xilai Zhang
6fd42536b7
[flutter roll] Revert "Fix Chip.shape's side is not used when provided in Material 3" ( #133615 )
...
Reverts flutter/flutter#132941
context: b/298110031
The rounded rectangle borders don't appear in some of the internal
golden image tests.
2023-08-29 19:59:02 -07:00
Kenzie Davisson
61d9f55665
Update flutter packages to pick up latest vm_service ( #133335 )
...
Generated by running `flutter update-packages --force-upgrade`
2023-08-25 11:03:35 -07:00
Taha Tesser
612117a690
Fix Chip.shape's side is not used when provided in Material 3 ( #132941 )
...
fixes [Chip border side color not working in Material3](https://github.com/flutter/flutter/issues/132922 )
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
useMaterial3: true,
chipTheme: const ChipThemeData(
// shape: RoundedRectangleBorder(
// side: BorderSide(color: Colors.amber),
// borderRadius: BorderRadius.all(Radius.circular(12)),
// ),
// side: BorderSide(color: Colors.red),
),
),
home: const Example(),
);
}
}
class Example extends StatelessWidget {
const Example({super.key});
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: RawChip(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.amber),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
// side: BorderSide(color: Colors.red),
label: Text('Chip'),
),
),
);
}
}
```
</details>
---
### Before
When `RawChip.shape` is provided with a `BorderSide`.
```dart
body: Center(
child: RawChip(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.amber),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
label: Text('Chip'),
),
),
```
When `RawChip.shape` is provided with a `BorderSide` and also `RawChip.side` is provided. The `RawChip.side` overrides the shape's side.
```dart
body: Center(
child: RawChip(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.amber),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
side: BorderSide(color: Colors.red),
label: Text('Chip'),
),
),
```
---
### After
When `RawChip.shape` is provided with a `BorderSide`.
```dart
body: Center(
child: RawChip(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.amber),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
label: Text('Chip'),
),
),
```
When `RawChip.shape` is provided with a `BorderSide` and also `RawChip.side` is provided. The `RawChip.side` overrides the shape's side.
```dart
body: Center(
child: RawChip(
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.amber),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
side: BorderSide(color: Colors.red),
label: Text('Chip'),
),
),
```
---
2023-08-25 14:47:08 +00:00
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
Taha Tesser
23315f1b57
[Reland] #131609 ( #132555 )
...
This relands https://github.com/flutter/flutter/pull/131609
---
fixes [`PopupMenuItem` adds redundant padding when using `ListItem`](https://github.com/flutter/flutter/issues/128553 )
2023-08-16 00:44:06 +00:00
Polina Cherkasova
f0e7c51816
Upgrade flutter packages. ( #132585 )
2023-08-15 13:50:17 -07:00
Casey Hillers
7ce2d83b84
Revert "Fix PopupMenuItem & CheckedPopupMenuItem has redundant ListTile padding and update default horizontal padding for Material 3" ( #132457 )
...
Reverts flutter/flutter#131609
b/295497265 - This broke Google Testing. We'll need the internal patch
before landing as there's a large number of customer codebases impacted.
2023-08-13 14:27:01 -07:00
Polina Cherkasova
60634c65b2
Upgrade flutter packages. ( #132326 )
2023-08-10 13:44:05 -07:00
Taha Tesser
96e02c61dc
Fix PopupMenuItem & CheckedPopupMenuItem has redundant ListTile padding and update default horizontal padding for Material 3 ( #131609 )
...
fixes [`PopupMenuItem` adds redundant padding when using `ListItem`](https://github.com/flutter/flutter/issues/128553 )
### Description
- Fixed redundant `ListTile` padding when using `CheckedPopupMenuItem` or `PopupMenuItem` with the `ListTile` child for complex popup menu items as suggested in the docs.
- Updated default horizontal padding for popup menu items.
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
/// Flutter code sample for [PopupMenuButton].
// This is the type used by the popup menu below.
enum SampleItem { itemOne, itemTwo, itemThree }
void main() => runApp(const PopupMenuApp());
class PopupMenuApp extends StatelessWidget {
const PopupMenuApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
home: const PopupMenuExample(),
);
}
}
class PopupMenuExample extends StatefulWidget {
const PopupMenuExample({super.key});
@override
State<PopupMenuExample> createState() => _PopupMenuExampleState();
}
class _PopupMenuExampleState extends State<PopupMenuExample> {
SampleItem? selectedMenu;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('PopupMenuButton')),
body: Center(
child: SizedBox(
width: 150,
height: 100,
child: Align(
alignment: Alignment.topLeft,
child: PopupMenuButton<SampleItem>(
initialValue: selectedMenu,
// Callback that sets the selected popup menu item.
onSelected: (SampleItem item) {
setState(() {
selectedMenu = item;
});
},
itemBuilder: (BuildContext context) =>
<PopupMenuEntry<SampleItem>>[
const PopupMenuItem<SampleItem>(
value: SampleItem.itemOne,
child: Text('PopupMenuItem'),
),
const CheckedPopupMenuItem<SampleItem>(
checked: true,
value: SampleItem.itemTwo,
child: Text('CheckedPopupMenuItem'),
),
const PopupMenuItem<SampleItem>(
value: SampleItem.itemOne,
child: ListTile(
leading: Icon(Icons.cloud),
title: Text('ListTile'),
contentPadding: EdgeInsets.zero,
trailing: Icon(Icons.arrow_right_rounded),
),
),
],
),
),
),
),
);
}
}
```
</details>
### Before
- Default horizontal padding is the same as M2 (16.0), while the specs use a smaller value (12.0)
- `ListTile` nested by default in `CheckedPopupMenuItem` has redundant padding
- `PopupMenuItem` using `ListTile` as a child for complex menu items contains redundant padding.
### After
- Default horizontal padding is updated for Material 3.
- `PopupMenuItem` & `CheckedPopupMenuItem` override `ListTile` padding (similar to how `ExpansionTile` overrides `ListTile` text and icon color.
2023-08-10 16:05:03 +00:00
Zachary Anderson
f4c25bbb35
Revert "Handle breaking changes in leak_tracker." ( #132223 )
...
Reverts flutter/flutter#131998
Reverting for https://github.com/flutter/flutter/issues/132222
2023-08-09 08:14:39 -07:00
Qun Cheng
0bc5a2bca4
Add textCapitalization property for SearchBar and SearchAnchor ( #131459 )
...
This is to add `textCapitalization` property for `SearchBar` and `SearchAnchor`.
Fixes : #131260
2023-08-08 23:24:19 +00:00
Polina Cherkasova
acd636f7ba
Handle breaking changes in leak_tracker. ( #131998 )
2023-08-08 09:39:19 -07:00
Polina Cherkasova
2c10295904
Upgrade packages. ( #131927 )
2023-08-04 08:09:00 -07:00
Taha Tesser
0192f88328
Fix TimePicker token issue link ( #131863 )
...
Fix issue reference for https://github.com/flutter/flutter/issues/131247 (it was added in the bug fix PR https://github.com/flutter/flutter/pull/131253 )
2023-08-03 22:32:57 +00:00
Taha Tesser
2c71881f50
Fix Scrollable TabBar for Material 3 ( #131409 )
...
fixes [Material 3 `TabBar` does not take full width when `isScrollable: true`](https://github.com/flutter/flutter/issues/117722 )
### Description
1. Fixed the divider doesn't stretch to take all the available width in the scrollable tab bar in M3
2. Added `dividerHeight` property.
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
/// Flutter code sample for [TabBar].
void main() => runApp(const TabBarApp());
class TabBarApp extends StatelessWidget {
const TabBarApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: TabBarExample(),
);
}
}
class TabBarExample extends StatefulWidget {
const TabBarExample({super.key});
@override
State<TabBarExample> createState() => _TabBarExampleState();
}
class _TabBarExampleState extends State<TabBarExample> {
bool rtl = false;
bool customColors = false;
bool removeDivider = false;
Color dividerColor = Colors.amber;
Color indicatorColor = Colors.red;
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Directionality(
textDirection: rtl ? TextDirection.rtl : TextDirection.ltr,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Sample'),
actions: <Widget>[
IconButton.filledTonal(
tooltip: 'Switch direction',
icon: const Icon(Icons.swap_horiz),
onPressed: () {
setState(() {
rtl = !rtl;
});
},
),
IconButton.filledTonal(
tooltip: 'Use custom colors',
icon: const Icon(Icons.color_lens),
onPressed: () {
setState(() {
customColors = !customColors;
});
},
),
IconButton.filledTonal(
tooltip: 'Show/hide divider',
icon: const Icon(Icons.remove_rounded),
onPressed: () {
setState(() {
removeDivider = !removeDivider;
});
},
),
],
),
body: Column(
children: <Widget>[
const Spacer(),
const Text('Scrollable - TabAlignment.start'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.start,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Scrollable - TabAlignment.startOffset'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.startOffset,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Scrollable - TabAlignment.center'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.center,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Spacer(),
const Text('Non-scrollable - TabAlignment.fill'),
TabBar(
tabAlignment: TabAlignment.fill,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Non-scrollable - TabAlignment.center'),
TabBar(
tabAlignment: TabAlignment.center,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Spacer(),
const Text('Secondary - TabAlignment.fill'),
TabBar.secondary(
tabAlignment: TabAlignment.fill,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Text('Secondary - TabAlignment.center'),
TabBar.secondary(
tabAlignment: TabAlignment.center,
dividerColor: customColors ? dividerColor : null,
indicatorColor: customColors ? indicatorColor : null,
dividerHeight: removeDivider ? 0 : null,
tabs: const <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
const Spacer(),
],
),
),
),
);
}
}
```
</details>
### Before
### After
This also contains regression test for https://github.com/flutter/flutter/pull/125974#discussion_r1239089151
```dart
// This is a regression test for https://github.com/flutter/flutter/pull/125974#discussion_r1239089151 .
testWidgets('Divider can be constrained', (WidgetTester tester) async {
```
2023-08-02 00:48:06 +00:00
Polina Cherkasova
35213ceabd
Upgrade Flutter libraries. ( #131700 )
2023-08-01 12:59:47 -07:00
Taha Tesser
7d89617a92
Fix TimePicker defaults for hourMinuteTextStyle and dayPeriodTextColor for Material 3 ( #131253 )
...
fixes [`TimePicker` color and visual issues](https://github.com/flutter/flutter/issues/127035 )
## Description
- fixes default text style for `TimePicker`s `hourMinuteTextStyle` and added a todo for https://github.com/flutter/flutter/issues/131247
- fixes correct default color not being accessed for `dayPeriodTextColor`
- Updates tests
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(useMaterial3: true),
home: const Example(),
);
}
}
class Example extends StatelessWidget {
const Example({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showTimePicker(
context: context,
orientation: Orientation.portrait,
initialEntryMode: TimePickerEntryMode.input,
initialTime: TimeOfDay.now(),
builder: (BuildContext context, Widget? child) {
return MediaQuery(
data: MediaQuery.of(context)
.copyWith(alwaysUse24HourFormat: true),
child: child!,
);
},
);
},
child: const Text('Open Time Picker'),
),
),
);
}
}
```
</details>
### Before
### After
2023-07-28 14:11:23 +00:00
Jason Simmons
8a84437989
Manual roll to engine commit 9b14c382 using Dart SDK version 3.2.x ( #131371 )
...
Dart SDK 3.2.x requires a new version of the dart_internal package.
2023-07-27 17:33:07 +00:00
Taha Tesser
5554b0eeb3
Fix M3 TimePicker dial background uses incorrect color ( #131045 )
...
fixes [Material3: TimePicker clock dial use wrong spec color and its web spec has a mistake](https://github.com/flutter/flutter/issues/118657 )
### Description
This PR fixes the default color used for the Material 3 dial background.
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final ThemeData theme = ThemeData(useMaterial3: true);
return MaterialApp(
debugShowCheckedModeBanner: false,
// theme: theme,
theme: theme.copyWith(
colorScheme: theme.colorScheme.copyWith(
surfaceVariant: const Color(0xffffbf00),
),
),
home: const Example(),
);
}
}
class Example extends StatelessWidget {
const Example({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sample'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
},
child: const Text('Open Time Picker'),
),
),
);
}
}
```
</details>
### Default dial background color
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/59514586-60c6-489f-b024-f659a26fa1e7 " /> | <img src="https://github.com/flutter/flutter/assets/48603081/75c3c360-df2b-47c8-8187-136ff6d963b6 " /> |
### Custom color scheme
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/666dd2fc-7ee2-4268-9af0-923019adfccd " /> | <img src="https://github.com/flutter/flutter/assets/48603081/f32dc39e-a43f-4a63-a6e4-9df479b723ed " /> |
2023-07-24 18:30:23 +00:00
Pierre-Louis
0830a362d5
Add support for M3 motion ( #129942 )
...
## Description
This adds support for M3 easing and duration tokens.
This PR includes these changes:
* Generation of duration and easing constants, in `Durations` and
`Easing`, respectively (`Curves` is already taken in the `animation`
library)
* Add 3 Dart fixes
Once this is merged, I'll migrate packages/plugins/customers and then
uncomment the deprecation notices for the 3 M2 curves, all of which have
1:1 replacements.
## Related Issues
- Fixes https://github.com/flutter/flutter/issues/116525
## Tests
- Added Dart fix tests
## Pre-launch Checklist
- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] All existing and new tests are passing.
If you need help, consider asking for advice on the #hackers-new channel
on [Discord].
<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#overview
[Tree Hygiene]: https://github.com/flutter/flutter/wiki/Tree-hygiene
[test-exempt]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/wiki/Tree-hygiene#handling-breaking-changes
[Discord]: https://github.com/flutter/flutter/wiki/Chat
2023-07-19 22:07:59 +02:00
flutter-pub-roller-bot
edcaa335d1
Roll pub packages ( #130821 )
...
This PR was generated by `flutter update-packages --force-upgrade`.
2023-07-18 21:55:17 +00:00
LongCatIsLooong
b2e22d3558
Replaces textScaleFactor with TextScaler ( #128522 )
...
Deprecate `textScaleFactor` in favor of `textScaler`, in preparation for Android 14 [Non-linear font scaling to 200%](https://developer.android.com/about/versions/14/features#non-linear-font-scaling ). The `TextScaler` class can be moved to `dart:ui` in the future, if we decide to use the Android platform API or AndroidX to get the scaling curve instead of hard coding the curve in the framework.
I haven't put the Flutter version in the deprecation message so the analyzer checks are failing. Will do so after I finish the migration guide.
**Why `TextScaler.textScaleFactor`**
The author of a `TextScaler` subclass should provide a fallback `textScaleFactor`. By making `TextScaler` also contain the `textScaleFactor` information it also makes it easier to migrate: if a widget overrides `MediaQueryData.textScaler` in the tree, for unmigrated widgets in the subtree it would also have to override `MediaQueryData.textScaleFactor`, and that makes it difficult to remove `MediaQueryData.textScaleFactor` in the future.
## A full list of affected APIs in this PR
Deprecated: The method/getter/setter/argument is annotated with a `@Deprecated()` annotation in this PR, and the caller should replace it with `textScaler` instead. Unless otherwise specified there will be a Flutter fix available to help with migration but it's still recommended to migrate case-by-case.
**Replaced**: The method this `textScaleFactor` argument belongs to is rarely called directly by user code and is not overridden by any of the registered custom tests, so the argument is directly replaced by `TextScaler`.
**To Be Deprecated**: The method/getter/setter/argument can't be deprecated in this PR because a registered customer test depends on it and a Flutter fix isn't available (or the test was run without applying flutter fixes first). This method/getter/setter/argument will be deprecated in a followup PR once the registered test is migrated.
### `Painting` Library
| Affected API | State of `textScaleFactor` | Comment |
| --- | --- | --- |
| `InlineSpan.build({ double textScaleFactor = 1.0 })` argument | **Replaced** | |
| `TextStyle.getParagraphStyle({ double TextScaleFactor = 1.0 })` argument | **Replaced** | |
| `TextStyle.getTextStyle({ double TextScaleFactor = 1.0 })` argument| Deprecated | Can't replace: c47fd38dca/super_editor/lib/src/infrastructure/super_textfield/desktop/desktop_textfield.dart (L1903-L1905)cd7b93532e/packages/flutter_markdown/test/text_scale_factor_test.dart (LL39C21-L39C35)cd7b93532e/packages/flutter_markdown/lib/src/_functions_io.dart (L68-L70)cd7b93532e/packages/flutter_markdown/lib/src/builder.dart (L829-L843)914d120da1/packages/rfw/lib/src/flutter/core_widgets.dart (L647)https://github.com/dart-lang/sdk/issues/52664 |
| `Text.rich({ double? TextScaleFactor = 1.0 })` constructor argument | **To Be Deprecated** | The default constructor has an argument that can't be deprecated right away. No Flutter Fix because of https://github.com/dart-lang/sdk/issues/52664 |
| `Text.textScaleFactor` getter | **To Be Deprecated** | A constructor argument can't be deprecated right away |
| `EditableText({ double? TextScaleFactor = 1.0 })` constructor argument | Deprecated | No Flutter Fix because of https://github.com/dart-lang/sdk/issues/52664 |
| `EditableText.textScaleFactor` getter | Deprecated | |
### `Material` Library
| Affected API | State of `textScaleFactor` | Comment |
| --- | --- | --- |
| `SelectableText({ double? TextScaleFactor = 1.0 })` constructor argument | **To Be Deprecated** | cd7b93532e/packages/flutter_markdown/lib/src/builder.dart (L829-L843)https://github.com/dart-lang/sdk/issues/52664 |
| `SelectableText.rich({ double? TextScaleFactor = 1.0 })` constructor argument | **To Be Deprecated** | The default constructor has an argument that can't be deprecated right away. No Flutter Fix because of https://github.com/dart-lang/sdk/issues/52664 |
| `SelectableText.textScaleFactor` getter | **To Be Deprecated** | A constructor argument can't be deprecated right away |
A lot of material widgets (`Slider`, `RangeSlider`, `TimePicker`, and different types of buttons) also change their layout based on `textScaleFactor`. These need to be handled in a case-by-case fashion and will be migrated in follow-up PRs.
2023-07-17 17:56:07 +00:00
Alexander Aprelev
3b8f6c4020
Upgrade framework pub dependencies, roll engine with rolled dart sdk ( #130163 )
...
Manual roll is needed because incoming dart sdk requires updated version
vm_snapshot_analysis (>=0.7.4).
5ae09b8b4f...7c83ea3e85#43457 )" (#43472 )
9ef3e8d533 Roll Skia from 5eba922297bb to 93c92f97f5ab (2 revisions) (#43471 )
```
Remove implementation of SuitePlatform from the test as well. Remove use
of fake cwd from SuitePlatform as it can't be properly faked.
2023-07-07 13:55:35 -07:00
Taha Tesser
7cef966147
Fix NavigationDrawer selected item has wrong icon color ( #129625 )
...
fixes [NavigationDrawer selected item has wrong icon color [Material3 spec]](https://github.com/flutter/flutter/issues/129572 )
### Description
This PR fixes a mistake in the `NavigationDrawer` defaults, where generated token value returns a `null`.
This issue can be detected when you want to customize the selected icon color for `NavigationDrawerDestination` using a custom color scheme.
### Code sample
<details>
<summary>expanded to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
themeMode: ThemeMode.light,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue).copyWith(
onSecondaryContainer: Colors.red,
),
useMaterial3: true,
),
home: const Example(),
);
}
}
class Example extends StatelessWidget {
const Example({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('NavigationDrawer Sample'),
),
drawer: const NavigationDrawer(
children: <Widget>[
NavigationDrawerDestination(
icon: Icon(Icons.favorite_outline_rounded),
label: Text('Favorite'),
selectedIcon: Icon(Icons.favorite_rounded),
),
NavigationDrawerDestination(
icon: Icon(Icons.favorite_outline_rounded),
label: Text('Favorite'),
),
],
),
);
}
}
```
</details>
### Before
<img width="1053" alt="Screenshot 2023-06-27 at 13 24 38" src="https://github.com/flutter/flutter/assets/48603081/18c13a73-688f-4586-bb60-bddef45d173f ">
### After
<img width="1053" alt="Screenshot 2023-06-27 at 13 24 25" src="https://github.com/flutter/flutter/assets/48603081/8a1427c6-517f-424a-b0bd-24bad7c5fbb0 ">
2023-06-30 08:58:14 +00:00
Kate Lovett
087377ea2f
Revert "Fix Material 3 Scrollable TabBar" ( #129383 )
...
Reverts flutter/flutter#125974
2023-06-22 22:34:06 +00:00
Taha Tesser
32fde139bc
Fix Material 3 Scrollable TabBar ( #125974 )
...
fix https://github.com/flutter/flutter/issues/117722
### Description
1. Fix the divider doesn't stretch to take all the available width in the scrollable tab bar in M3
2. Add `dividerHeight` property.
3. Update the default tab alignment for the scrollable tab bar to match the specs (this is backward compatible for M2 with the new `tabAlignment` property).
### Bug (default tab alignment)
### Fix (default tab alignment)
### Code sample
<details>
<summary>code sample</summary>
```dart
import 'package:flutter/material.dart';
/// Flutter code sample for [TabBar].
void main() => runApp(const TabBarApp());
class TabBarApp extends StatelessWidget {
const TabBarApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// tabBarTheme: const TabBarTheme(tabAlignment: TabAlignment.start),
useMaterial3: true,
),
home: const TabBarExample(),
);
}
}
class TabBarExample extends StatefulWidget {
const TabBarExample({super.key});
@override
State<TabBarExample> createState() => _TabBarExampleState();
}
class _TabBarExampleState extends State<TabBarExample> {
bool rtl = false;
@override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Directionality(
textDirection: rtl ? TextDirection.rtl : TextDirection.ltr,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Sample'),
),
body: const Column(
children: <Widget>[
Text('Scrollable-TabAlignment.start'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.start,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Text('Scrollable-TabAlignment.startOffset'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.startOffset,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Text('Scrollable-TabAlignment.center'),
TabBar(
isScrollable: true,
tabAlignment: TabAlignment.center,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Spacer(),
Text('Non-scrollable-TabAlignment.fill'),
TabBar(
tabAlignment: TabAlignment.fill,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Text('Non-scrollable-TabAlignment.center'),
TabBar(
tabAlignment: TabAlignment.center,
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
Spacer(),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
setState(() {
rtl = !rtl;
});
},
label: const Text('Switch Direction'),
icon: const Icon(Icons.swap_horiz),
),
),
),
);
}
}
```
</details>
2023-06-22 17:30:46 +00:00
Taha Tesser
467c970bfb
Introduce MaterialState color property for chips ( #128584 )
...
fixes https://github.com/flutter/flutter/issues/115827
fixes https://github.com/flutter/flutter/issues/101325
### Description
1. This PR adds a new MaterialState `color` property to all the chips (this makes it possible to customize chips in all states from the M3 specs).
2. Updated defaults to use the new MaterialState `color` property.
3. Updated and added new tests to all the chip test classes.
<details>
<summary>code sample</summary>
```dart
import 'package:flutter/material.dart';
const Color disabledColor = Colors.black26;
const Color backgroundColor = Colors.cyan;
final Color disabledSelectedColor = Colors.red.shade100;
const Color selectedColor = Colors.amber;
final MaterialStateProperty<Color> color =
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled) &&
states.contains(MaterialState.selected)) {
return disabledSelectedColor;
}
if (states.contains(MaterialState.disabled)) {
return disabledColor;
}
if (states.contains(MaterialState.selected)) {
return selectedColor;
}
return backgroundColor;
});
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
// chipTheme: ChipThemeData(color: color),
),
home: const Example(),
);
}
}
class Example extends StatefulWidget {
const Example({super.key});
@override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
bool enabled = false;
bool selected = true;
@override
Widget build(BuildContext context) {
const Widget verticalSpace = SizedBox(height: 20);
return Scaffold(
body: Center(
child: Column(
children: <Widget>[
const SizedBox(height: 25),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
const Card(
elevation: 0.0,
color: disabledColor,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('disabledColor'),
),
),
const Card(
elevation: 0.0,
color: backgroundColor,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('backgroundColor'),
),
),
Card(
elevation: 0.0,
color: disabledSelectedColor,
child: const Padding(
padding: EdgeInsets.all(8.0),
child: Text('disabledSelectedColor'),
),
),
const Card(
elevation: 0.0,
color: selectedColor,
child: Padding(
padding: EdgeInsets.all(8.0),
child: Text('selectedColor'),
),
),
],
),
const Spacer(),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RawChip(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('RawChip'),
isEnabled: enabled,
onSelected: enabled ? (bool value) {} : null,
),
verticalSpace,
InputChip(
isEnabled: enabled,
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('InputChip'),
onSelected: enabled ? (bool value) {} : null,
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
FilterChip(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('FilterChip'),
onSelected: enabled ? (bool value) {} : null,
),
verticalSpace,
FilterChip.elevated(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('FilterChip.elevated'),
onSelected: enabled ? (bool value) {} : null,
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ChoiceChip(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('ChoiceChip'),
onSelected: enabled ? (bool value) {} : null,
),
verticalSpace,
ChoiceChip.elevated(
selected: selected,
selectedColor: selectedColor,
color: color,
label: const Text('ChoiceChip.elevated'),
onSelected: enabled ? (bool value) {} : null,
),
],
),
],
),
const Spacer(),
Row(
children: <Widget>[
Flexible(
child: SwitchListTile(
title: const Text('Enabled'),
value: enabled,
onChanged: (bool value) {
setState(() => enabled = value);
},
),
),
Flexible(
child: SwitchListTile(
title: const Text('Selected'),
value: selected,
onChanged: (bool value) {
setState(() => selected = value);
},
),
),
],
)
],
),
),
);
}
}
```
</details>
### Before (not possible to customize disabled and selected chips)
### After (using disabled and selected chips using the new MaterialState `color` property)
2023-06-19 22:03:26 +00:00
