flutter_flutter

mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00

History

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

bin

Add Card.filled and Card.outlined factory methods (#136229 )

2023-11-01 23:29:49 +00:00

data

Introduce tone-based surfaces and accent color add-ons - Part 2 (#138521 )

2024-02-20 19:01:50 +00:00

generated

Introduce tone-based surfaces and accent color add-ons - Part 2 (#138521 )

2024-02-20 19:01:50 +00:00

lib

Add timeSelectorSeparatorColor and timeSelectorSeparatorTextStyle for Material 3 Time Picker (#143739 )

2024-02-21 08:10:01 +00:00

test

Fix gen_defaults test randomness (#142743 )

2024-02-01 21:22:51 +00:00

dart_test.yaml

Really disable shuffling for gen_defaults tests (#142721 )

2024-02-01 10:09:07 -08:00

pubspec.yaml

Upgrade leak_tracker. (#143236 )

2024-02-09 14:41:22 -08:00

README.md

Improve defaults generation with logging, stats, and token validation (#128244 )

2023-06-09 11:28:18 +00:00

test.json

Improve defaults generation with logging, stats, and token validation (#128244 )

2023-06-09 11:28:18 +00:00

README.md

Token Defaults Generator

Script that generates component theme data defaults based on token data.

Usage

Run this program from the root of the git repository:

dart dev/tools/gen_defaults/bin/gen_defaults.dart [-v]

This updates generated/used_tokens.csv and the various component theme files.

Templates

There is a template file for every component that needs defaults from the token database. These templates are implemented as subclasses of TokenTemplate. This base class provides some utilities and a structure for adding a new block of generated code to the bottom of a given file.

Templates need to override the generate method to provide the generated code block as a string.

See lib/fab_template.dart for an example that generates defaults for the Floating Action Button.

Tokens

Tokens are stored in JSON files in data/, and are sourced from an internal Google database.

template.dart should provide nearly all useful token resolvers (e.g. color, shape, etc.). For special cases in which one shouldn't be defined, use getToken to get the raw token value. The script, through the various revolvers and getToken, validates tokens, keeps track of which tokens are used, and generates generated/used_tokens.csv.