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
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
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
Qun Cheng
4e7e4512b6
Reorder materialStateProperty defaults ( #125905 )
...
Fixes #122250 . This PR is to make sure all the MaterialStateProperty defaults are able to correctly resolve different states.
* When a widget is pressed, it is also hovered, so we need to put the `MaterialState.pressed` check before `MaterialState.hovered`.
* When a widget is focused, the widget should still be able to be hovered, so we should check `MaterialState.hovered` before `MaterialState.focused`.
* There are also cases like in _InputDecoratorDefaultsM3, the `MaterialState.disabled` should be checked before `MaterialState.error`.
the order should be disabled, (error), pressed, hovered, focused.
2023-05-11 00:03:09 +00:00
Darren Austin
6fafbc33f2
Updated tokens to v0.152 ( #118594 )
2023-01-17 12:32:47 -08:00
Darren Austin
d8b7eb6e29
Updated token templates to sync with master code. ( #117097 )
2022-12-14 21:32:12 +00:00
Greg Spencer
fae458b925
Convert TimePicker to Material 3 ( #116396 )
...
* Make some minor changes in preparation for updating the Time Picker to M3
* Revert OutlineInputBorder.borderRadius type change
* Revert more OutlineInputBorder.borderRadius changes.
* Convert TimePicker to Material 3
* Add example test
* Revert OutlineInputBorder.borderRadius type change
* Fix test
* Review Changes
* Merge changes
* Some sizing and elevation fixes
* Fix localization tests
2022-12-14 00:09:52 +00:00
