前提・実現したいこと
Flutterでアプリを開発しています。
table_calendarを使いマーカーの表示機能を実装したい
ここに質問の内容を詳しく書いてください。
table_calendarを使いマーカーの表示機能を実装したいのですが、一度日付をタップしてから出ないとマーカーが表示されません。
画面表示時にマーカーを表示する方法をご教授いただきたいです。
該当のソースコード
dart
1class HomePage extends StatefulWidget { 2 3 HomePageState createState() => HomePageState(); 4} 5class HomePageState extends State<HomePage> { 6 DateTime _focusedDay = DateTime.now(); 7 CalendarFormat _calendarFormat = CalendarFormat.month; 8 DateTime? _selectedDay; 9 DateTime? _getEventForDay; 10 Map<DateTime, List> _eventsList = {}; 11 int getHashCode(DateTime key) { 12 return key.day * 1000000 + key.month * 10000 + key.year; 13 } 14 15 16 void initState() { 17 super.initState(); 18 const str = '2021-10-01'; 19 final testDate = DateTime.parse(str); 20 _selectedDay = _focusedDay; 21 22 } 23 24 Widget build(BuildContext context) { 25 26 DateTime? selectDate = new DateTime.now(); 27 28 final _events = LinkedHashMap<DateTime, List>( 29 equals: isSameDay, 30 hashCode: getHashCode, 31 )..addAll(_eventsList); 32 33 List _getEventForDay(DateTime day) { 34 return _events[day] ?? []; 35 } 36 37 return ChangeNotifierProvider<HomeModel>( 38 create: (_) => HomeModel()..fetchEventList(), 39 child: Scaffold( 40 body: Column( 41 children: [ 42 Consumer<HomeModel>( 43 builder: (context, model, child) { 44 _eventsList = model.eventList; 45 46 47 return TableCalendar( 48 calendarStyle: CalendarStyle( 49 selectedDecoration: BoxDecoration( 50 color: Colors.pink[100], 51 shape: BoxShape.circle, 52 ), 53 todayDecoration: BoxDecoration( 54 color: Colors.deepOrange[200], 55 shape: BoxShape.circle, 56 ), 57 ), 58 headerStyle: const HeaderStyle( 59 titleCentered: true, 60 formatButtonVisible: false, 61 ), 62 firstDay: DateTime.utc(2010, 10, 16), 63 lastDay: DateTime.utc(2030, 3, 14), 64 focusedDay: DateTime.now(), 65 eventLoader: _getEventForDay, 66 locale: 'ja_JP', 67 selectedDayPredicate: (day) { 68 return isSameDay(_selectedDay, day); 69 }, 70 onDaySelected: (selectedDay, focusedDay) { 71 if (!isSameDay(_selectedDay, selectedDay)) { 72 setState(() { 73 _selectedDay = selectedDay; 74 _focusedDay = focusedDay; 75 }); 76 _getEventForDay(selectedDay); 77 } 78 }, 79 onPageChanged: (focusedDay) { 80 _focusedDay = focusedDay; 81 }, 82 calendarBuilders: CalendarBuilders( 83 markerBuilder: (context, date, events) { 84 if (events.isNotEmpty) { 85 return _buildEventsMarker(date, events); 86 } 87 } 88 ), 89 ); 90 } 91 ), 92 ListView( 93 shrinkWrap: true, 94 children: _getEventForDay(_selectedDay!) 95 .map((event) => ListTile( 96 title: Text(event.toString()), 97 onTap: () => { 98 setState(() { 99 selectDate = _selectedDay; 100 }) 101 }, 102 )) 103 .toList(), 104 ), 105 ButtonTheme( 106 child: ElevatedButton.icon( 107 style: ElevatedButton.styleFrom( 108 primary: const Color.fromRGBO(250,167,176, 1), 109 shape: const StadiumBorder(), 110 onPrimary: Colors.white, 111 ), 112 icon: const Icon(Icons.edit_rounded), 113 label: const Text('記録'), 114 onPressed: () => { 115 116 }, 117 ), 118 ) 119 ] 120 ), 121 ), 122 ); 123 124 } 125 126 Widget _buildEventsMarker(DateTime date, List events) { 127 return Positioned( 128 right: 5, 129 bottom: 5, 130 child: AnimatedContainer( 131 duration: const Duration(milliseconds: 300), 132 decoration: const BoxDecoration( 133 shape: BoxShape.circle, 134 color: Color.fromRGBO(250,167,176, 1), 135 ), 136 width: 16.0, 137 height: 16.0, 138 child: Center( 139 child: Text( 140 '${events.length}', 141 style: const TextStyle().copyWith( 142 color: Colors.white, 143 fontSize: 12.0, 144 ), 145 ), 146 ), 147 ), 148 ); 149 } 150}
あなたの回答
tips
プレビュー