Add onboarding feature

2023-11-10 11:04:17 +07:00 · 2023-11-10 11:04:17 +07:00 · 016649ece6
commit 016649ece6
parent 715af212f6
7 changed files with 269 additions and 7 deletions
--- a/assets/images/onboarding.webp
+++ b/assets/images/onboarding.webp
--- a/assets/images/onboarding_2.webp
+++ b/assets/images/onboarding_2.webp
--- a/assets/images/onboarding_3.webp
+++ b/assets/images/onboarding_3.webp
--- a/lib/main.dart
+++ b/lib/main.dart
@ -1,17 +1,25 @@
-import 'package:nekoya_app/screens/forgotpassword.dart';
-import 'package:page_transition/page_transition.dart';
 import 'package:animated_splash_screen/animated_splash_screen.dart';
+import 'package:hive/hive.dart';
+import 'package:page_transition/page_transition.dart';
+import 'package:path_provider/path_provider.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/material.dart';

 import 'package:nekoya_app/screens/login.dart';
 import 'package:nekoya_app/screens/register.dart';
 import 'package:nekoya_app/screens/payment.dart';
+import 'package:nekoya_app/screens/forgotpassword.dart';
+import 'package:nekoya_app/screens/onboarding.dart';
 import 'package:nekoya_app/components/menu.dart';
 import 'package:nekoya_app/utils/navigation_auth.dart';

-void main() {
+void main() async {
  WidgetsFlutterBinding.ensureInitialized();
+
+  // Init Storage
+  final dir = await getApplicationDocumentsDirectory();
+  Hive.defaultDirectory = dir.path;
+
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(const Nekoya());
@ -28,6 +36,9 @@ class Nekoya extends StatefulWidget {
 class _NekoyaState extends State<Nekoya> {
  @override
  Widget build(BuildContext context) {
+    final box = Hive.box();
+    final onBoardingStatus = box.get('onboarding', defaultValue: 'true');
+
    return MaterialApp(
      theme: ThemeData(
          colorScheme:
@ -40,9 +51,11 @@ class _NekoyaState extends State<Nekoya> {
              pageTransitionType: PageTransitionType.fade,
              backgroundColor: const Color(0xff1b1c1e),
              splashIconSize: 150,
-              nextScreen: const Menu(
-                initialScreen: 2,
-              ),
+              nextScreen: onBoardingStatus == 'true'
+                  ? const Onboarding()
+                  : const Menu(
+                      initialScreen: 2,
+                    ),
            ),
        '/login': (context) => const Login(),
        '/register': (context) => const Register(),
--- a/lib/screens/onboarding.dart
+++ b/lib/screens/onboarding.dart
@ -0,0 +1,117 @@
+import 'package:hive/hive.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_onboarding_slider/flutter_onboarding_slider.dart';
+
+import 'package:nekoya_app/components/menu.dart';
+
+class Onboarding extends StatefulWidget {
+  const Onboarding({super.key});
+
+  @override
+  State<Onboarding> createState() => _OnboardingState();
+}
+
+class _OnboardingState extends State<Onboarding> {
+  @override
+  Widget build(BuildContext context) {
+    final box = Hive.box();
+
+    return OnBoardingSlider(
+        headerBackgroundColor: const Color(0xff1b1c1e),
+        pageBackgroundColor: const Color(0xff1b1c1e),
+        finishButtonText: 'Shop Now',
+        finishButtonStyle: const FinishButtonStyle(
+          backgroundColor: Color(0xff8B0000),
+        ),
+        onFinish: () {
+          final onBoardingStatus = box.get('onboarding', defaultValue: 'true');
+          if (onBoardingStatus == 'true') {
+            box.put('onboarding', 'false');
+          }
+
+          Navigator.pushReplacement(
+              context,
+              MaterialPageRoute(
+                  builder: (context) => const Menu(initialScreen: 2)));
+        },
+        skipTextButton:
+            const Text('Skip', style: TextStyle(color: Color(0xff8B0000))),
+        trailing:
+            const Text('Login', style: TextStyle(color: Color(0xff8B0000))),
+        trailingFunction: () {
+          Navigator.pushNamed(context, '/login');
+        },
+        background: [
+          Image.asset(
+            'assets/images/onboarding.webp',
+            height: 350,
+          ),
+          Image.asset(
+            'assets/images/onboarding_2.webp',
+            height: 350,
+          ),
+          Image.asset(
+            'assets/images/onboarding_3.webp',
+            height: 350,
+          ),
+        ],
+        centerBackground: true,
+        totalPage: 3,
+        speed: 1.8,
+        pageBodies: [
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 40),
+            child: const Column(
+              children: <Widget>[
+                SizedBox(
+                  height: 480,
+                ),
+                Text(
+                    'Discover an extensive collection of sneakers from all the top brands, conveniently gathered in one place',
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      color: Colors.white,
+                      fontSize: 25.0,
+                      fontWeight: FontWeight.w600,
+                    )),
+              ],
+            ),
+          ),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 40),
+            child: const Column(
+              children: <Widget>[
+                SizedBox(
+                  height: 480,
+                ),
+                Text('Choose sizes based on your preferences',
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      color: Colors.white,
+                      fontSize: 25.0,
+                      fontWeight: FontWeight.w600,
+                    )),
+              ],
+            ),
+          ),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 40),
+            child: const Column(
+              children: <Widget>[
+                SizedBox(
+                  height: 480,
+                ),
+                Text(
+                    'Experience seamless and hassle-free purchasing with our one-click checkout',
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      color: Colors.white,
+                      fontSize: 25.0,
+                      fontWeight: FontWeight.w600,
+                    )),
+              ],
+            ),
+          ),
+        ]);
+  }
+}
--- a/pubspec.lock
+++ b/pubspec.lock
@ -1,6 +1,22 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  _fe_analyzer_shared:
+    dependency: transitive
+    description:
+      name: _fe_analyzer_shared
+      sha256: eb376e9acf6938204f90eb3b1f00b578640d3188b4c8a8ec054f9f479af8d051
+      url: "https://pub.dev"
+    source: hosted
+    version: "64.0.0"
+  analyzer:
+    dependency: transitive
+    description:
+      name: analyzer
+      sha256: "69f54f967773f6c26c7dcb13e93d7ccee8b17a641689da39e878d5cf13b06893"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.2.0"
  animated_splash_screen:
    dependency: "direct main"
    description:
