Skip to content

Commit

Permalink
A nice animation for the onboarding
Browse files Browse the repository at this point in the history
  • Loading branch information
@g123k
g123k committed Jul 14, 2023
1 parent 1cd22a6 commit ee7f999
Show file tree
Hide file tree
Showing 9 changed files with 220 additions and 64 deletions.
1 change: 1 addition & 0 deletions packages/smooth_app/android/app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
compileSdkVersion 33
ndkVersion "25.1.8937393"

compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
Expand Down
9 changes: 9 additions & 0 deletions packages/smooth_app/assets/onboarding/hill_end.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions packages/smooth_app/assets/onboarding/hill_start.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added packages/smooth_app/assets/onboarding/onboarding.riv
View file
Binary file not shown.
219 changes: 155 additions & 64 deletions packages/smooth_app/lib/pages/onboarding/reinvention_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import 'dart:async';
import 'dart:io';

import 'package:auto_size_text/auto_size_text.dart';
import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:rive/rive.dart';
import 'package:sensors_plus/sensors_plus.dart';
import 'package:smooth_app/generic_lib/design_constants.dart';
import 'package:smooth_app/generic_lib/duration_constants.dart';
import 'package:smooth_app/helpers/app_helper.dart';
import 'package:smooth_app/pages/onboarding/next_button.dart';
import 'package:smooth_app/pages/onboarding/onboarding_flow_navigator.dart';
import 'package:smooth_app/widgets/smooth_scaffold.dart';

