123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- import 'package:flutter/material.dart';
- import 'package:intl/date_symbol_data_local.dart';
- import 'package:table_calendar/table_calendar.dart';
-
- // Dias sin Citas Disponibles
- final Map<DateTime, List> _holidays = {
- DateTime(2020, 11, 6): ['No Hay Citas'],
- DateTime(2020, 11, 3): ['Dia Elecciones'],
-
- };
-
- void main() {
- initializeDateFormatting().then((_) => runApp(MyApp()));
- }
-
-
-
- class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'Citas Disponibles',
- theme: ThemeData(
- primarySwatch: Colors.blue,
- ),
- home: MyHomePage(title: 'Citas Disponibles'),
- );
- }
- }
-
- class MyHomePage extends StatefulWidget {
- MyHomePage({Key key, this.title}) : super(key: key);
-
- final String title;
-
- @override
- _MyHomePageState createState() => _MyHomePageState();
- }
-
- class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
- Map<DateTime, List> _events;
- List _selectedEvents;
- AnimationController _animationController;
- CalendarController _calendarController;
-
- @override
- void initState() {
- super.initState();
- final _selectedDay = DateTime.now();
-
- _events = {
-
- _selectedDay.add(Duration(days: 3)): Set.from([ 'Cita Cardiologo', 'Cita Dentista']).toList(),
- _selectedDay.add(Duration(days: 22)): ['Cita Cardiologo', 'Cita Dentista'],
-
- };
-
- _selectedEvents = _events[_selectedDay] ?? [];
- _calendarController = CalendarController();
-
- _animationController = AnimationController(
- vsync: this,
- duration: const Duration(milliseconds: 400),
- );
-
- _animationController.forward();
- }
-
- @override
- void dispose() {
- _animationController.dispose();
- _calendarController.dispose();
- super.dispose();
- }
-
- void _onDaySelected(DateTime day, List events, List holidays) {
- print('CALLBACK: _onDaySelected');
- setState(() {
- _selectedEvents = events;
- });
- }
-
- void _onVisibleDaysChanged(DateTime first, DateTime last, CalendarFormat format) {
- print('CALLBACK: _onVisibleDaysChanged');
- }
-
- void _onCalendarCreated(DateTime first, DateTime last, CalendarFormat format) {
- print('CALLBACK: _onCalendarCreated');
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(
- title: Text(widget.title),
- ),
- body: Column(
- mainAxisSize: MainAxisSize.max,
- children: <Widget>[
- // Switch out 2 lines below to play with TableCalendar's settings
- //-----------------------
- _buildTableCalendar(),
- // _buildTableCalendarWithBuilders(),
- const SizedBox(height: 8.0),
- _buildButtons(),
- const SizedBox(height: 8.0),
- Expanded(child: _buildEventList()),
- ],
- ),
- );
- }
- //Back button
- Widget BackButton(BuildContext context){
- return InkWell(
- onTap: (){
- Navigator.pop(context);
- },
- child: Row(
- children: <Widget>[
- Container(
- padding: EdgeInsets.only(left: 0, top:10, bottom: 10),
- child: Icon(Icons.arrow_back_ios, color: Colors.black),
- ),
- Text("Black",
- style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500))
- ]
- ),
- );
- }
-
- // Simple TableCalendar configuration (using Styles)
- Widget _buildTableCalendar() {
- return TableCalendar(
- calendarController: _calendarController,
- events: _events,
- holidays: _holidays,
- startingDayOfWeek: StartingDayOfWeek.monday,
- calendarStyle: CalendarStyle(
- selectedColor: Colors.lightBlueAccent,
- todayColor: Colors.blueAccent,
- markersColor: Colors.brown,
- outsideDaysVisible: false,
- ),
- headerStyle: HeaderStyle(
- formatButtonTextStyle: TextStyle().copyWith(color: Colors.white, fontSize: 15.0),
- formatButtonDecoration: BoxDecoration(
- color: Colors.lightBlue,
- borderRadius: BorderRadius.circular(16.0),
- ),
- ),
- onDaySelected: _onDaySelected,
- onVisibleDaysChanged: _onVisibleDaysChanged,
- onCalendarCreated: _onCalendarCreated,
- );
- }
-
- // More advanced TableCalendar configuration (using Builders & Styles)
- Widget _buildTableCalendarWithBuilders() {
- return TableCalendar(
- locale: 'pl_PL',
- calendarController: _calendarController,
- events: _events,
- holidays: _holidays,
- initialCalendarFormat: CalendarFormat.month,
- formatAnimation: FormatAnimation.slide,
- startingDayOfWeek: StartingDayOfWeek.sunday,
- availableGestures: AvailableGestures.all,
- availableCalendarFormats: const {
- CalendarFormat.month: '',
- CalendarFormat.week: '',
- },
- calendarStyle: CalendarStyle(
- outsideDaysVisible: false,
- weekendStyle: TextStyle().copyWith(color: Colors.blue),
- holidayStyle: TextStyle().copyWith(color: Colors.blue),
- ),
- daysOfWeekStyle: DaysOfWeekStyle(
- weekendStyle: TextStyle().copyWith(color: Colors.blue),
- ),
- headerStyle: HeaderStyle(
- centerHeaderTitle: true,
- formatButtonVisible: false,
- ),
- builders: CalendarBuilders(
- selectedDayBuilder: (context, date, _) {
- return FadeTransition(
- opacity: Tween(begin: 0.0, end: 1.0).animate(_animationController),
- child: Container(
- margin: const EdgeInsets.all(4.0),
- padding: const EdgeInsets.only(top: 5.0, left: 6.0),
- color: Colors.green,
- width: 100,
- height: 100,
- child: Text(
- '${date.day}',
- style: TextStyle().copyWith(fontSize: 16.0),
- ),
- ),
- );
- },
- todayDayBuilder: (context, date, _) {
- return Container(
- margin: const EdgeInsets.all(4.0),
- padding: const EdgeInsets.only(top: 5.0, left: 6.0),
- color: Colors.amber,
- width: 100,
- height: 100,
- child: Text(
- '${date.day}',
- style: TextStyle().copyWith(fontSize: 16.0),
- ),
- );
- },
- markersBuilder: (context, date, events, holidays) {
- final children = <Widget>[];
-
- if (events.isNotEmpty) {
- children.add(
- Positioned(
- right: 1,
- bottom: 1,
- child: _buildEventsMarker(date, events),
- ),
- );
- }
-
- if (holidays.isNotEmpty) {
- children.add(
- Positioned(
- right: -2,
- top: -2,
- child: _buildHolidaysMarker(),
- ),
- );
- }
-
- return children;
- },
- ),
- onDaySelected: (date, events, holidays) {
- _onDaySelected(date, events, holidays);
- _animationController.forward(from: 0.0);
- },
- onVisibleDaysChanged: _onVisibleDaysChanged,
- onCalendarCreated: _onCalendarCreated,
- );
- }
-
- Widget _buildEventsMarker(DateTime date, List events) {
- return AnimatedContainer(
- duration: const Duration(milliseconds: 300),
- decoration: BoxDecoration(
- shape: BoxShape.rectangle,
- color: _calendarController.isSelected(date)
- ? Colors.brown[500]
- : _calendarController.isToday(date) ? Colors.brown : Colors.blue,
- ),
- width: 16.0,
- height: 16.0,
- child: Center(
- child: Text(
- '${events.length}',
- style: TextStyle().copyWith(
- color: Colors.green,
- fontSize: 12.0,
- ),
- ),
- ),
- );
- }
-
- Widget _buildHolidaysMarker() {
- return Icon(
- Icons.add_box,
- size: 20.0,
- color: Colors.blueGrey,
- );
- }
-
- Widget _buildButtons() {
- final dateTime = _events.keys.elementAt(_events.length - 2);
-
- return Column(
- children: <Widget>[
- Row(
- mainAxisSize: MainAxisSize.max,
- mainAxisAlignment: MainAxisAlignment.spaceEvenly,
- children: <Widget>[
- RaisedButton(
- child: Text('Mes'),
- onPressed: () {
- setState(() {
- _calendarController.setCalendarFormat(CalendarFormat.month);
- });
- },
- ),
- RaisedButton(
- child: Text('2 Semanas'),
- onPressed: () {
- setState(() {
- _calendarController.setCalendarFormat(CalendarFormat.twoWeeks);
- });
- },
- ),
- RaisedButton(
- child: Text('Semana'),
- onPressed: () {
- setState(() {
- _calendarController.setCalendarFormat(CalendarFormat.week);
- });
- },
- ),
- ],
- ),
- const SizedBox(height: 8.0),
- RaisedButton(
- child: Text('Recuerde Cita ${dateTime.day}-${dateTime.month}-${dateTime.year}'),
- onPressed: () {
- _calendarController.setSelectedDay(
- DateTime(dateTime.year, dateTime.month, dateTime.day),
- runCallback: true,
- );
- },
- ),
- ],
- );
- }
-
-
- Widget _buildEventList() {
- return ListView(
- children: _selectedEvents
- .map((event) => Container(
- decoration: BoxDecoration(
- border: Border.all(width: 0.8),
- borderRadius: BorderRadius.circular(12.0),
- ),
- margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
- child: ListTile(
- title: Text(event.toString()),
- onTap: () => print('$event tapped!'),
- ),
- ))
- .toList(),
- );
- }
- }
|