@ -41,6 +57,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "2.1.1"
+  build:
+    dependency: transitive
+    description:
+      name: build
+      sha256: "80184af8b6cb3e5c1c4ec6d8544d27711700bc3e6d2efad04238c7b5290889f0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.4.1"
  cached_network_image:
    dependency: "direct main"
    description:
@ -153,6 +177,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.0.6"
+  dart_style:
+    dependency: transitive
+    description:
+      name: dart_style
+      sha256: abd7625e16f51f554ea244d090292945ec4d4be7bfbaf2ec8cccea568919d334
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.3"
  dio:
    dependency: "direct main"
    description:
@ -230,6 +262,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "2.0.3"
+  flutter_onboarding_slider:
+    dependency: "direct main"
+    description:
+      name: flutter_onboarding_slider
+      sha256: "70d6b7c8d469abb31f66fd80c61915d7ff9c05d2c9001ec7db659702e7bc4f9d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.11"
  flutter_svg:
    dependency: "direct main"
    description:
@ -248,6 +288,22 @@ packages:
    description: flutter
    source: sdk
    version: "0.0.0"
+  glob:
+    dependency: transitive
+    description:
+      name: glob
+      sha256: "0e7014b3b7d4dac1ca4d6114f82bf1782ee86745b9b42a92c9289c23d8a0ab63"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.2"
+  hive:
+    dependency: "direct main"
+    description:
+      name: hive
+      sha256: "10819524df282842ebae12870e2e0e9ebc3e5c4637bec741ad39b919c589cb20"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.0-dev.2"
  html:
    dependency: transitive
    description:
@ -288,6 +344,22 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "0.18.1"
+  isar:
+    dependency: transitive
+    description:
+      name: isar
+      sha256: ebf74d87c400bd9f7da14acb31932b50c2407edbbd40930da3a6c2a8143f85a8
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.0-dev.14"
+  isar_flutter_libs:
+    dependency: "direct main"
+    description:
+      name: isar_flutter_libs
+      sha256: "04a3f4035e213ddb6e78d0132a7c80296a085c2088c2a761b4a42ee5add36983"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.0.0-dev.14"
  js:
    dependency: transitive
    description:
@ -320,6 +392,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.4.0"
+  logging:
+    dependency: transitive
+    description:
+      name: logging
+      sha256: "623a88c9594aa774443aa3eb2d41807a48486b5613e67599fb4c41c0ad47c340"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.0"
  lottie:
    dependency: "direct main"
    description:
@ -352,6 +432,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.9.1"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
  octo_image:
    dependency: transitive
    description:
@ -360,6 +448,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.0.2"
+  package_config:
+    dependency: transitive
+    description:
+      name: package_config
+      sha256: "1c5b77ccc91e4823a5af61ee74e6b972db1ef98c2ff5a18d3161c982a55448bd"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
  page_transition:
    dependency: "direct main"
    description:
@ -385,7 +481,7 @@ packages:
    source: hosted
    version: "1.0.1"
  path_provider:
-    dependency: transitive
+    dependency: "direct main"
    description:
      name: path_provider
      sha256: a1aa8aaa2542a6bc57e381f132af822420216c80d4781f7aa085ca3229208aaa
@ -464,6 +560,22 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "3.7.3"
+  provider:
+    dependency: transitive
+    description:
+      name: provider
+      sha256: "659adaefa8196fa2799d7ac3dca3c2e831e549dc40b082d07a599fe9150d75fc"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.0"
+  pub_semver:
+    dependency: transitive
+    description:
+      name: pub_semver
+      sha256: "40d3ab1bbd474c4c2328c91e3a7df8c6dd629b79ece4c4bd04bee496a224fb0c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.4"
  rename:
    dependency: "direct main"
    description:
@ -541,6 +653,14 @@ packages:
    description: flutter
    source: sdk
    version: "0.0.99"
+  source_gen:
+    dependency: transitive
+    description:
+      name: source_gen
+      sha256: fc0da689e5302edb6177fdd964efcb7f58912f43c28c2047a808f5bfff643d16
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.0"
  source_span:
    dependency: transitive
    description:
@ -789,6 +909,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "2.1.0"
+  watcher:
+    dependency: transitive
+    description:
+      name: watcher
+      sha256: "3d2ad6751b3c16cf07c7fca317a1413b3f26530319181b37e3b9039b84fc01d8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
  web:
    dependency: transitive
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -37,10 +37,14 @@ dependencies:
    sdk: flutter
  flutter_form_builder: ^9.1.1
  flutter_launcher_icons: ^0.13.1
+  flutter_onboarding_slider: ^1.0.11
  flutter_svg: ^2.0.7
+  hive: ^4.0.0-dev.2
  intl: ^0.18.1
+  isar_flutter_libs: ^4.0.0-dev.13
  lottie: ^2.6.0
  page_transition: ^2.1.0
+  path_provider: ^2.1.1
  rename: ^2.1.1
  shared_preferences: ^2.2.1
  universal_html: ^2.2.4