Skip to content

Commit c091863

Browse files
jjoonleojjoonleo
authored
Merge pull request #283 from DevKor-github/280-feature-monthly-calendar-apply-design
280 feature monthly calendar apply design
2 parents 2b0487a + e672ecc commit c091863

9 files changed

Lines changed: 300 additions & 95 deletions

File tree

‎lib/main.dart‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:firebase_core/firebase_core.dart';
22
import 'package:flutter/foundation.dart';
33
import 'package:flutter/material.dart';
4+
import 'package:intl/date_symbol_data_local.dart';
45
import 'package:on_time_front/core/constants/environment_variable.dart';
56
import 'package:on_time_front/core/di/di_setup.dart';
67
import 'package:on_time_front/core/services/device_info_service/shared.dart';
@@ -10,6 +11,7 @@ import 'package:on_time_front/presentation/app/screens/app.dart';
1011

1112
void main() async {
1213
WidgetsFlutterBinding.ensureInitialized();
14+
await initializeDateFormatting();
1315
configureDependencies();
1416
debugPrint(EnvironmentVariable.restApiUrl);
1517
if (kIsWeb) {

‎lib/presentation/app/screens/app.dart‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_bloc/flutter_bloc.dart';
3+
import 'package:flutter_riverpod/flutter_riverpod.dart';
34
import 'package:on_time_front/core/di/di_setup.dart';
45
import 'package:on_time_front/presentation/app/bloc/app_bloc.dart';
56
import 'package:on_time_front/presentation/shared/router/go_router.dart';
7+
import 'package:on_time_front/presentation/shared/theme/calendar_theme.dart';
68
import 'package:on_time_front/presentation/shared/theme/theme.dart';
79

810
class App extends StatelessWidget {
@@ -13,7 +15,7 @@ class App extends StatelessWidget {
1315
return BlocProvider<AppBloc>(
1416
create: (context) =>
1517
getIt.get<AppBloc>()..add(const AppUserSubscriptionRequested()),
16-
child: AppView(),
18+
child: const AppView(),
1719
);
1820
}
1921
}

‎lib/presentation/calendar/screens/calendar_screen.dart‎

Lines changed: 82 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import 'package:go_router/go_router.dart';
55
import 'package:on_time_front/core/di/di_setup.dart';
66
import 'package:on_time_front/presentation/calendar/bloc/monthly_schedules_bloc.dart';
77
import 'package:on_time_front/presentation/calendar/component/schedule_detail.dart';
8+
import 'package:on_time_front/presentation/shared/components/calendar/centered_calendar_header.dart';
9+
import 'package:on_time_front/presentation/shared/theme/calendar_theme.dart';
810
import 'package:table_calendar/table_calendar.dart';
911

1012
class CalendarScreen extends ConsumerStatefulWidget {
@@ -18,13 +20,26 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
1820
DateTime _selectedDate =
1921
DateTime(DateTime.now().year, DateTime.now().month, DateTime.now().day);
2022

23+
void _onLeftArrowTap() {
24+
setState(() {
25+
_selectedDate = DateTime(_selectedDate.year, _selectedDate.month - 1, 1);
26+
});
27+
}
28+
29+
void _onRightArrowTap() {
30+
setState(() {
31+
_selectedDate = DateTime(_selectedDate.year, _selectedDate.month + 1, 1);
32+
});
33+
}
34+
2135
@override
2236
Widget build(BuildContext context) {
2337
final theme = Theme.of(context);
2438
final textTheme = theme.textTheme;
2539
final colorScheme = theme.colorScheme;
2640
final todaysDate = DateTime(
2741
DateTime.now().year, DateTime.now().month, DateTime.now().day, 0, 0, 0);
42+
final calendarTheme = theme.extension<CalendarTheme>()!;
2843

2944
return BlocProvider(
3045
create: (context) => getIt.get<MonthlySchedulesBloc>()
@@ -47,78 +62,79 @@ class _CalendarScreenState extends ConsumerState<CalendarScreen> {
4762
children: [
4863
Container(
4964
decoration: BoxDecoration(
50-
color: colorScheme.surface,
5165
borderRadius: BorderRadius.circular(11),
66+
color: colorScheme.surface,
5267
),
53-
child: BlocBuilder<MonthlySchedulesBloc, MonthlySchedulesState>(
54-
builder: (context, state) {
55-
if (state.status == MonthlySchedulesStatus.error) {
56-
return Text('Error');
57-
}
68+
child: Padding(
69+
padding: const EdgeInsets.symmetric(
70+
vertical: 16.0, horizontal: 8.0),
71+
child:
72+
BlocBuilder<MonthlySchedulesBloc, MonthlySchedulesState>(
73+
builder: (context, state) {
74+
if (state.status == MonthlySchedulesStatus.error) {
75+
return Text('Error');
76+
}
5877

59-
return TableCalendar(
60-
eventLoader: (day) {
61-
day = DateTime(day.year, day.month, day.day);
62-
return state.schedules[day] ?? [];
63-
},
64-
focusedDay: _selectedDate,
65-
firstDay: DateTime(2024, 12, 1),
66-
lastDay: DateTime(2025, 12, 31),
67-
calendarFormat: CalendarFormat.month,
68-
headerStyle: HeaderStyle(
69-
formatButtonVisible: false,
70-
titleCentered: true,
71-
),
72-
daysOfWeekStyle: DaysOfWeekStyle(
73-
weekdayStyle: textTheme.bodySmall!,
74-
weekendStyle: textTheme.bodySmall!,
75-
),
76-
calendarStyle: CalendarStyle(
77-
outsideDaysVisible: false,
78-
weekendTextStyle: textTheme.bodySmall!,
79-
defaultTextStyle: textTheme.bodySmall!,
80-
markerDecoration: BoxDecoration(
81-
color: colorScheme.primary,
82-
shape: BoxShape.circle,
83-
),
84-
markerMargin: EdgeInsets.symmetric(horizontal: 1.0),
85-
),
86-
onDaySelected: (selectedDay, focusedDay) {
87-
setState(() {
88-
_selectedDate = DateTime(selectedDay.year,
89-
selectedDay.month, selectedDay.day);
90-
});
91-
debugPrint(selectedDay.toIso8601String());
92-
},
93-
onPageChanged: (focusedDay) {
94-
setState(() {
95-
_selectedDate = DateTime(focusedDay.year,
96-
focusedDay.month, focusedDay.day);
97-
});
98-
debugPrint(_selectedDate.toIso8601String());
99-
context.read<MonthlySchedulesBloc>().add(
100-
MonthlySchedulesMonthAdded(
101-
date: DateTime(focusedDay.year,
102-
focusedDay.month, focusedDay.day)));
103-
},
104-
calendarBuilders: CalendarBuilders(
105-
todayBuilder: (context, day, focusedDay) => Container(
106-
margin: const EdgeInsets.all(4.0),
107-
alignment: Alignment.center,
108-
decoration: BoxDecoration(
109-
color: theme.colorScheme.primary,
110-
shape: BoxShape.circle,
111-
),
112-
child: Text(
113-
day.day.toString(),
114-
style: textTheme.bodySmall?.copyWith(
115-
color: theme.colorScheme.onPrimary,
78+
return TableCalendar(
79+
daysOfWeekHeight: 40,
80+
eventLoader: (day) {
81+
day = DateTime(day.year, day.month, day.day);
82+
return state.schedules[day] ?? [];
83+
},
84+
focusedDay: _selectedDate,
85+
firstDay: DateTime(2024, 12, 1),
86+
lastDay: DateTime(2025, 12, 31),
87+
calendarFormat: CalendarFormat.month,
88+
headerStyle: calendarTheme.headerStyle,
89+
daysOfWeekStyle: calendarTheme.daysOfWeekStyle,
90+
calendarStyle: calendarTheme.calendarStyle,
91+
onDaySelected: (selectedDay, focusedDay) {
92+
setState(() {
93+
_selectedDate = DateTime(selectedDay.year,
94+
selectedDay.month, selectedDay.day);
95+
});
96+
debugPrint(selectedDay.toIso8601String());
97+
},
98+
onPageChanged: (focusedDay) {
99+
setState(() {
100+
_selectedDate = DateTime(focusedDay.year,
101+
focusedDay.month, focusedDay.day);
102+
});
103+
debugPrint(_selectedDate.toIso8601String());
104+
context.read<MonthlySchedulesBloc>().add(
105+
MonthlySchedulesMonthAdded(
106+
date: DateTime(focusedDay.year,
107+
focusedDay.month, focusedDay.day)));
108+
},
109+
calendarBuilders: CalendarBuilders(
110+
headerTitleBuilder: (context, date) {
111+
return CenteredCalendarHeader(
112+
focusedMonth: date,
113+
onLeftArrowTap: _onLeftArrowTap,
114+
onRightArrowTap: _onRightArrowTap,
115+
titleTextStyle:
116+
calendarTheme.headerStyle.titleTextStyle,
117+
leftIcon:
118+
calendarTheme.headerStyle.leftChevronIcon,
119+
rightIcon:
120+
calendarTheme.headerStyle.rightChevronIcon,
121+
);
122+
},
123+
todayBuilder: (context, day, focusedDay) => Container(
124+
margin: const EdgeInsets.all(4.0),
125+
alignment: Alignment.center,
126+
decoration: calendarTheme.todayDecoration,
127+
child: Text(
128+
day.day.toString(),
129+
style: textTheme.bodySmall?.copyWith(
130+
color: theme.colorScheme.onPrimary,
131+
),
116132
),
117133
),
118134
),
119-
),
120-
);
121-
},
135+
);
136+
},
137+
),
122138
),
123139
),
124140
SizedBox(height: 18.0),

‎lib/presentation/home/screens/home_screen_tmp.dart‎

Lines changed: 56 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_svg/svg.dart';
3+
import 'package:go_router/go_router.dart';
34
import 'package:on_time_front/core/di/di_setup.dart';
45
import 'package:on_time_front/presentation/app/bloc/app_bloc.dart';
56
import 'package:on_time_front/presentation/calendar/bloc/monthly_schedules_bloc.dart';
67
import 'package:on_time_front/presentation/home/components/todays_schedule_tile.dart';
78
import 'package:flutter_bloc/flutter_bloc.dart';
9+
import 'package:on_time_front/presentation/shared/components/calendar/centered_calendar_header.dart';
810
import 'package:table_calendar/table_calendar.dart';
911
import 'package:on_time_front/presentation/shared/components/arc_indicator.dart';
1012
import 'package:on_time_front/presentation/shared/theme/theme.dart';
13+
import 'package:on_time_front/presentation/shared/theme/calendar_theme.dart';
1114

1215
class HomeScreenTmp extends StatefulWidget {
1316
const HomeScreenTmp({super.key});
@@ -138,7 +141,6 @@ class _MonthlySchedule extends StatelessWidget {
138141
crossAxisAlignment: CrossAxisAlignment.start,
139142
children: [
140143
_MonthlyScheduleHeader(),
141-
SizedBox(height: 23.0),
142144
_MonthCalendar(
143145
monthlySchedulesState: monthlySchedulesState,
144146
),
@@ -161,9 +163,31 @@ class _MonthlyScheduleHeader extends StatelessWidget {
161163
@override
162164
Widget build(BuildContext context) {
163165
final theme = Theme.of(context);
164-
return Text(
165-
"캘린더",
166-
style: theme.textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w600),
166+
return Padding(
167+
padding: const EdgeInsets.symmetric(horizontal: 16.0),
168+
child: Row(
169+
children: [
170+
Text(
171+
"캘린더",
172+
style: theme.textTheme.titleLarge
173+
?.copyWith(fontWeight: FontWeight.w600),
174+
),
175+
Spacer(),
176+
TextButton(
177+
onPressed: () {
178+
context.go('/calendar');
179+
},
180+
child: Row(
181+
children: [
182+
Text('캘린더 보기',
183+
style: theme.textTheme.bodySmall
184+
?.copyWith(color: theme.colorScheme.outlineVariant)),
185+
arrowRightSvg,
186+
],
187+
),
188+
),
189+
],
190+
),
167191
);
168192
}
169193
}
@@ -186,11 +210,24 @@ class _MonthCalendarState extends State<_MonthCalendar> {
186210
_focusedDay = DateTime.now();
187211
}
188212

213+
void _onLeftArrowTap() {
214+
setState(() {
215+
_focusedDay = DateTime(_focusedDay.year, _focusedDay.month - 1, 1);
216+
});
217+
}
218+
219+
void _onRightArrowTap() {
220+
setState(() {
221+
_focusedDay = DateTime(_focusedDay.year, _focusedDay.month + 1, 1);
222+
});
223+
}
224+
189225
@override
190226
Widget build(BuildContext context) {
191227
final theme = Theme.of(context);
192228
final textTheme = theme.textTheme;
193229
final colorScheme = theme.colorScheme;
230+
final calendarTheme = theme.extension<CalendarTheme>()!;
194231

195232
if (widget.monthlySchedulesState.schedules.isEmpty) {
196233
if (widget.monthlySchedulesState.status ==
@@ -204,7 +241,6 @@ class _MonthCalendarState extends State<_MonthCalendar> {
204241

205242
return Container(
206243
decoration: BoxDecoration(
207-
color: colorScheme.surface,
208244
borderRadius: BorderRadius.circular(11),
209245
),
210246
child: TableCalendar(
@@ -216,24 +252,10 @@ class _MonthCalendarState extends State<_MonthCalendar> {
216252
firstDay: DateTime(2024, 1, 1),
217253
lastDay: DateTime(2025, 12, 31),
218254
calendarFormat: CalendarFormat.month,
219-
headerStyle: HeaderStyle(
220-
formatButtonVisible: false,
221-
titleCentered: true,
222-
),
223-
daysOfWeekStyle: DaysOfWeekStyle(
224-
weekdayStyle: textTheme.bodySmall!,
225-
weekendStyle: textTheme.bodySmall!,
226-
),
227-
calendarStyle: CalendarStyle(
228-
outsideDaysVisible: false,
229-
weekendTextStyle: textTheme.bodySmall!,
230-
defaultTextStyle: textTheme.bodySmall!,
231-
markerDecoration: BoxDecoration(
232-
color: colorScheme.primary,
233-
shape: BoxShape.circle,
234-
),
235-
markerMargin: EdgeInsets.symmetric(horizontal: 1.0),
236-
),
255+
headerStyle: calendarTheme.headerStyle,
256+
daysOfWeekStyle: calendarTheme.daysOfWeekStyle,
257+
daysOfWeekHeight: 40,
258+
calendarStyle: calendarTheme.calendarStyle,
237259
onDaySelected: (selectedDay, focusedDay) {
238260
// Handle day selection if needed
239261
},
@@ -246,13 +268,20 @@ class _MonthCalendarState extends State<_MonthCalendar> {
246268
DateTime(focusedDay.year, focusedDay.month, focusedDay.day)));
247269
},
248270
calendarBuilders: CalendarBuilders(
271+
headerTitleBuilder: (context, date) {
272+
return CenteredCalendarHeader(
273+
focusedMonth: date,
274+
onLeftArrowTap: _onLeftArrowTap,
275+
onRightArrowTap: _onRightArrowTap,
276+
titleTextStyle: calendarTheme.headerStyle.titleTextStyle,
277+
leftIcon: calendarTheme.headerStyle.leftChevronIcon,
278+
rightIcon: calendarTheme.headerStyle.rightChevronIcon,
279+
);
280+
},
249281
todayBuilder: (context, day, focusedDay) => Container(
250282
margin: const EdgeInsets.all(4.0),
251283
alignment: Alignment.center,
252-
decoration: BoxDecoration(
253-
color: theme.colorScheme.primary,
254-
shape: BoxShape.circle,
255-
),
284+
decoration: calendarTheme.todayDecoration,
256285
child: Text(
257286
day.day.toString(),
258287
style: textTheme.bodySmall?.copyWith(

0 commit comments

Comments
 (0)