@@ -19,6 +19,8 @@ class _CalendarWidgetTabState extends State<CalendarWidgetTab> {
1919 final CalendarView _currentView = CalendarView .month;
2020
2121 bool _showWeekNumbers = false ;
22+ // Custom cell builder toggle
23+ bool _useCustomCell = false ;
2224
2325 Widget _weekNumbersDemo () => Card (
2426 shape: RoundedRectangleBorder (borderRadius: BorderRadius .circular (12 )),
@@ -62,6 +64,116 @@ class _CalendarWidgetTabState extends State<CalendarWidgetTab> {
6264 ),
6365 );
6466
67+ Widget _customCellDemo () => Card (
68+ shape: RoundedRectangleBorder (borderRadius: BorderRadius .circular (12 )),
69+ child: Padding (
70+ padding: const EdgeInsets .all (14 ),
71+ child: Column (
72+ crossAxisAlignment: CrossAxisAlignment .start,
73+ children: [
74+ Row (
75+ mainAxisAlignment: MainAxisAlignment .spaceBetween,
76+ children: [
77+ const Text (
78+ '🆕 Custom Cell Builder' ,
79+ style: TextStyle (
80+ fontWeight: FontWeight .bold,
81+ fontSize: 14 ,
82+ color: Colors .indigo),
83+ ),
84+ Switch (
85+ value: _useCustomCell,
86+ onChanged: (val) => setState (() => _useCustomCell = val),
87+ activeThumbColor: Colors .indigo,
88+ ),
89+ ],
90+ ),
91+ const CodeBox (
92+ 'SmartCalendar(\n '
93+ ' cellBuilder: (date, events, isSelected, isToday) {\n '
94+ ' return Container(\n '
95+ ' decoration: BoxDecoration(\n '
96+ ' color: isSelected ? Colors.indigo : null,\n '
97+ ' shape: BoxShape.circle,\n '
98+ ' ),\n '
99+ ' child: Column(children: [\n '
100+ ' Text(\' ${'date.day' }\' ),\n '
101+ ' if (events.isNotEmpty)\n '
102+ ' Icon(Icons.circle, size: 6),\n '
103+ ' ]),\n '
104+ ' );\n '
105+ ' },\n '
106+ ')' ,
107+ ),
108+ const SizedBox (height: 12 ),
109+ SmartCalendar (
110+ events: _events,
111+ showViewSwitcher: false ,
112+ showTodayButton: false ,
113+ markerStyle: _markerStyle,
114+ cellBuilder: _useCustomCell
115+ ? (date, events, isSelected, isToday) =>
116+ _customCell (date, events, isSelected, isToday)
117+ : null ,
118+ ),
119+ ],
120+ ),
121+ ),
122+ );
123+
124+ Widget _customCell (
125+ DateTime date,
126+ List <CalendarEvent > events,
127+ bool isSelected,
128+ bool isToday,
129+ ) =>
130+ Container (
131+ margin: const EdgeInsets .all (3 ),
132+ decoration: BoxDecoration (
133+ color: isSelected
134+ ? Colors .indigo
135+ : isToday
136+ ? Colors .indigo.withValues (alpha: 0.15 )
137+ : events.isNotEmpty
138+ ? events.first.color.withValues (alpha: 0.1 )
139+ : null ,
140+ shape: BoxShape .circle,
141+ border: isToday && ! isSelected
142+ ? Border .all (color: Colors .indigo, width: 1.5 )
143+ : null ,
144+ ),
145+ child: Column (
146+ mainAxisAlignment: MainAxisAlignment .center,
147+ children: [
148+ Text (
149+ '${date .day }' ,
150+ style: TextStyle (
151+ fontSize: 13 ,
152+ fontWeight:
153+ isSelected || isToday ? FontWeight .bold : FontWeight .normal,
154+ color: isSelected ? Colors .white : Colors .black87,
155+ ),
156+ ),
157+ if (events.isNotEmpty)
158+ Row (
159+ mainAxisAlignment: MainAxisAlignment .center,
160+ children: events
161+ .take (2 )
162+ .map ((e) => Container (
163+ width: 4 ,
164+ height: 4 ,
165+ margin: const EdgeInsets .symmetric (horizontal: 1 ),
166+ decoration: BoxDecoration (
167+ color: isSelected ? Colors .white : e.color,
168+ shape: BoxShape .circle,
169+ ),
170+ ))
171+ .toList (),
172+ ),
173+ ],
174+ ),
175+ );
176+
65177 final List <CalendarEvent > _events = [
66178 // Single day events
67179 CalendarEvent (
@@ -215,6 +327,9 @@ class _CalendarWidgetTabState extends State<CalendarWidgetTab> {
215327 _controllerDemo (),
216328 const SizedBox (height: 16 ),
217329 _weekNumbersDemo (),
330+ const SizedBox (height: 16 ),
331+ _customCellDemo (),
332+
218333 const SizedBox (height: 16 ),
219334
220335 // Event properties
0 commit comments