added calendar animation

This commit is contained in:
Myzel394 2022-08-16 16:04:35 +02:00
parent 8c8d561966
commit f300e52993
4 changed files with 99 additions and 76 deletions

View File

@ -46,31 +46,32 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark().copyWith(
textTheme: ThemeData.dark().textTheme.copyWith(
headline1: const TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
),
title: 'Flutter Demo',
theme: ThemeData.dark().copyWith(
textTheme: ThemeData.dark().textTheme.copyWith(
headline1: const TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
helperMaxLines: 10,
errorMaxLines: 10,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
inputDecorationTheme: InputDecorationTheme(
filled: true,
helperMaxLines: 10,
errorMaxLines: 10,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
),
),
routes: {
WelcomeScreen.ID: (context) => const WelcomeScreen(),
MainScreen.ID: (context) => const MainScreen(),
LoginScreen.ID: (context) => const LoginScreen(),
TimelineScreen.ID: (context) => const TimelineScreen(),
GrantPermissionScreen.ID: (context) => const GrantPermissionScreen(),
CalendarScreen.ID: (context) => const CalendarScreen(),
},
initialRoute: CalendarScreen.ID);
),
routes: {
WelcomeScreen.ID: (context) => const WelcomeScreen(),
MainScreen.ID: (context) => const MainScreen(),
LoginScreen.ID: (context) => const LoginScreen(),
TimelineScreen.ID: (context) => const TimelineScreen(),
GrantPermissionScreen.ID: (context) => const GrantPermissionScreen(),
CalendarScreen.ID: (context) => const CalendarScreen(),
},
initialRoute: initialPage,
);
}
}

View File

@ -47,7 +47,11 @@ class _CalendarScreenState extends State<CalendarScreen> {
@override
Widget build(BuildContext context) {
if (calendar.isInitializing) {
return CircularProgressIndicator();
return const Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
final theme = Theme.of(context);

View File

@ -6,6 +6,8 @@ import 'package:share_location/utils/loadable.dart';
import 'package:share_location/widgets/timeline_page.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'calendar_screen.dart';
final supabase = Supabase.instance.client;
class TimelineScreen extends StatefulWidget {
@ -95,28 +97,35 @@ class _TimelineScreenState extends State<TimelineScreen> with Loadable {
);
}
return Scaffold(
body: ChangeNotifierProvider.value(
value: timeline,
child: PageView.builder(
controller: pageController,
scrollDirection: Axis.vertical,
itemCount: timeline.values.length,
onPageChanged: (newPage) {
if (_ignorePageChanges) {
return;
}
return WillPopScope(
onWillPop: () async {
await Navigator.pushNamed(context, CalendarScreen.ID);
if (timeline.currentIndex != newPage) {
// User manually changed page
timeline.setCurrentIndex(newPage);
return true;
},
child: Scaffold(
body: ChangeNotifierProvider.value(
value: timeline,
child: PageView.builder(
controller: pageController,
scrollDirection: Axis.vertical,
itemCount: timeline.values.length,
onPageChanged: (newPage) {
if (_ignorePageChanges) {
return;
}
timeline.setMemoryIndex(0);
}
},
itemBuilder: (_, index) => TimelinePage(
date: timeline.dateAtIndex(index),
memoryPack: timeline.atIndex(index),
if (timeline.currentIndex != newPage) {
// User manually changed page
timeline.setCurrentIndex(newPage);
timeline.setMemoryIndex(0);
}
},
itemBuilder: (_, index) => TimelinePage(
date: timeline.dateAtIndex(index),
memoryPack: timeline.atIndex(index),
),
),
),
),

View File

@ -5,6 +5,8 @@ import 'package:flutter_calendar_widget/flutter_calendar_widget.dart';
import 'package:intl/intl.dart';
import 'package:share_location/constants/spacing.dart';
import 'package:share_location/screens/timeline_screen.dart';
import 'package:share_location/widgets/delay_render.dart';
import 'package:share_location/widgets/fade_and_move_in_animation.dart';
class MonthCalendarBuilder extends CalendarBuilder {
@override
@ -35,43 +37,50 @@ class MonthCalendarBuilder extends CalendarBuilder {
return amount / highestAmountOfEvents;
}();
return Opacity(
opacity: () {
if (type.isOutSide) {
return 0.0;
}
final duration = Duration(milliseconds: Random().nextInt(800));
if (dateTime.isAfter(DateTime.now())) {
return 0.4;
}
return DelayRender(
delay: duration,
child: FadeAndMoveInAnimation(
child: Opacity(
opacity: () {
if (type.isOutSide) {
return 0.0;
}
return 1.0;
}(),
child: Padding(
padding: const EdgeInsets.all(TINY_SPACE),
child: ClipRRect(
borderRadius: BorderRadius.circular(SMALL_SPACE),
child: Stack(
alignment: style.dayAlignment,
children: [
SizedBox(
child: Container(
color: textStyle.selectedDayTextColor
.withOpacity(backgroundPercentage),
),
),
Container(
alignment: Alignment.center,
child: Text(
dateTime.day.toString(),
style: TextStyle(
color: backgroundPercentage > .5
? textStyle.focusedDayTextColor
: textStyle.dayTextColor,
if (dateTime.isAfter(DateTime.now())) {
return 0.4;
}
return 1.0;
}(),
child: Padding(
padding: const EdgeInsets.all(TINY_SPACE),
child: ClipRRect(
borderRadius: BorderRadius.circular(SMALL_SPACE),
child: Stack(
alignment: style.dayAlignment,
children: [
SizedBox(
child: Container(
color: textStyle.selectedDayTextColor
.withOpacity(backgroundPercentage),
),
),
),
Container(
alignment: Alignment.center,
child: Text(
dateTime.day.toString(),
style: TextStyle(
color: backgroundPercentage > .5
? textStyle.focusedDayTextColor
: textStyle.dayTextColor,
),
),
),
],
),
],
),
),
),
),