I want to customize DateRangePicker in flutter, How can I change the following elements?
Change the Save button to image.
Remove the Switch to input button.
Change the header background color.
Change day name color.
Change background color.
Change selected item indicator color.
Change selected item text color.
Change selected range indicator color.
Change selected range text color.
showDateRangePicker(
context: context,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(Duration(days: 100)),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData(
...
),
child: child,
);
},
);
Most of these things can only be changed by modifying the source, as others have said before.
You can change the header background color by applying an appBarTheme in the builder callback of showDateRangePicker.
The text colors and the selection color can also be set via applying a theme, you need to use a ColorScheme to set them.
This example sets the header background to blue, the close icon to white, the header texts + the selected date texts to white, and the selection color to red:
final themeData = Theme.of(context);
showDateRangePicker(
context: context,
initialDateRange: initialDateRange,
firstDate: firstDate,
lastDate: lastDate,
currentDate: currentDate,
initialEntryMode: initialEntryMode,
helpText: helpText,
cancelText: cancelText,
confirmText: confirmText,
saveText: saveText,
errorFormatText: errorFormatText,
errorInvalidText: errorInvalidText,
errorInvalidRangeText: errorInvalidRangeText,
fieldStartHintText: fieldStartHintText,
fieldEndHintText: fieldEndHintText,
fieldStartLabelText: fieldStartLabelText,
fieldEndLabelText: fieldEndLabelText,
locale: locale,
useRootNavigator: useRootNavigator,
routeSettings: routeSettings,
textDirection: textDirection,
builder: (context, Widget? child) => Theme(
data: themeData.copyWith(
appBarTheme: themeData.appBarTheme.copyWith(
backgroundColor: Colors.blue,
iconTheme: themeData.appBarTheme.iconTheme!.copyWith(color: Colors.white)),
colorScheme: ColorScheme.light(
onPrimary: Colors.white,
primary: Colors.red
)),
child: child!,
));
Screenshot
#Michael Feinstein is right - to elaborate a little bit on what you have to do:
You need to copy date_range_picker_dialog.dart into your lib folder (you get there by clicking 'go to implementation' on showDateRangePicker()
You need to copy calendar_date_range_picker.dart (~ line 577 of date_range_picker_dialog.dart is where the actual picker widget is returned as body of the dialog)
You need to make the adjustments you want to do in both files. Your numbers 1-3 are in the dialog, have a look at the class _CalendarRangePickerDialog and change what you need. For your 6-9 look at _buildDayItem in the range picker file and the other 2 are also easy to find :-)
Don't forget to change the import in your copy of date_range_picker_dialog.dart so that you import your copy of the date_range_picker.dart, instead of the original one.
Now you are all set and good to go.
I copy below how to change almost everything you asked in terms of color customization:
showDateRangePicker(
context: context,
firstDate: DateTime.now(),
lastDate: DateTime.now().add(Duration(days: 100)),
builder: (BuildContext context, Widget child) {
return Theme(
data: ThemeData.light().copyWith(
//Header background color
primaryColor: Colors.blue,
//Background color
scaffoldBackgroundColor: Colors.grey[50],
//Divider color
dividerColor: Colors.grey,
//Non selected days of the month color
textTheme: TextTheme(
bodyText2:
TextStyle(color: Colors.black),
),
colorScheme: ColorScheme.fromSwatch().copyWith(
//Selected dates background color
primary: Colors.blue,
//Month title and week days color
onSurface: Colors.black,
//Header elements and selected dates text color
//onPrimary: Colors.white,
),
),
child: child,
);
}
);
For that level of customization you will need to get the source code, copy it, and then make your own widget modifying that source code.
You have could do this in two ways:
Fork a library which has the code to create something similar to this and then edit the code directly and customize how you want
Look for a library which allows more customizing to the date picker, below are a few:
Date picker 1
Date picker 2
Many more are available here
I created a package calendar_date_picker2 supporting high-level customisations, just simply wrap it inside a Container and set the container color as the background colors.
Related
I would like the customize the DateRangePicker in flutter to look like the DatePicker.
I am using material 3:
screenshot of DatePicker:
screenshot of DateRangePicker:
Basically in the DateRangePicker you can barely see your selection. I want the background to be as dark as in the DatePicker.
A look at the source code of DateRangePicker reveals that it uses a app bar. I suspect this is the cause of the light color in the header background. But I don't know change that.
This is my code to show the date range picker:
await showDateRangePicker(
context: context,
firstDate: DateTime(1900),
lastDate: DateTime.now(),
);
I manage to achieve what I want thanks to the help of #Rohan Jariwala.
This is what works for me:
await showDateRangePicker(
context: context,
firstDate: DateTime(1900),
lastDate: DateTime.now(),
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
appBarTheme: Theme.of(context)
.appBarTheme
.copyWith(
backgroundColor:
Theme.of(context)
.colorScheme
.primary,
),
),
child: child!,
);
});
You can add builder in showDateRangePicker in following way
builder: (context, Widget? child) => Theme(
data: themeData.copyWith(
appBarTheme: themeData.appBarTheme.copyWith(
backgroundColor: Colors.blue,
iconTheme: themeData.appBarTheme.iconTheme!.copyWith(color: Colors.white)),
colorScheme: ColorScheme.light(
onPrimary: Colors.white,
primary: Colors.red
)),
child: child!,
));
I've added colours to the appBar and colorScheme. You can change those colours.
With a Slider widget in Flutter, there is a glow effect that radiates from the "thumb" (selection dot) when touch down is active (when user is using the slider):
This is a "material behavior" that I would like to disable for a more flat design.
Is there a way to remove this in some way, preferably via an argument to the slider?
I noticed that the glow color comes from the "activeColor" argument, but if you change it to transparent, it also affects the "active" section of the slider which is unusable:
I would like to avoid re-writing my own slider just for this.
To change a single Slider, use a SliderTheme widget to change the overlayColor to transparent.
SliderTheme(
data: SliderThemeData(
overlayColor: Colors.transparent, // <- disable "glow effect"
),
child: Slider(
value: _value,
onChanged: (v) => setState(() => _value = v),
),
)
To change all Sliders in the app, you can modify it at Theme level, for example:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
sliderTheme: SliderThemeData(
overlayColor: Colors.transparent, // <- disable "glow effect"
),
),
home: const MyHomePage(),
);
EDIT from OP:
It is apparently also important (maybe a bug as of Flutter 3.3.10) that if you have customized the activeColor argument your slider, you must instead set it using the activeTrackColor argument of the slider theme (not as an argument to the slider), otherwise the overlayColor set in the theme will have no effect.
I have been trying to make the theme of my date picker dynamic i.e. light theme and dark theme based on the system's theme. Although I have been able to successfully create a single theme, I want a dynamic theme behavior from the date picker and am unsure about how to go about it.
final datePickerDarkTheme = ThemeData.light().copyWith(
colorScheme: const ColorScheme.dark(
onPrimary: Colors.black, // selected text color
onSurface: whiteColor, // default text color
primary: orange, // circle color
),
dialogBackgroundColor: grey,
);
showDatePicker(
context: context,
builder: (context, child) {
return Theme(
data: datePickerDarkTheme,
child: child!,
);
},
initialDate: DateTime.now(),
firstDate: DateTime(1800),
lastDate: DateTime(2200),
);
Any help will be appreciated. Thanks!
I want to make a dialog for progress indicator. I want to use GIF file.
This is the gif image:
The best way is to display the gif within the dialog box. You can do something like this:
// Currently transparent, change this to your desired background color
var _backgroundColor = Colors.transparent;
showDialog(
context: context,
barrierColor: _backgroundColor,
builder: (BuildContext dialogContext) {
return AlertDialog(
backgroundColor: _backgroundColor,
content: Container(
child: Center(
child: Image.asset(
'assets/test.gif', // Put your gif into the assets folder
width: 100,
),
),
),
);
},
);
Just a quick note, the GIF you chose have a solid background color. If you want to only display the progress indicator, you have 3 options:
Remove the background from the gif
Choose a gif with transparent background
Set the _backgroundColor to the same color as the background from the gif
P/s: Another options is to design an animation yourself using Flare/ Rive but it's a bit advance. You can read more here
I need a way to change the check (✔) color to white. How do I achieve that
You can change the color of the checkmark by using checkMarkColor property
FilterChip(
label: Text('Pizza'),
shape: StadiumBorder(side: BorderSide()),
checkmarkColor: Colors.red,
backgroundColor: Colors.transparent,
),
Black or white checkmark
You can change the color to either black or white based on a light or dark theme. You can change the theme globally or wrap the specific widget within a Theme widget.
Theme(
data: ThemeData(
brightness: Brightness.dark
), // or shorthand => ThemeData.dark()
child: FilterChip(
label: Text('My chip'),
onSelected: (value) {
// ...
},
),
);
Other colors
There is currently no way to change the color of the checkmark in the FilterChip provided by the Material package to an arbitrary color. The way the checkmark is drawn can be found in the source code for the Chip classes here.
For future reference, this is the part of code that draws the checkmark:
void _paintCheck(Canvas canvas, Offset origin, double size) {
Color paintColor;
switch (theme.brightness) {
case Brightness.light:
paintColor = theme.showAvatar ? Colors.white : Colors.black.withAlpha(_kCheckmarkAlpha);
break;
case Brightness.dark:
paintColor = theme.showAvatar ? Colors.black : Colors.white.withAlpha(_kCheckmarkAlpha);
break;
}
...
So it is only able to show either as black or white right now. If you want it colored, you'll have to resort to a custom widget.
You could also chime in on the already opened issue on Flutters Github project.
You can simply wrap your FilterChip in a Theme widget, and set the desired ThemeData without changing your general app style.
Theme(
data: ThemeData.dark(), // White color. Select light for black.
child: FilterChip(
label: Text('Test'),
selected: _selected,
onSelected: (val) {
setState(() => _selected = val);
},
backgroundColor: Colors.blue,
selectedColor: Colors.pink,
labelStyle: TextStyle(
color: Colors.white,
),
),
),
You can work around this by using an Avatar and customising this to represent the tick mark, e.g.
FilterChip(
label: Text(
"label text",
style: TextStyle(color: Colors.red),
),
avatar: isSelected ? Icon(Icons.check, color: contrastColor(Colors.red)) : null,
// selected: isSelected,
},
)
The function contrastColor just looks at the supplied colour and chooses white or black depending upon its luminescence.
The animation effects when toggling ruin this slightly, so you may want to keep an 'empty' avatar rather than null if it looks bad.
Wrapping the FilterChip with a Theme sort of works but, for me at least, it rendered the background colours incorrectly (too dark) when flipping between light and dark themes.