Skip to content

Unable to adjust the color for "Cancel" and "Ok" button in datePicker dialog #127739

@muhammadmateen027

Description

@muhammadmateen027

Is there an existing issue for this?

Use case

I have default date picker and I can see, there are number of params I can pass but there is an issue related to the color scheme for "Ok" and "Cancel" button.
I can't see anywhere to pass the button theme. Always it is taking the same style that have been provided for default TextButton.
For example, I am changing the theme for TextButton, and would like to have a different color for both buttons in DatePicker, I am not able to do that because it is using the same theme from TextButton.

image

In below example: if I am changing the theme for TextButton, I can see the buttons looks quite weird.

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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        textButtonTheme: TextButtonThemeData(
          style: ButtonStyle(
            backgroundColor: MaterialStateProperty.resolveWith((states) => Colors.red)
          )
        ),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  void _incrementCounter() {
    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(1995),
      lastDate: DateTime(2050),
    );
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'DatePicker',
        child: const Icon(Icons.date_range_rounded),
      ),
    );
  }
}
image

it totally looks weird.

Proposal

I would like to propose and contribute(Open a pull request) in improving the theme for datePicker and here are 2 approaches:

  1. Provide the separate color material property in DatePickerThemeData, where user can adjust the theme for the dialog's action buttons
  2. Where user can pass the cancelText in Future<DateTime?> showDatePicker();, user should be allowed to pass the respective color for text and background

Metadata

Metadata

Assignees

Labels

a: qualityA truly polished experiencef: date/time pickerDate or time picker widgetsf: material designflutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

Status

Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions