How to handle Button Color on click in Calendar Carousel in Flutter
Solution 1
If you are trying to change the splash color, you may need to override it from current theme, try to wrap your calendar carousel widget in a Theme
and override the ThemeData
as it follows:
Theme(data: ThemeData(
splashColor: Colors.green,
)
child: YourCarouselWidget(),
);
Also, make sure you are updating the selected day with your setState
on the onDayPressed
property.
Solution 2
To fix this problem I did as @miguelpruivo suggested, fixing the onDayPressed on this way:
onDayPressed: (DateTime date, List<Event> events) {
this.setState(() => refresh(date));
},
void refresh(DateTime date) {
_currentDate = date;
also in the CalendarCarousel parameters:
selectedDateTime: _currentDate,
and bellow the _ScreenCalendarState declaration:
DateTime _currentDate = DateTime.now();
Singorenko
Updated on December 09, 2022Comments
-
Singorenko over 1 year
I'm using the calendar carousel calendar carousel widget for flutter. I'm trying to click on a random date on the calendar and change the button color and keep this color, but now I can not get this behavior. This is my code:
import 'package:flutter/material.dart'; import 'package:father_home_flutter/model/constants.dart'; import 'package:flutter_calendar_carousel/classes/event.dart'; import 'package:flutter_calendar_carousel/classes/event_list.dart'; import 'package:flutter_calendar_carousel/flutter_calendar_carousel.dart' show CalendarCarousel; class ScreenCalendar extends StatefulWidget { @override _ScreenCalendarState createState() => new _ScreenCalendarState(); } class _ScreenCalendarState extends State<ScreenCalendar> { static String noEventText = "No event here"; String calendarText = noEventText; @override void initState() { _markedDateMap.add( new DateTime(2019, 1, 25), new Event( date: new DateTime(2019, 1, 25), title: 'Event 5', icon: _eventIcon, )); _markedDateMap.add( new DateTime(2019, 1, 10), new Event( date: new DateTime(2019, 1, 10), title: 'Event 4', icon: _eventIcon, )); _markedDateMap.addAll(new DateTime(2019, 1, 11), [ new Event( date: new DateTime(2019, 1, 11), title: 'Event 1', icon: _eventIcon, ), new Event( date: new DateTime(2019, 1, 11), title: 'Event 2', icon: _eventIcon, ), new Event( date: new DateTime(2019, 1, 11), title: 'Event 3', icon: _eventIcon, ), ]); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Календар', style: Constants.myTextStyleAppBar, ), iconTheme: Constants.myIconThemeDataAppBar, elevation: Constants.myElevationAppBar, backgroundColor: Constants.myAppBarColor, ), body: SingleChildScrollView( child: Column(children: <Widget>[ Card( child: CalendarCarousel( weekendTextStyle: TextStyle( color: Colors.red, ), weekFormat: false, selectedDayBorderColor: Colors.green, markedDatesMap: _markedDateMap, selectedDayButtonColor: Colors.green, selectedDayTextStyle: TextStyle(color: Colors.green), todayBorderColor: Colors.transparent, weekdayTextStyle: TextStyle(color: Colors.black), height: 420.0, daysHaveCircularBorder: true, todayButtonColor: Colors.indigo, locale: 'RUS', onDayPressed: (DateTime date, List<Event> events) { this.setState(() => refresh(date)); }, )), Card( child: Container( child: Padding( padding: EdgeInsets.fromLTRB(16.0, 16.0, 16.0, 16.0), child: Center( child: Text( calendarText, style: Constants.textStyleCommonText, ))))) ]))); } void refresh(DateTime date) { print('selected date ' + date.day.toString() + date.month.toString() + date.year.toString() + ' ' + date.toString()); if(_markedDateMap.getEvents(new DateTime(date.year, date.month, date.day)).isNotEmpty){ calendarText = _markedDateMap .getEvents(new DateTime(date.year, date.month, date.day))[0] .title; } else{ calendarText = noEventText; } } } EventList<Event> _markedDateMap = new EventList<Event>(events: { new DateTime(2019, 1, 24): [ new Event( date: new DateTime(2019, 1, 24), title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, ' 'sed eiusmod tempor incidunt ut labore et dolore magna aliqua.' ' \n\nUt enim ad minim veniam,' ' quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.' ' \n\nQuis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ' 'Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', icon: _eventIcon, ) ] }); Widget _eventIcon = new Container( decoration: new BoxDecoration( color: Colors.white, borderRadius: BorderRadius.all(Radius.circular(1000)), border: Border.all(color: Colors.blue, width: 2.0)), child: new Icon( Icons.person, color: Colors.amber, ), );
and the current behavior:
Using these parameters seems to not work as I'm looking for:
selectedDayBorderColor: Colors.green, selectedDayButtonColor: Colors.green, selectedDayTextStyle: TextStyle(color: Colors.green),
-
Singorenko over 5 yearsyes, you are right, I was not properly using the onDayPressed.