-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Closed
Closed
Copy link
Labels
a: qualityA truly polished experienceA truly polished experiencef: date/time pickerDate or time picker widgetsDate or time picker widgetsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
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.
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),
),
);
}
}
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:
- Provide the separate color material property in
DatePickerThemeData, where user can adjust the theme for the dialog's action buttons - Where user can pass the
cancelTextinFuture<DateTime?> showDatePicker();, user should be allowed to pass the respective color for text and background
rydmike and talamaska
Metadata
Metadata
Assignees
Labels
a: qualityA truly polished experienceA truly polished experiencef: date/time pickerDate or time picker widgetsDate or time picker widgetsf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.r: fixedIssue is closed as already fixed in a newer versionIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Type
Projects
Status
Done (PR merged)