development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-08-24 18:36:03 +00:00
Code Issues Packages Projects Releases Wiki Activity
flutter/packages
History
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
![image](https://github.com/flutter/flutter/assets/48603081/0c84f649-545d-441b-adbf-2b9ec872b14c)

### 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
..
flutter Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle for Material 3 Time Picker (#143739) 2024-02-21 08:10:01 +00:00
flutter_driver Fix implementation imports outside of lib (#143594) 2024-02-16 22:38:10 +00:00
flutter_goldens [gold] Always provide host ABI to gold config (#143621) 2024-02-20 21:06:01 +00:00
flutter_localizations Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle for Material 3 Time Picker (#143739) 2024-02-21 08:10:01 +00:00
flutter_test Introduce tone-based surfaces and accent color add-ons - Part 2 (#138521) 2024-02-20 19:01:50 +00:00
flutter_tools [flutter_tools] enable wasm compile on beta channel (#143779) 2024-02-21 01:20:04 +00:00
flutter_web_plugins Upgrade leak_tracker. (#143236) 2024-02-09 14:41:22 -08:00
fuchsia_remote_debug_protocol Upgrade leak_tracker. (#143236) 2024-02-09 14:41:22 -08:00
integration_test Update dependencies in integration test (#143111) 2024-02-13 20:29:35 +00:00
analysis_options.yaml Unify analysis options (#108462) 2022-07-28 09:07:49 -07:00