fixed theme issues

This commit is contained in:
Thomas Klein Langenhorst 2022-09-05 12:12:50 +02:00
parent 3752adcb7e
commit 533b8ff0b0
6 changed files with 125 additions and 123 deletions

View file

@ -31,7 +31,21 @@ class DatePickerDemo extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return DateTimePicker( return DateTimePicker(
dateTimePickerTheme: const DateTimePickerTheme(), dateTimePickerTheme: const DateTimePickerTheme(
markedIndicatorColor: Colors.red,
selectedTheme: DateBoxSelectedTheme(
Color(0x4BF44336),
TextStyle(
color: Colors.red,
),
),
highlightTheme: DateBoxHighlightTheme(
Colors.red,
TextStyle(
color: Colors.white,
),
)),
markedDates: [DateTime(2022, 9, 6)],
); );
} }
} }

View file

@ -7,107 +7,107 @@ import 'package:flutter_date_time_picker/src/widgets/month_date_time_picker.dart
import 'package:flutter_date_time_picker/src/widgets/week_date_time_picker/week_date_time_picker_sheet.dart'; import 'package:flutter_date_time_picker/src/widgets/week_date_time_picker/week_date_time_picker_sheet.dart';
import 'package:intl/date_symbol_data_local.dart'; import 'package:intl/date_symbol_data_local.dart';
/// A widget that displays a date picker from a sheet form the top of the screen.
/// This sheet displays initially displays a week but can be dragged down to show a full month.
/// Both views can be dragged sideways to show the next or previous week/month.
///
/// Example:
/// ```dart
/// DatePicker(
/// dateTimePickerTheme: const DateTimePickerTheme()
/// initialDate: selectedDate,
/// highlightToday: true,
/// onTapDay: (date) {
/// setState(() {
/// selectedDate = date;
/// });
/// },
/// markedDates: [
/// DateTime(2022, 3, 14),
/// ],
/// wrongTimeDialog:
/// AlertDialog(
/// title: const Text('Invalid Time'),
/// content: SingleChildScrollView(
/// child: ListBody(
/// children: const <Widget>[
/// Text(
/// 'The time you try to choose is diabled, try to pick another time.'),
/// ],
/// ),
/// ),
/// actions: <Widget>[
/// TextButton(
/// child: const Text('OK'),
/// onPressed: () {
/// Navigator.pop(context);
/// },
/// ),
/// ],
/// ),
/// header: Container(
/// height: 100,
/// width: MediaQuery.of(context).size.width,
/// padding: const EdgeInsets.only(bottom: 10),
/// child: Row(
/// crossAxisAlignment: CrossAxisAlignment.end,
/// mainAxisAlignment: MainAxisAlignment.center,
/// children: [
/// const SizedBox(
/// width: 160,
/// height: 34,
/// child: Center(
/// child: Text(
/// 'Personal calendar',
/// style: TextStyle(
/// fontSize: 16,
/// fontWeight: FontWeight.w900,
/// ),
/// ),
/// ),
/// ),
/// const SizedBox(
/// width: 4,
/// ),
/// Container(
/// width: 160,
/// height: 34,
/// decoration: BoxDecoration(
/// color: const Color(0xFF00273D),
/// borderRadius: const BorderRadius.all(
/// Radius.circular(10),
/// ),
/// boxShadow: [
/// BoxShadow(
/// color: const Color(0xFF000000).withOpacity(0.50),
/// offset: const Offset(0, 6),
/// blurRadius: 9,
/// ),
/// ],
/// ),
/// child: const Center(
/// child: Text(
/// 'Work calendar',
/// style: TextStyle(
/// color: Colors.white,
/// fontSize: 16,
/// fontWeight: FontWeight.w900,
/// ),
/// ),
/// ),
/// ),
/// ],
/// ),
/// ),
/// child: Container(
/// margin: const EdgeInsets.only(
/// top: 195,
/// ),
/// child: HolidayRoster(),
/// ),
/// ),
///```
class DateTimePicker extends StatefulWidget { class DateTimePicker extends StatefulWidget {
/// A widget that displays a date picker from a sheet form the top of the screen.
/// This sheet displays initially displays a week but can be dragged down to show a full month.
/// Both views can be dragged sideways to show the next or previous week/month.
///
/// Example:
/// ```dart
/// DatePicker(
/// dateTimePickerTheme: const DateTimePickerTheme()
/// initialDate: selectedDate,
/// highlightToday: true,
/// onTapDay: (date) {
/// setState(() {
/// selectedDate = date;
/// });
/// },
/// markedDates: [
/// DateTime(2022, 3, 14),
/// ],
/// wrongTimeDialog:
/// AlertDialog(
/// title: const Text('Invalid Time'),
/// content: SingleChildScrollView(
/// child: ListBody(
/// children: const <Widget>[
/// Text(
/// 'The time you try to choose is diabled, try to pick another time.'),
/// ],
/// ),
/// ),
/// actions: <Widget>[
/// TextButton(
/// child: const Text('OK'),
/// onPressed: () {
/// Navigator.pop(context);
/// },
/// ),
/// ],
/// ),
/// header: Container(
/// height: 100,
/// width: MediaQuery.of(context).size.width,
/// padding: const EdgeInsets.only(bottom: 10),
/// child: Row(
/// crossAxisAlignment: CrossAxisAlignment.end,
/// mainAxisAlignment: MainAxisAlignment.center,
/// children: [
/// const SizedBox(
/// width: 160,
/// height: 34,
/// child: Center(
/// child: Text(
/// 'Personal calendar',
/// style: TextStyle(
/// fontSize: 16,
/// fontWeight: FontWeight.w900,
/// ),
/// ),
/// ),
/// ),
/// const SizedBox(
/// width: 4,
/// ),
/// Container(
/// width: 160,
/// height: 34,
/// decoration: BoxDecoration(
/// color: const Color(0xFF00273D),
/// borderRadius: const BorderRadius.all(
/// Radius.circular(10),
/// ),
/// boxShadow: [
/// BoxShadow(
/// color: const Color(0xFF000000).withOpacity(0.50),
/// offset: const Offset(0, 6),
/// blurRadius: 9,
/// ),
/// ],
/// ),
/// child: const Center(
/// child: Text(
/// 'Work calendar',
/// style: TextStyle(
/// color: Colors.white,
/// fontSize: 16,
/// fontWeight: FontWeight.w900,
/// ),
/// ),
/// ),
/// ),
/// ],
/// ),
/// ),
/// child: Container(
/// margin: const EdgeInsets.only(
/// top: 195,
/// ),
/// child: HolidayRoster(),
/// ),
/// ),
///```
DateTimePicker({ DateTimePicker({
this.dateTimePickerTheme = const DateTimePickerTheme(), this.dateTimePickerTheme = const DateTimePickerTheme(),
this.header, this.header,

View file

@ -61,13 +61,6 @@ class MonthDateTimePicker extends StatelessWidget {
? null ? null
: () async { : () async {
TimeOfDay? timeOfDay; TimeOfDay? timeOfDay;
// await dateTimePickerController.getDragController().animateTo(
// 0.26,
// duration: const Duration(
// milliseconds: 350,
// ),
// curve: Curves.ease,
// );
DateTime selectedDate = DateTime( DateTime selectedDate = DateTime(
date.year, date.year,
@ -131,7 +124,9 @@ class MonthDateTimePicker extends StatelessWidget {
width: monthDateBoxSize / 4, width: monthDateBoxSize / 4,
height: monthDateBoxSize / 4, height: monthDateBoxSize / 4,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(context).indicatorColor, color: dateTimePickerController
.theme.markedIndicatorColor ??
Theme.of(context).indicatorColor,
borderRadius: BorderRadius.circular( borderRadius: BorderRadius.circular(
(monthDateBoxSize / 4) * 2), (monthDateBoxSize / 4) * 2),
), ),

View file

@ -30,10 +30,8 @@ class MonthDateTimePickerSheet extends StatelessWidget {
DateFormat.yMMMM().format( DateFormat.yMMMM().format(
dateTimePickerController.browsingDate, dateTimePickerController.browsingDate,
), ),
style: Theme.of(context) style: dateTimePickerController.theme.baseTheme.textStyle!
.textTheme .copyWith(fontSize: 25),
.headlineMedium!
.copyWith(color: Colors.black),
), ),
SizedBox( SizedBox(
width: MediaQuery.of(context).size.width, width: MediaQuery.of(context).size.width,

View file

@ -38,13 +38,6 @@ class WeekDateTimePicker extends StatelessWidget {
? null ? null
: () async { : () async {
TimeOfDay? timeOfDay; TimeOfDay? timeOfDay;
// await dateTimePickerController.getDragController().animateTo(
// 0.26,
// duration: const Duration(
// milliseconds: 350,
// ),
// curve: Curves.ease,
// );
DateTime selectedDate = date.daysOfWeek()[index]; DateTime selectedDate = date.daysOfWeek()[index];
@ -62,7 +55,8 @@ class WeekDateTimePicker extends StatelessWidget {
)) { )) {
showDialog( showDialog(
context: context, context: context,
builder: (context) => dateTimePickerController.wrongTimeDialog!, builder: (context) =>
dateTimePickerController.wrongTimeDialog!,
); );
} }
} }
@ -89,7 +83,7 @@ class WeekDateTimePicker extends StatelessWidget {
date.daysOfWeek().elementAt(index), date.daysOfWeek().elementAt(index),
) )
.toUpperCase()[0], .toUpperCase()[0],
style: Theme.of(context).textTheme.titleSmall, style: dateTimePickerController.theme.baseTheme.textStyle,
), ),
const Spacer(), const Spacer(),
Container( Container(

View file

@ -45,7 +45,8 @@ class WeekDateTimePickerSheet extends StatelessWidget {
if (showHeader) ...[ if (showHeader) ...[
Text( Text(
getDateHeader(), getDateHeader(),
style: Theme.of(context).textTheme.headlineSmall, style: dateTimePickerController.theme.baseTheme.textStyle!
.copyWith(fontSize: 9),
), ),
const SizedBox( const SizedBox(
height: 10, height: 10,