No Description

calendario.dart 9.6KB

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