/// Onboarding page: "reinvention"
class ReinventionPage extends StatelessWidget {
Expand All @@ -25,83 +28,171 @@ class ReinventionPage extends StatelessWidget {
.displayMedium!
.copyWith(fontSize: muchTooBigFontSize);
final Size screenSize = MediaQuery.of(context).size;
final double animHeight = 352.0 * screenSize.width / 375.0;

return SmoothScaffold(
backgroundColor: backgroundColor,
brightness: Brightness.dark,
body: Stack(
children: <Widget>[
SafeArea(
bottom: false,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 30,
child: Padding(
padding: const EdgeInsets.all(SMALL_SPACE),
child: Center(
child: AutoSizeText(
appLocalizations.onboarding_reinventing_text1,
style: headlineStyle,
maxLines: 3,
textAlign: TextAlign.center,
return SafeArea(
bottom: false,
child: Container(
color: backgroundColor,
child: Stack(
children: <Widget>[
Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
top: screenSize.height * 0.75,
child: Background(
screenWidth: screenSize.width,
),
),
Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
child: RepaintBoundary(
child: SizedBox(
width: screenSize.width,
height: animHeight,
child: const RiveAnimation.asset(
'assets/onboarding/onboarding.riv',
artboard: 'Reinvention',
animations: <String>['Loop'],
alignment: Alignment.bottomCenter,
),
),
),
),
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
bottom: animHeight - 20.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Flexible(
flex: 30,
child: Padding(
padding: const EdgeInsets.all(SMALL_SPACE),
child: Center(
child: AutoSizeText(
appLocalizations.onboarding_reinventing_text1,
style: headlineStyle,
maxLines: 3,
textAlign: TextAlign.center,
),
),
),
),
),
Flexible(
flex: 15,
child: SvgPicture.asset(
'assets/onboarding/birthday-cake.svg',
package: AppHelper.APP_PACKAGE,
Flexible(
flex: 15,
child: SvgPicture.asset(
'assets/onboarding/birthday-cake.svg',
package: AppHelper.APP_PACKAGE,
),
),
),
Flexible(
flex: 30,
child: Padding(
padding: const EdgeInsets.all(SMALL_SPACE),
child: Center(
child: AutoSizeText(
appLocalizations.onboarding_reinventing_text2,
style: headlineStyle,
maxLines: 3,
textAlign: TextAlign.center,
Flexible(
flex: 30,
child: Padding(
padding: const EdgeInsets.all(SMALL_SPACE),
child: Center(
child: AutoSizeText(
appLocalizations.onboarding_reinventing_text2,
style: headlineStyle,
maxLines: 3,
textAlign: TextAlign.center,
),
),
),
),
),
Flexible(
flex: 25,
child: SvgPicture.asset(
'assets/onboarding/title.svg',
package: AppHelper.APP_PACKAGE,
Flexible(
flex: 25,
child: SvgPicture.asset(
'assets/onboarding/title.svg',
package: AppHelper.APP_PACKAGE,
),
),
],
),
),
Positioned(
bottom: 0,
child: SafeArea(
bottom: !Platform.isIOS,
child: const NextButton(
OnboardingPage.REINVENTION,
backgroundColor: null,
nextKey: Key('nextAfterReinvention'),
),
SvgPicture.asset(
// supposed to be a square or something like that
// at least not too tall
'assets/onboarding/reinvention.svg',
width: screenSize.width,
package: AppHelper.APP_PACKAGE,
),
],
),
),
),
Positioned(
bottom: 0,
child: SafeArea(
bottom: !Platform.isIOS,
child: const NextButton(
OnboardingPage.REINVENTION,
backgroundColor: null,
nextKey: Key('nextAfterReinvention'),
],
),
),
);
}
}

class Background extends StatefulWidget {
const Background({required this.screenWidth});

final double screenWidth;

@override
State<Background> createState() => _BackgroundState();
}

class _BackgroundState extends State<Background> {
StreamSubscription<GyroscopeEvent>? _subscription;
double parallax = 0.0;

@override
void initState() {
super.initState();

if (Platform.isAndroid || Platform.isIOS) {
_subscription = gyroscopeEvents.listen((GyroscopeEvent event) {
setState(() => parallax = event.y);
});
}
}

@override
Widget build(BuildContext context) {
return SizedBox.expand(
child: RepaintBoundary(
child: Stack(
children: <Widget>[
AnimatedPositioned(
bottom: 0.0,
right: (-15.0 * parallax).clamp(-30.0, 0.0),
width: widget.screenWidth * 0.808,
duration: SmoothAnimationsDuration.short,
child: SvgPicture.asset(
'assets/onboarding/hill_end.svg',
fit: BoxFit.fill,
),
),
),
],
AnimatedPositioned(
bottom: 0.0,
left: (-10.0 * parallax).clamp(-20.0, 0.0),
width: widget.screenWidth * 0.855,
duration: SmoothAnimationsDuration.short,
child: SvgPicture.asset(
'assets/onboarding/hill_start.svg',
fit: BoxFit.fill,
),
)
],
),
),
);
}

@override
void dispose() {
_subscription?.cancel();
super.dispose();
}
}
40 changes: 40 additions & 0 deletions packages/smooth_app/pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -689,6 +689,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "7.0.2"
graphs:
dependency: transitive
description:
name: graphs
sha256: aedc5a15e78fc65a6e23bcd927f24c64dd995062bcd1ca6eda65a3cff92a4d19
url: "https://pub.dev"
source: hosted
version: "2.3.1"
hive:
dependency: "direct main"
description:
Expand Down Expand Up @@ -1232,6 +1240,22 @@ packages:
url: "https://pub.dev"
source: hosted
version: "3.2.1"
rive:
dependency: "direct main"
description:
name: rive
sha256: f3b8af0898c987d68019e91d92257edd902c28c816e49de033a7272e86bd5425
url: "https://pub.dev"
source: hosted
version: "0.11.4"
rive_common:
dependency: transitive
description:
name: rive_common
sha256: f6687f9d70e6fd3888a9b0e9c0b307966d2ce74cf00cfb01dce906c3bbada52f
url: "https://pub.dev"
source: hosted
version: "0.1.0"
scanner_ml_kit:
dependency: "direct main"
description:
Expand All @@ -1253,6 +1277,22 @@ packages:
relative: true
source: path
version: "1.0.0"
sensors_plus:
dependency: "direct main"
description:
name: sensors_plus
sha256: "10d3aa4071121d06351e9ba555cc25e83273314a3faab1cee12f9d886eff7426"
url: "https://pub.dev"
source: hosted
version: "3.0.2"
sensors_plus_platform_interface:
dependency: transitive
description:
name: sensors_plus_platform_interface
sha256: "95f0cc08791b8bf0c41c5fa99c84be2a7d5bf60a811ddc17e1438b1e68caf0d3"
url: "https://pub.dev"
source: hosted
version: "1.1.3"
sentry:
dependency: transitive
description:
Expand Down
2 changes: 2 additions & 0 deletions packages/smooth_app/pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,8 @@ dependencies:
fimber: 0.6.6
shimmer: ^3.0.0
lottie: 2.2.0
rive: 0.11.4
sensors_plus: 3.0.2
webview_flutter: 3.0.4
flutter_custom_tabs: ^1.0.4
flutter_image_compress: 1.1.3
Expand Down
3 changes: 3 additions & 0 deletions packages/smooth_app/windows/flutter/generated_plugin_registrant.cc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
#include <file_selector_windows/file_selector_windows.h>
#include <flutter_secure_storage_windows/flutter_secure_storage_windows_plugin.h>
#include <permission_handler_windows/permission_handler_windows_plugin.h>
#include <rive_common/rive_plugin.h>
#include <sentry_flutter/sentry_flutter_plugin.h>
#include <share_plus/share_plus_windows_plugin_c_api.h>
#include <url_launcher_windows/url_launcher_windows.h>
Expand All @@ -23,6 +24,8 @@ void RegisterPlugins(flutter::PluginRegistry* registry) {
registry->GetRegistrarForPlugin("FlutterSecureStorageWindowsPlugin"));
PermissionHandlerWindowsPluginRegisterWithRegistrar(
registry->GetRegistrarForPlugin("PermissionHandlerWindowsPlugin"));
RivePluginRegisterWithRegistrar(
registry->GetRegistrarForPlugin("RivePlugin"));
SentryFlutterPluginRegisterWithRegistrar(
registry->GetRegistrarForPlugin("SentryFlutterPlugin"));
SharePlusWindowsPluginCApiRegisterWithRegistrar(
Expand Down
1 change: 1 addition & 0 deletions packages/smooth_app/windows/flutter/generated_plugins.cmake
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ list(APPEND FLUTTER_PLUGIN_LIST
file_selector_windows
flutter_secure_storage_windows
permission_handler_windows
rive_common
sentry_flutter
share_plus
url_launcher_windows
Expand Down

0 comments on commit ee7f999

Please sign in to comment.