Skip to content

F
Front-End
Switch branch/tag
History Find file
  • Taha Tesser's avatar
    Add `cancelButtonStyle` & `confirmButtonStyle` to the `DatePickerThemeData` (#132847) · 1e770c38
    Taha Tesser authored 
    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 

![Screenshot 2023-08-18 at 16 42 00](https://github.com/flutter/flutter/assets/48603081/4ec01e93-c661-491d-9253-d687da8b76f3)
    1e770c38
Name
Last commit
 Last update
..
bin Add support for M3 motion (#129942)
data Run dart command to update widget defaults (#122557)
generated Fix Scrollable `TabBar` for Material 3 (#131409)
lib Add `cancelButtonStyle` & `confirmButtonStyle` to the `DatePickerThemeData` (#132847)
test Improve defaults generation with logging, stats, and token validation (#128244)
README.md Improve defaults generation with logging, stats, and token validation (#128244)
pubspec.yaml Update flutter packages to pick up latest vm_service (#133335)
test.json Improve defaults generation with logging, stats, and token validation (#128244)
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.

HIAST - GitLab