Qun Cheng
2e7fa83f67
Normalize Card theme ( #151914 )
...
This PR is to make preparations to make `CardTheme` conform to Flutter's conventions for component themes:
* Added a `CardThemeData` class which defines overrides for the defaults for `Card` properties.
* Added 2 `CardTheme` constructor parameters: `CardThemeData? data` and `Widget? child`. This is now the preferred way to configure a `CardTheme`:
```dart
CardTheme(
data: CardThemeData(color: xxx, elevation: xxx, ...),
child: Card(...)
)
```
These two properties are made nullable to not break existing apps which has customized `ThemeData.cardTheme`.
* Changed the type of theme defaults from `CardTheme` to `CardThemeData`.
TODO:
* Fix internal failures that may have breakages.
* Change the type of `ThemeData.cardTheme` from `CardTheme` to `CardThemeData`. This may cause breaking changes, a migration guide will be created.
Addresses the "theme normalization" sub project within https://github.com/flutter/flutter/issues/91772
2024-07-29 16:48:06 +00:00
Taha Tesser
e1cd7b11f6
Introduce Switch.padding ( #149884 )
...
fixes [Switch has some padding that leads to uncentered UI](https://github.com/flutter/flutter/issues/148498 )
### 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,
home: Scaffold(
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ColoredBox(
color: Colors.amber,
child: Switch(
padding: EdgeInsets.zero,
value: true,
materialTapTargetSize: MaterialTapTargetSize.padded,
onChanged: (bool value) {},
),
),
const SizedBox(height: 16),
ColoredBox(
color: Colors.amber,
child: Switch(
value: true,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
onChanged: (bool value) {},
),
),
],
),
),
),
);
}
}
```
</details>
### Default Switch size
<img width="476" alt="Screenshot 2024-07-11 at 13 25 05" src="https://github.com/flutter/flutter/assets/48603081/f9f3f6c6-443d-4bd5-81d4-5e314554b032 ">
### Update Switch size using the new `Switch.padding` to address [Switch has some padding that leads to uncentered UI](https://github.com/flutter/flutter/issues/148498 )
<img width="476" alt="Screenshot 2024-07-11 at 13 24 40" src="https://github.com/flutter/flutter/assets/48603081/aea0717b-e852-4b8d-b703-c8c4999d4863 ">
2024-07-16 20:25:09 +00:00
Bruno Leroux
00419bfb24
Reland fix inputDecorator hint color on M3 ( #150278 )
...
## Description
This PR is a partial reland of https://github.com/flutter/flutter/pull/148944 which was reverted in https://github.com/flutter/flutter/pull/149448 .
It makes the `InputDecoration.hintText` colors compliant with the M3 spec.
The initial PR also changed the font style, I will land the font change in another PR to better track the golden changes.
## Related Issue
Related to the color part of https://github.com/flutter/flutter/issues/148787 .
## Tests
Updates several tests.
2024-06-25 21:42:59 +00:00
Bruno Leroux
4b0c8414fc
Make popup menu hardcoded padding configurable ( #150506 )
...
## Description
This PR exposed `PopupMenuButton.menuPadding` parameter to override the hardcoded value.
Credits to @Moluram for the original PR https://github.com/flutter/flutter/pull/81996 .
And to @arafaysaleem for the update in https://github.com/flutter/flutter/pull/96657 .
https://github.com/flutter/flutter/pull/96657 was reverted due to a Google testing failure. `PopupMenuButton` implementation has evolved since that time so maybe we will not hit this Google testing failure. And if we do, we will try to figure out what is going on.
## Related Issue
Fixes https://github.com/flutter/flutter/issues/143512 .
Fixes https://github.com/flutter/flutter/issues/57110
## Tests
Adds 2 tests, updates several tests.
2024-06-20 19:18:21 +00:00
Bruno Leroux
4608a89137
Fix InputDecorator suffixIcon color when in error and hovered ( #149643 )
...
## Description
This PRs makes the `InputDecoration.suffixIcon` color compliant with the M3 spec when in error state and hovered.
From M3 spec, the color should be `onErrorContainer`, see https://m3.material.io/components/text-fields/specs#e4964192-72ad-414f-85b4-4b4357abb83c
## Related Issue
Fixes https://github.com/flutter/flutter/issues/149410 .
## Tests
Updates 2 tests.
2024-06-06 06:11:25 +00:00
Michael Goderbauer
fbc0ff1f3b
Fix signature for TokenTemplate.updateFile ( #149673 )
...
This method isn't supposed to do any async work.
2024-06-05 20:51:06 +00:00
Bruno Leroux
e02d29d52e
Fix InputDecorator.prefixIcon color when disabled ( #149595 )
...
## Description
This PRs makes the `InputDecoration.prefixIcon` color compliant with the M3 spec.
From M3 spec, the color should be `onSurface.withOpacity(0.38)`, see https://m3.material.io/components/text-fields/specs#e4964192-72ad-414f-85b4-4b4357abb83c
## Related Issue
Fixes https://github.com/flutter/flutter/issues/149411 .
## Tests
Updates 2 tests.
2024-06-03 18:53:16 +00:00
auto-submit[bot]
fc8ab3b4b4
Reverts "Fix InputDecorator default hint text style on M3 ( #148944 )" ( #149448 )
...
Reverts: flutter/flutter#148944
Initiated by: loic-sharma
Reason for reverting: This caused Skia golden changes that might be unexpected. We can reland once we confirm these changes are expected, or, fixed the changes to the floating label.
Original PR Author: bleroux
Reviewed By: {Renzo-Olivares, guidezpl}
This change reverts the following previous change:
## Description
This PRs makes the `InputDecoration.hintText` style compliant with the M3 spec.
The hint style is not clearly specified in https://m3.material.io/components/text-fields/specs , but it is in the M3 Figma kit.
('hint' terminology came from the Material1 specification, since M2 the terminology is 'Placeholder').
See this Figma screenshot taken while focusing on the 'Placeholder' text (which corresponds to hint).
It seems that the intention is that the 'Placeholder' colors should be the same as the 'supporting text' ones, that is why is reused 'supporting text' tokens.
## Related Issue
Fixes https://github.com/flutter/flutter/issues/148787 .
## Tests
Updates several tests.
2024-05-31 22:06:26 +00:00
Bruno Leroux
b201fbdee5
Fix InputDecorator default hint text style on M3 ( #148944 )
...
## Description
This PRs makes the `InputDecoration.hintText` style compliant with the M3 spec.
The hint style is not clearly specified in https://m3.material.io/components/text-fields/specs , but it is in the M3 Figma kit.
('hint' terminology came from the Material1 specification, since M2 the terminology is 'Placeholder').
See this Figma screenshot taken while focusing on the 'Placeholder' text (which corresponds to hint).
It seems that the intention is that the 'Placeholder' colors should be the same as the 'supporting text' ones, that is why is reused 'supporting text' tokens.
## Related Issue
Fixes https://github.com/flutter/flutter/issues/148787 .
## Tests
Updates several tests.
2024-05-31 20:56:07 +00:00
Nate
73ecc8a9b2
Reland "if chains → switch expressions" ( #148634 )
...
I did a goof a while back:
Now that [the bug is fixed](e9d403541fhttps://github.com/flutter/flutter/pull/147793
- https://github.com/flutter/flutter/pull/148556
- https://github.com/flutter/flutter/issues/148548
2024-05-20 17:43:00 +00:00
Zachary Anderson
597462a3c4
Revert "if chains → switch expressions" ( #148556 )
...
Reverts flutter/flutter#147793
Introduced https://github.com/flutter/flutter/issues/148548 .
2024-05-17 10:27:02 -07:00
Valentin Vignal
ffae7c60c2
Add clipBehavior to DrawerThemeData ( #148061 )
...
Fixes https://github.com/flutter/flutter/issues/148060
2024-05-15 18:37:07 +00:00
Valentin Vignal
8e53ad917c
Add clipBehavior to DialogTheme ( #147635 )
...
Fixes https://github.com/flutter/flutter/issues/147634
2024-05-10 22:08:59 +00:00
Nate
4734d80f22
if chains → switch expressions (#147793 )
...
Previous "if-chains" pull requests:
- https://github.com/flutter/flutter/pull/144905
- https://github.com/flutter/flutter/pull/144977
- https://github.com/flutter/flutter/pull/145194
- https://github.com/flutter/flutter/pull/146293
- https://github.com/flutter/flutter/pull/147472
<br>
I think this one should be enough to wrap things up!
fixes https://github.com/flutter/flutter/issues/144903
---------
Co-authored-by: Victor Sanni <victorsanniay@gmail.com>
2024-05-10 00:55:48 -06:00
Taha Tesser
fa85f69e47
Add missing overlayColor property in styleFrom methods ( #146685 )
...
fixes [Add missing `overlayColor` property in `styleFrom` methods](https://github.com/flutter/flutter/issues/146636 )
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
enum Sizes { extraSmall, small, medium, large, extraLarge }
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('styleFrom(overlayColor: Colors.red)', style: Theme.of(context).textTheme.titleLarge),
TextButton(
style: TextButton.styleFrom(overlayColor: Colors.red),
onPressed: () {},
child: const Text('TextButton'),
),
IconButton(
style: IconButton.styleFrom(
overlayColor: Colors.red,
),
onPressed: () {},
icon: const Icon(Icons.add),
),
MenuBar(
children: [
MenuItemButton(
style: MenuItemButton.styleFrom(overlayColor: Colors.red),
child: const Text('MenuItemButton'),
onPressed: () {},
),
SubmenuButton(
style: SubmenuButton.styleFrom(overlayColor: Colors.red),
menuChildren: [
MenuItemButton(
child: const Text('MenuItemButton'),
onPressed: () {},
),
],
child: const Text('SubmenuButton'),
),
],
),
SegmentedButton<Sizes>(
style:
SegmentedButton.styleFrom(overlayColor: Colors.red),
segments: const <ButtonSegment<Sizes>>[
ButtonSegment<Sizes>(
value: Sizes.extraSmall, label: Text('XS')),
ButtonSegment<Sizes>(value: Sizes.small, label: Text('S')),
ButtonSegment<Sizes>(value: Sizes.medium, label: Text('M')),
ButtonSegment<Sizes>(
value: Sizes.large,
label: Text('L'),
),
ButtonSegment<Sizes>(
value: Sizes.extraLarge, label: Text('XL')),
],
selected: const {Sizes.medium},
onSelectionChanged: (Set<Sizes> newSelection) {},
multiSelectionEnabled: true,
),
],
),
),
),
);
}
}
```
</details>
### Preview
2024-04-24 11:56:32 +00:00
Bruno Leroux
58ac0dc16b
Fix label text color is wrong for a focused and hovered TextField ( #146572 )
...
Before, hovering a focused TextField would incorrect change the label color. Now it does not, which is correct per the spec.
2024-04-12 14:07:03 -07:00
Taha Tesser
9436b3c1c8
Fix out of sync templates files and add a check ( #145747 )
...
### Description
- Add a check to verify template code in the Material library is synced with `gen_defaults`
- Sync the changes to pass the new check.
2024-04-11 13:40:36 +00:00
Qun Cheng
ea1268a78d
Update tokens to v2.3.5 ( #145356 )
...
* Updated the Material Design tokens to v2.3.5
* Linear and circular progress indicator token sets are deprecated in v0.207. The `md.com.progress-indicator` token set was created and should be used instead.
* tokens is now using [semantic versioning](https://semver.org/ ) ï¼Thanks @guidezpl for reminding:) )
* ~Fixes #128877 . The default text style is updated to `bodyLarge` now:)~ Added TODOs for the label text style of `PopupMenuButton`. Will create a separate PR because this change breaks Google testing.
2024-03-28 22:22:20 +00:00
Taha Tesser
0bcd228e67
Update TabBar and TabBar.secondary to use indicator height/color M3 tokens ( #145753 )
...
fixes [Secondary `TabBar` indicator height token is missing ](https://github.com/flutter/flutter/issues/124965 )
### 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,
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: const Text('Sample'),
bottom: const TabBar.secondary(
tabs: <Widget>[
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
),
),
);
}
}
```
</details>
2024-03-28 17:56:09 +00:00
Nate
1a0dc8f1e1
Add missing parameter to TableBorder.symmetric, and improve class constructors ( #144279 )
...
Originally, my aim was just to refactor (as per usual), but while messing around with the `TableBorder.symmetric` constructor, I realized that `borderRadius` was missing!
This pull request makes a few class constructors more efficient, and it fixes #144277 by adding the missing parameter.
<br>
2024-03-04 20:20:19 +00:00
Taha Tesser
ba719bc588
Fix CalendarDatePicker day selection shape and overlay ( #144317 )
...
fixes [`DatePickerDialog` date entry hover background and ink splash have different radius](https://github.com/flutter/flutter/issues/141350 )
fixes [Ability to customize DatePicker day selection background and overlay shape](https://github.com/flutter/flutter/issues/144220 )
### 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(
home: Scaffold(
body: Center(
child: Builder(builder: (context) {
return FilledButton(
onPressed: () {
showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: DateTime.utc(2010),
lastDate: DateTime.utc(2030),
);
},
child: const Text('Show Date picker'),
);
}),
),
),
);
}
}
```
</details>
### Material DatePicker states specs
### Day selection overlay
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/b529d38d-0232-494b-8bf2-55d28420a245 " /> | <img src="https://github.com/flutter/flutter/assets/48603081/c4799559-a7ef-45fd-aed9-aeb386370580 " /> |
### Hover, pressed, highlight preview
| Before | After |
| --------------- | --------------- |
| <video src="https://github.com/flutter/flutter/assets/48603081/8edde82a-7f39-4482-afab-183e1bce5991 " /> | <video src="https://github.com/flutter/flutter/assets/48603081/04e1502e-67a4-4b33-973d-463067d70151 " /> |
### Using `DatePickerThemeData.dayShape` to customize day selection background and overlay shape
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/a0c85f58-a69b-4e14-a45d-41e580ceedce " /> | <img src="https://github.com/flutter/flutter/assets/48603081/db67cee1-d28d-4168-98b8-fd7a9cb70cda " /> |
### Example preview
2024-03-01 12:44:29 +00:00
Qun Cheng
0d8eafb006
Reland "Reland - Introduce tone-based surfaces and accent color add-ons - Part 2" ( #144273 )
2024-02-28 13:55:50 -08:00
auto-submit[bot]
2eee0b5750
Reverts "Reland - Introduce tone-based surfaces and accent color add-ons - Part 2 ( #144001 )" ( #144262 )
...
Reverts flutter/flutter#144001
Initiated by: Piinks
Reason for reverting: Failing goldens at the tip of tree
Original PR Author: QuncCccccc
Reviewed By: {HansMuller}
This change reverts the following previous change:
Original Description:
Reverts flutter/flutter#143973
This is a reland for #138521 with an updated g3fix(cl/605555997). Local test: cl/609608958.
2024-02-27 22:04:18 +00:00
Qun Cheng
871d59221c
Reland - Introduce tone-based surfaces and accent color add-ons - Part 2 ( #144001 )
...
Reverts flutter/flutter#143973
This is a reland for #138521 with an updated g3fix(cl/605555997). Local test: cl/609608958.
2024-02-27 20:21:14 +00:00
Qun Cheng
4715216c01
Revert "Introduce tone-based surfaces and accent color add-ons - Part 2" ( #143973 )
...
Reverts flutter/flutter#138521
2024-02-22 14:51:28 -08:00
Taha Tesser
3403ca413f
Update hourMinuteTextStyle defaults for Material 3 Time Picker ( #143749 )
...
fixes [`hourMinuteTextStyle` Material 3 default doesn't match the specs](https://github.com/flutter/flutter/issues/143748 )
This updates `hourMinuteTextStyle` defaults to match Material 3 specs. `hourMinuteTextStyle` should use different font style for different entry modes based on the specs.
### Specs
### Before
```dart
return _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
```
### After
```dart
return entryMode == TimePickerEntryMode.dial
? _textTheme.displayLarge!.copyWith(color: _hourMinuteTextColor.resolve(states))
: _textTheme.displayMedium!.copyWith(color: _hourMinuteTextColor.resolve(states));
```
2024-02-21 10:39:35 +00:00
Taha Tesser
95cdebedae
Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle for Material 3 Time Picker ( #143739 )
...
fixes [`Time selector separator` in TimePicker is not centered vertically](https://github.com/flutter/flutter/issues/143691 )
Separator currently `hourMinuteTextStyle` to style itself.
This introduces `timeSelectorSeparatorColor` and `timeSelectorSeparatorTextStyle` from Material 3 specs to correctly style the separator. This also adds ability to change separator color without changing `hourMinuteTextColor`.
### Specs for the time selector separator
https://m3.material.io/components/time-pickers/specs
### Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() {
runApp(const App());
}
class App extends StatelessWidget {
const App({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// timePickerTheme: TimePickerThemeData(
// hourMinuteTextColor: Colors.amber,
// )
),
home: Scaffold(
body: Center(
child: Builder(builder: (context) {
return ElevatedButton(
onPressed: () async {
await showTimePicker(
context: context,
initialTime: TimeOfDay.now(),
);
},
child: const Text('Pick Time'),
);
}),
),
),
);
}
}
```
</details>
| Before | After |
| --------------- | --------------- |
| <img src="https://github.com/flutter/flutter/assets/48603081/20beeba4-5cc2-49ee-bba8-1c552c0d1e44 " /> | <img src="https://github.com/flutter/flutter/assets/48603081/24927187-aff7-4191-930c-bceab6a4b4c2 " /> |
2024-02-21 08:10:01 +00:00
Qun Cheng
a2c7ed95d1
Introduce tone-based surfaces and accent color add-ons - Part 2 ( #138521 )
...
This PR is to introduce 19 new color roles and deprecate 3 color roles in `ColorScheme`.
**Tone-based surface colors** (7 colors):
* surfaceBright
* surfaceDim
* surfaceContainer
* surfaceContainerLowest
* surfaceContainerLow
* surfaceContainerHigh
* surfaceContainerHighest
**Accent color add-ons** (12 colors):
* primary/secondary/tertiary-Fixed
* primary/secondary/tertiary-FixedDim
* onPrimary/onSecondary/onTertiary-Fixed
* onPrimary/onSecondary/onTertiary-FixedVariant
**Deprecated colors**:
* background -> replaced with surface
* onBackground -> replaced with onSurface
* surfaceVariant -> replaced with surfaceContainerHighest
Please checkout this [design doc](https://docs.google.com/document/d/1ODqivpM_6c490T4j5XIiWCDKo5YqHy78YEFqDm4S8h4/edit?usp=sharing ) for more information:)
2024-02-20 19:01:50 +00:00
David Martos
b34ee07372
Fix token usages on Regular Chip and Action Chip ( #141701 )
...
The regular chip and the action chip templates were referencing non existent M3 design tokens.
Fixes https://github.com/flutter/flutter/issues/141288
The `ActionChip` doesn't have any visual difference. Even though the template and file changes, the default `labelStyle` color already uses `onSurface`.
For the reviewer, I've changed the `action_chip_test` to expect a color from the colorScheme so that it is more explicit that the color might not be the same as the labelLarge default in the global textTheme, even if for this case the color is the same.
The regular `Chip` does have visual differences, in particular, the label and trailing icon colors, which were not following the specification. In order to fix this, the regular chip now is based from the `filter-chip` spec as described in the linked issue.
## Before
## After
2024-02-01 00:05:22 +00:00
David Martos
20dc5cbc6c
M3 - Fix Chip icon and label colors ( #140573 )
2024-01-30 16:28:31 -08:00
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
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
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
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
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
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
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
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
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
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
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
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
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
