|
@@ -1,20 +1,17 @@
|
1
|
1
|
import 'package:flutter/material.dart';
|
2
|
|
-import 'package:intl/date_symbol_data_local.dart';
|
|
2
|
+import 'package:fast_med_flutter/ui/pages/add_event.dart';
|
|
3
|
+import 'package:fast_med_flutter/ui/pages/view_event.dart';
|
3
|
4
|
import 'package:table_calendar/table_calendar.dart';
|
|
5
|
+import 'package:firebase_core/firebase_core.dart';
|
4
|
6
|
|
5
|
|
-// Dias sin Citas Disponibles
|
6
|
|
-final Map<DateTime, List> _holidays = {
|
7
|
|
- DateTime(2020, 11, 6): ['No Hay Citas'],
|
8
|
|
- DateTime(2020, 11, 3): ['Dia Elecciones'],
|
|
7
|
+import 'model/event.dart';
|
9
|
8
|
|
10
|
|
-};
|
11
|
|
-
|
12
|
|
-void main() {
|
13
|
|
- initializeDateFormatting().then((_) => runApp(Calendario()));
|
|
9
|
+void main() async{
|
|
10
|
+ WidgetsFlutterBinding.ensureInitialized();
|
|
11
|
+ await Firebase.initializeApp();
|
|
12
|
+ runApp(Calendario());
|
14
|
13
|
}
|
15
|
14
|
|
16
|
|
-
|
17
|
|
-
|
18
|
15
|
class Calendario extends StatelessWidget {
|
19
|
16
|
@override
|
20
|
17
|
Widget build(BuildContext context) {
|
|
@@ -23,325 +20,139 @@ class Calendario extends StatelessWidget {
|
23
|
20
|
theme: ThemeData(
|
24
|
21
|
primarySwatch: Colors.blue,
|
25
|
22
|
),
|
26
|
|
- home: MyHomePage(title: 'Citas Disponibles'),
|
|
23
|
+ home: MyHomePage(),
|
|
24
|
+ routes: {
|
|
25
|
+ "add_event": (_) => AddEventPage(),
|
|
26
|
+ },
|
27
|
27
|
);
|
28
|
28
|
}
|
29
|
29
|
}
|
30
|
30
|
|
31
|
|
-class MyHomePage extends StatefulWidget {
|
32
|
|
- MyHomePage({Key key, this.title}) : super(key: key);
|
33
|
31
|
|
34
|
|
- final String title;
|
35
|
32
|
|
|
33
|
+class MyHomePage extends StatefulWidget {
|
36
|
34
|
@override
|
37
|
35
|
_MyHomePageState createState() => _MyHomePageState();
|
38
|
36
|
}
|
39
|
37
|
|
40
|
|
-class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
|
41
|
|
- Map<DateTime, List> _events;
|
42
|
|
- List _selectedEvents;
|
43
|
|
- AnimationController _animationController;
|
44
|
|
- CalendarController _calendarController;
|
|
38
|
+class _MyHomePageState extends State<MyHomePage> {
|
|
39
|
+ CalendarController _controller;
|
|
40
|
+ Map<DateTime, List<dynamic>> _events;
|
|
41
|
+ List<dynamic> _selectedEvents;
|
45
|
42
|
|
46
|
43
|
@override
|
47
|
44
|
void initState() {
|
48
|
45
|
super.initState();
|
49
|
|
- final _selectedDay = DateTime.now();
|
50
|
|
-
|
51
|
|
- _events = {
|
52
|
|
-
|
53
|
|
- _selectedDay.add(Duration(days: 3)): Set.from([ 'Cita Cardiologo', 'Cita Dentista']).toList(),
|
54
|
|
- _selectedDay.add(Duration(days: 22)): ['Cita Cardiologo', 'Cita Dentista'],
|
55
|
|
-
|
56
|
|
- };
|
57
|
|
-
|
58
|
|
- _selectedEvents = _events[_selectedDay] ?? [];
|
59
|
|
- _calendarController = CalendarController();
|
60
|
|
-
|
61
|
|
- _animationController = AnimationController(
|
62
|
|
- vsync: this,
|
63
|
|
- duration: const Duration(milliseconds: 400),
|
64
|
|
- );
|
65
|
|
-
|
66
|
|
- _animationController.forward();
|
67
|
|
- }
|
68
|
|
-
|
69
|
|
- @override
|
70
|
|
- void dispose() {
|
71
|
|
- _animationController.dispose();
|
72
|
|
- _calendarController.dispose();
|
73
|
|
- super.dispose();
|
|
46
|
+ _controller = CalendarController();
|
|
47
|
+ _events = {};
|
|
48
|
+ _selectedEvents = [];
|
74
|
49
|
}
|
75
|
50
|
|
76
|
|
- void _onDaySelected(DateTime day, List events, List holidays) {
|
77
|
|
- print('CALLBACK: _onDaySelected');
|
78
|
|
- setState(() {
|
79
|
|
- _selectedEvents = events;
|
|
51
|
+ Map<DateTime, List<dynamic>> _groupEvents(List<EventModel> events) {
|
|
52
|
+ Map<DateTime,List<dynamic>> data = {};
|
|
53
|
+ events.forEach((event) {
|
|
54
|
+ DateTime date = DateTime(event.eventDate.year, event.eventDate.month,
|
|
55
|
+ event.eventDate.day, 12);
|
|
56
|
+ if(data[date] == null) data[date] = [];
|
|
57
|
+ data[date].add(event);
|
80
|
58
|
});
|
81
|
|
- }
|
82
|
|
-
|
83
|
|
- void _onVisibleDaysChanged(DateTime first, DateTime last, CalendarFormat format) {
|
84
|
|
- print('CALLBACK: _onVisibleDaysChanged');
|
85
|
|
- }
|
86
|
|
-
|
87
|
|
- void _onCalendarCreated(DateTime first, DateTime last, CalendarFormat format) {
|
88
|
|
- print('CALLBACK: _onCalendarCreated');
|
|
59
|
+ return data;
|
89
|
60
|
}
|
90
|
61
|
|
91
|
62
|
@override
|
92
|
63
|
Widget build(BuildContext context) {
|
93
|
64
|
return Scaffold(
|
94
|
65
|
appBar: AppBar(
|
95
|
|
- title: Text(widget.title),
|
96
|
|
- ),
|
97
|
|
- body: Column(
|
98
|
|
- mainAxisSize: MainAxisSize.max,
|
99
|
|
- children: <Widget>[
|
100
|
|
- // Switch out 2 lines below to play with TableCalendar's settings
|
101
|
|
- //-----------------------
|
102
|
|
- _buildTableCalendar(),
|
103
|
|
- // _buildTableCalendarWithBuilders(),
|
104
|
|
- const SizedBox(height: 8.0),
|
105
|
|
- _buildButtons(),
|
106
|
|
- const SizedBox(height: 8.0),
|
107
|
|
- Expanded(child: _buildEventList()),
|
108
|
|
- ],
|
109
|
|
- ),
|
110
|
|
- );
|
111
|
|
- }
|
112
|
|
- //Back button
|
113
|
|
- Widget BackButton(BuildContext context){
|
114
|
|
- return InkWell(
|
115
|
|
- onTap: (){
|
116
|
|
- Navigator.pop(context);
|
117
|
|
- },
|
118
|
|
- child: Row(
|
119
|
|
- children: <Widget>[
|
120
|
|
- Container(
|
121
|
|
- padding: EdgeInsets.only(left: 0, top:10, bottom: 10),
|
122
|
|
- child: Icon(Icons.arrow_back_ios, color: Colors.black),
|
123
|
|
- ),
|
124
|
|
- Text("Black",
|
125
|
|
- style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500))
|
126
|
|
- ]
|
127
|
|
- ),
|
128
|
|
- );
|
129
|
|
- }
|
130
|
|
-
|
131
|
|
- // Simple TableCalendar configuration (using Styles)
|
132
|
|
- Widget _buildTableCalendar() {
|
133
|
|
- return TableCalendar(
|
134
|
|
- calendarController: _calendarController,
|
135
|
|
- events: _events,
|
136
|
|
- holidays: _holidays,
|
137
|
|
- startingDayOfWeek: StartingDayOfWeek.monday,
|
138
|
|
- calendarStyle: CalendarStyle(
|
139
|
|
- selectedColor: Colors.lightBlueAccent,
|
140
|
|
- todayColor: Colors.blueAccent,
|
141
|
|
- markersColor: Colors.brown,
|
142
|
|
- outsideDaysVisible: false,
|
143
|
|
- ),
|
144
|
|
- headerStyle: HeaderStyle(
|
145
|
|
- formatButtonTextStyle: TextStyle().copyWith(color: Colors.white, fontSize: 15.0),
|
146
|
|
- formatButtonDecoration: BoxDecoration(
|
147
|
|
- color: Colors.lightBlue,
|
148
|
|
- borderRadius: BorderRadius.circular(16.0),
|
149
|
|
- ),
|
150
|
|
- ),
|
151
|
|
- onDaySelected: _onDaySelected,
|
152
|
|
- onVisibleDaysChanged: _onVisibleDaysChanged,
|
153
|
|
- onCalendarCreated: _onCalendarCreated,
|
154
|
|
- );
|
155
|
|
- }
|
156
|
|
-
|
157
|
|
- // More advanced TableCalendar configuration (using Builders & Styles)
|
158
|
|
- Widget _buildTableCalendarWithBuilders() {
|
159
|
|
- return TableCalendar(
|
160
|
|
- locale: 'pl_PL',
|
161
|
|
- calendarController: _calendarController,
|
162
|
|
- events: _events,
|
163
|
|
- holidays: _holidays,
|
164
|
|
- initialCalendarFormat: CalendarFormat.month,
|
165
|
|
- formatAnimation: FormatAnimation.slide,
|
166
|
|
- startingDayOfWeek: StartingDayOfWeek.sunday,
|
167
|
|
- availableGestures: AvailableGestures.all,
|
168
|
|
- availableCalendarFormats: const {
|
169
|
|
- CalendarFormat.month: '',
|
170
|
|
- CalendarFormat.week: '',
|
171
|
|
- },
|
172
|
|
- calendarStyle: CalendarStyle(
|
173
|
|
- outsideDaysVisible: false,
|
174
|
|
- weekendStyle: TextStyle().copyWith(color: Colors.blue),
|
175
|
|
- holidayStyle: TextStyle().copyWith(color: Colors.blue),
|
|
66
|
+ title: Text('Citas Disponibles'),
|
176
|
67
|
),
|
177
|
|
- daysOfWeekStyle: DaysOfWeekStyle(
|
178
|
|
- weekendStyle: TextStyle().copyWith(color: Colors.blue),
|
179
|
|
- ),
|
180
|
|
- headerStyle: HeaderStyle(
|
181
|
|
- centerHeaderTitle: true,
|
182
|
|
- formatButtonVisible: false,
|
183
|
|
- ),
|
184
|
|
- builders: CalendarBuilders(
|
185
|
|
- selectedDayBuilder: (context, date, _) {
|
186
|
|
- return FadeTransition(
|
187
|
|
- opacity: Tween(begin: 0.0, end: 1.0).animate(_animationController),
|
188
|
|
- child: Container(
|
189
|
|
- margin: const EdgeInsets.all(4.0),
|
190
|
|
- padding: const EdgeInsets.only(top: 5.0, left: 6.0),
|
191
|
|
- color: Colors.green,
|
192
|
|
- width: 100,
|
193
|
|
- height: 100,
|
194
|
|
- child: Text(
|
195
|
|
- '${date.day}',
|
196
|
|
- style: TextStyle().copyWith(fontSize: 16.0),
|
197
|
|
- ),
|
198
|
|
- ),
|
199
|
|
- );
|
200
|
|
- },
|
201
|
|
- todayDayBuilder: (context, date, _) {
|
202
|
|
- return Container(
|
203
|
|
- margin: const EdgeInsets.all(4.0),
|
204
|
|
- padding: const EdgeInsets.only(top: 5.0, left: 6.0),
|
205
|
|
- color: Colors.amber,
|
206
|
|
- width: 100,
|
207
|
|
- height: 100,
|
208
|
|
- child: Text(
|
209
|
|
- '${date.day}',
|
210
|
|
- style: TextStyle().copyWith(fontSize: 16.0),
|
211
|
|
- ),
|
212
|
|
- );
|
213
|
|
- },
|
214
|
|
- markersBuilder: (context, date, events, holidays) {
|
215
|
|
- final children = <Widget>[];
|
216
|
|
-
|
217
|
|
- if (events.isNotEmpty) {
|
218
|
|
- children.add(
|
219
|
|
- Positioned(
|
220
|
|
- right: 1,
|
221
|
|
- bottom: 1,
|
222
|
|
- child: _buildEventsMarker(date, events),
|
|
68
|
+ body: StreamBuilder<List<EventModel>>(
|
|
69
|
+ // stream: eventDBS.streamList(),
|
|
70
|
+ builder: (context, snapshot) {
|
|
71
|
+ if (snapshot.hasData) {
|
|
72
|
+ List<EventModel> allEvents = snapshot.data;
|
|
73
|
+ if (allEvents.isNotEmpty) {
|
|
74
|
+ _events = _groupEvents(allEvents);
|
|
75
|
+ }
|
|
76
|
+ }
|
|
77
|
+
|
|
78
|
+ return SingleChildScrollView(
|
|
79
|
+ child: Column(
|
|
80
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
81
|
+ children: <Widget>[
|
|
82
|
+ TableCalendar(
|
|
83
|
+ events: _events,
|
|
84
|
+ initialCalendarFormat: CalendarFormat.week,
|
|
85
|
+ calendarStyle: CalendarStyle(
|
|
86
|
+ canEventMarkersOverflow: true,
|
|
87
|
+ todayColor: Colors.orange,
|
|
88
|
+ selectedColor: Theme
|
|
89
|
+ .of(context)
|
|
90
|
+ .primaryColor,
|
|
91
|
+ todayStyle: TextStyle(
|
|
92
|
+ fontWeight: FontWeight.bold,
|
|
93
|
+ fontSize: 18.0,
|
|
94
|
+ color: Colors.white)),
|
|
95
|
+ headerStyle: HeaderStyle(
|
|
96
|
+ centerHeaderTitle: true,
|
|
97
|
+ formatButtonDecoration: BoxDecoration(
|
|
98
|
+ color: Colors.orange,
|
|
99
|
+ borderRadius: BorderRadius.circular(20.0),
|
|
100
|
+ ),
|
|
101
|
+ formatButtonTextStyle: TextStyle(color: Colors.white),
|
|
102
|
+ formatButtonShowsNext: false,
|
|
103
|
+ ),
|
|
104
|
+ startingDayOfWeek: StartingDayOfWeek.monday,
|
|
105
|
+
|
|
106
|
+ builders: CalendarBuilders(
|
|
107
|
+ selectedDayBuilder: (context, date, events) =>
|
|
108
|
+ Container(
|
|
109
|
+ margin: const EdgeInsets.all(4.0),
|
|
110
|
+ alignment: Alignment.center,
|
|
111
|
+ decoration: BoxDecoration(
|
|
112
|
+ color: Theme
|
|
113
|
+ .of(context)
|
|
114
|
+ .primaryColor,
|
|
115
|
+ borderRadius: BorderRadius.circular(10.0)),
|
|
116
|
+ child: Text(
|
|
117
|
+ date.day.toString(),
|
|
118
|
+ style: TextStyle(color: Colors.white),
|
|
119
|
+ )),
|
|
120
|
+ todayDayBuilder: (context, date, events) =>
|
|
121
|
+ Container(
|
|
122
|
+ margin: const EdgeInsets.all(4.0),
|
|
123
|
+ alignment: Alignment.center,
|
|
124
|
+ decoration: BoxDecoration(
|
|
125
|
+ color: Colors.orange,
|
|
126
|
+ borderRadius: BorderRadius.circular(10.0)),
|
|
127
|
+ child: Text(
|
|
128
|
+ date.day.toString(),
|
|
129
|
+ style: TextStyle(color: Colors.white),
|
|
130
|
+ )),
|
|
131
|
+ ),
|
|
132
|
+ calendarController: _controller,
|
|
133
|
+ ),
|
|
134
|
+ ..._selectedEvents.map((event) =>
|
|
135
|
+ ListTile(
|
|
136
|
+ title: Text(event.title),
|
|
137
|
+ onTap: () {
|
|
138
|
+ Navigator.push(
|
|
139
|
+ context,
|
|
140
|
+ MaterialPageRoute(
|
|
141
|
+ builder: (_) =>
|
|
142
|
+ EventDetailsPage(
|
|
143
|
+ event: event,
|
|
144
|
+ )));
|
|
145
|
+ },
|
|
146
|
+ )),
|
|
147
|
+ ],
|
223
|
148
|
),
|
224
|
149
|
);
|
225
|
150
|
}
|
226
|
|
-
|
227
|
|
- if (holidays.isNotEmpty) {
|
228
|
|
- children.add(
|
229
|
|
- Positioned(
|
230
|
|
- right: -2,
|
231
|
|
- top: -2,
|
232
|
|
- child: _buildHolidaysMarker(),
|
233
|
|
- ),
|
234
|
|
- );
|
235
|
|
- }
|
236
|
|
-
|
237
|
|
- return children;
|
238
|
|
- },
|
239
|
151
|
),
|
240
|
|
- onDaySelected: (date, events, holidays) {
|
241
|
|
- _onDaySelected(date, events, holidays);
|
242
|
|
- _animationController.forward(from: 0.0);
|
243
|
|
- },
|
244
|
|
- onVisibleDaysChanged: _onVisibleDaysChanged,
|
245
|
|
- onCalendarCreated: _onCalendarCreated,
|
246
|
|
- );
|
247
|
|
- }
|
248
|
|
-
|
249
|
|
- Widget _buildEventsMarker(DateTime date, List events) {
|
250
|
|
- return AnimatedContainer(
|
251
|
|
- duration: const Duration(milliseconds: 300),
|
252
|
|
- decoration: BoxDecoration(
|
253
|
|
- shape: BoxShape.rectangle,
|
254
|
|
- color: _calendarController.isSelected(date)
|
255
|
|
- ? Colors.brown[500]
|
256
|
|
- : _calendarController.isToday(date) ? Colors.brown : Colors.blue,
|
257
|
|
- ),
|
258
|
|
- width: 16.0,
|
259
|
|
- height: 16.0,
|
260
|
|
- child: Center(
|
261
|
|
- child: Text(
|
262
|
|
- '${events.length}',
|
263
|
|
- style: TextStyle().copyWith(
|
264
|
|
- color: Colors.green,
|
265
|
|
- fontSize: 12.0,
|
266
|
|
- ),
|
267
|
|
- ),
|
|
152
|
+ floatingActionButton: FloatingActionButton(
|
|
153
|
+ child: Icon(Icons.add),
|
|
154
|
+ onPressed: () => Navigator.pushNamed(context, 'add_event'),
|
268
|
155
|
),
|
269
|
156
|
);
|
270
|
157
|
}
|
271
|
|
-
|
272
|
|
- Widget _buildHolidaysMarker() {
|
273
|
|
- return Icon(
|
274
|
|
- Icons.add_box,
|
275
|
|
- size: 20.0,
|
276
|
|
- color: Colors.blueGrey,
|
277
|
|
- );
|
278
|
|
- }
|
279
|
|
-
|
280
|
|
- Widget _buildButtons() {
|
281
|
|
- final dateTime = _events.keys.elementAt(_events.length - 2);
|
282
|
|
-
|
283
|
|
- return Column(
|
284
|
|
- children: <Widget>[
|
285
|
|
- Row(
|
286
|
|
- mainAxisSize: MainAxisSize.max,
|
287
|
|
- mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
288
|
|
- children: <Widget>[
|
289
|
|
- RaisedButton(
|
290
|
|
- child: Text('Mes'),
|
291
|
|
- onPressed: () {
|
292
|
|
- setState(() {
|
293
|
|
- _calendarController.setCalendarFormat(CalendarFormat.month);
|
294
|
|
- });
|
295
|
|
- },
|
296
|
|
- ),
|
297
|
|
- RaisedButton(
|
298
|
|
- child: Text('2 Semanas'),
|
299
|
|
- onPressed: () {
|
300
|
|
- setState(() {
|
301
|
|
- _calendarController.setCalendarFormat(CalendarFormat.twoWeeks);
|
302
|
|
- });
|
303
|
|
- },
|
304
|
|
- ),
|
305
|
|
- RaisedButton(
|
306
|
|
- child: Text('Semana'),
|
307
|
|
- onPressed: () {
|
308
|
|
- setState(() {
|
309
|
|
- _calendarController.setCalendarFormat(CalendarFormat.week);
|
310
|
|
- });
|
311
|
|
- },
|
312
|
|
- ),
|
313
|
|
- ],
|
314
|
|
- ),
|
315
|
|
- const SizedBox(height: 8.0),
|
316
|
|
- RaisedButton(
|
317
|
|
- child: Text('Recuerde Cita ${dateTime.day}-${dateTime.month}-${dateTime.year}'),
|
318
|
|
- onPressed: () {
|
319
|
|
- _calendarController.setSelectedDay(
|
320
|
|
- DateTime(dateTime.year, dateTime.month, dateTime.day),
|
321
|
|
- runCallback: true,
|
322
|
|
- );
|
323
|
|
- },
|
324
|
|
- ),
|
325
|
|
- ],
|
326
|
|
- );
|
327
|
|
- }
|
328
|
|
-
|
329
|
|
-
|
330
|
|
- Widget _buildEventList() {
|
331
|
|
- return ListView(
|
332
|
|
- children: _selectedEvents
|
333
|
|
- .map((event) => Container(
|
334
|
|
- decoration: BoxDecoration(
|
335
|
|
- border: Border.all(width: 0.8),
|
336
|
|
- borderRadius: BorderRadius.circular(12.0),
|
337
|
|
- ),
|
338
|
|
- margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
|
339
|
|
- child: ListTile(
|
340
|
|
- title: Text(event.toString()),
|
341
|
|
- onTap: () => print('$event tapped!'),
|
342
|
|
- ),
|
343
|
|
- ))
|
344
|
|
- .toList(),
|
345
|
|
- );
|
346
|
|
- }
|
347
|
|
-}
|
|
158
|
+}
|