Merge pull request #154 from ia-toki/redesign-v2

WIP: Redesign v2
ia-toki · Mar 23, 2024 · 119bf6e · 119bf6e
2 parents f195e78 + d76fc99
commit 119bf6e
Show file tree

Hide file tree

Showing 18 changed files with 347 additions and 33 deletions.
diff --git a/app/assets/icon/ic_google.png b/app/assets/icon/ic_google.png
diff --git a/app/assets/images/ic_login.png b/app/assets/images/ic_login.png
diff --git a/app/assets/images/ic_onboard_1.png b/app/assets/images/ic_onboard_1.png
diff --git a/app/assets/images/ic_onboard_2.png b/app/assets/images/ic_onboard_2.png
diff --git a/app/assets/images/ic_onboard_3.png b/app/assets/images/ic_onboard_3.png
diff --git a/app/ios/Runner.xcodeproj/project.pbxproj b/app/ios/Runner.xcodeproj/project.pbxproj
diff --git a/app/lib/core/bases/widgets/atoms/button.dart b/app/lib/core/bases/widgets/atoms/button.dart
@@ -16,6 +16,7 @@ class Button extends StatelessWidget {
   final Color customButtonColor;
   final Color customTextColor;
   final Color customBorderColor;
+  final String icon;
   final double borderRadius;
 
   const Button({
@@ -29,8 +30,9 @@ class Button extends StatelessWidget {
     this.fontSize = 16,
     this.customButtonColor = Colors.transparent,
     this.customTextColor = BaseColors.black,
-    this.borderRadius = 16,
     this.customBorderColor = Colors.transparent,
+    this.icon = '',
+    this.borderRadius = 16,
     super.key,
   });
 
@@ -77,15 +79,25 @@ class Button extends StatelessWidget {
             border: Border.all(color: customBorderColor),
           ),
           width: double.infinity,
-          child: AutoSizeText(
-            text,
-            textAlign: TextAlign.center,
-            style: TextStyle(
-              color: textColor,
-              fontSize: fontSize,
-              fontWeight: FontWeight.w600,
-            ),
-            minFontSize: 2,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              if (icon != '')
+                Image.asset(
+                  icon,
+                ),
+              SizedBox(width: icon != '' ? 9.0 : 0),
+              AutoSizeText(
+                text,
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  color: textColor,
+                  fontSize: fontSize,
+                  fontWeight: FontWeight.w600,
+                ),
+                minFontSize: 2,
+              ),
+            ],
           ),
         ),
       ),

diff --git a/app/lib/core/constants/assets.dart b/app/lib/core/constants/assets.dart
@@ -4,6 +4,8 @@ class Assets {
   static const flagDir = 'assets/images/flags/';
   static const icon = 'assets/icon/icon.png';
   static const logo = 'assets/images/logo.png';
+  static const iconGoogle = 'assets/icon/ic_google.png';
+  static const iconLogin = 'assets/images/ic_login.png';
   static const bebrasPandaiText = 'assets/images/bebras-banner.png';
   static const bLogo = 'assets/images/b-logo.webp';
   static const studyBackground = 'assets/images/study-background.jpg';

diff --git a/app/lib/core/constants/get_started.dart b/app/lib/core/constants/get_started.dart
@@ -0,0 +1,23 @@
+List<Map<String, dynamic>> getStartedList = [
+  {
+    'image': 'assets/images/ic_onboard_1.png',
+    'title': 'Temukan Dunia Pengetahuanmu!',
+    'description':
+        'Selamat datang di Bebras Pandai, tempat di mana kamu dapat membuka '
+        'pintu menuju pengetahuan yang tak terbatas.'
+  },
+  {
+    'image': 'assets/images/ic_onboard_2.png',
+    'title': 'Pintu Gerbang Kecerdasan Terbuka',
+    'description':
+        'Setiap langkah akan membawa kita lebih dekat dengan pengetahuan '
+        'yang tak terbatas.'
+  },
+  {
+    'image': 'assets/images/ic_onboard_3.png',
+    'title': 'Temukan Keajaiban!',
+    'description':
+        'Setiap momen belajar menjadi petualangan yang penuh keceriaan. '
+        'Ayo bergabung dalam dan nikmati manfaat yang luar biasa'
+  }
+];
diff --git a/app/lib/core/theme/base_colors.dart b/app/lib/core/theme/base_colors.dart
@@ -26,4 +26,7 @@ class BaseColors {
   static const Color yellow = Color(0xFFfeb451);
   static const Color asparagus = Color(0xFF6da34d);
   static const Color grey = Colors.grey;
+  static const Color brightBlue = Color(0xFF1BB8E1);
+  static const Color greyCustome = Color(0xFFD9D9D9);
+
 }
diff --git a/app/lib/features/authentication/signin/presentation/pages/_pages.dart b/app/lib/features/authentication/signin/presentation/pages/_pages.dart
@@ -5,6 +5,7 @@ import 'package:go_router/go_router.dart';
 import '../../../../../core/bases/enum/button_type.dart';
 import '../../../../../core/bases/widgets/atoms/button.dart';
 import '../../../../../core/constants/assets.dart';
+import '../../../../../core/theme/base_colors.dart';
 import '../../../../../services/di.dart';
 import '../bloc/sign_in_bloc.dart';
 

diff --git a/app/lib/features/authentication/signin/presentation/pages/sign_in_page.dart b/app/lib/features/authentication/signin/presentation/pages/sign_in_page.dart
@@ -25,28 +25,29 @@ class _LoginPageState extends State<LoginPage> {
         child: Stack(
           children: [
             Image.asset(
-              Assets.studyBackground,
+              Assets.iconLogin,
               fit: BoxFit.cover,
-              height: size.height * 0.45,
+              height: size.height * 0.30,
+              width: double.infinity,
             ),
             Align(
               alignment: Alignment.bottomCenter,
               child: Container(
                 padding: const EdgeInsets.all(32),
-                height: size.height * 0.6,
+                height: size.height * 0.55,
                 width: size.width,
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(32),
-                  color: Colors.white,
-                ),
+                // decoration: BoxDecoration(
+                //   borderRadius: BorderRadius.circular(32),
+                //   color: Colors.white,
+                // ),
                 child: Column(
                   children: [
-                    Image.asset(
-                      Assets.bebrasPandaiText,
-                    ),
-                    const SizedBox(
-                      height: 100,
-                    ),
+                    // Image.asset(
+                    //   Assets.bebrasPandaiText,
+                    // ),
+                    // const SizedBox(
+                    //   height: 100,
+                    // ),
                     const Text(
                       'Selamat Datang di Aplikasi Bebras Pandai!',
                       textAlign: TextAlign.center,
@@ -62,7 +63,7 @@ class _LoginPageState extends State<LoginPage> {
                       'Yuk cari tahu seberapa tajam logikamu!',
                     ),
                     const SizedBox(
-                      height: 24,
+                      height: 50,
                     ),
                     BlocConsumer<SignInBloc, SignInState>(
                       bloc: _signInBloc,
@@ -79,7 +80,9 @@ class _LoginPageState extends State<LoginPage> {
                           width: 200,
                           child: Button(
                             text: 'Login with Google',
-                            buttonType: ButtonType.primary,
+                            buttonType: ButtonType.secondary,
+                            customBorderColor: BaseColors.black,
+                            icon: Assets.iconGoogle,
                             onTap: () {
                               if (state is! SignInLoadingState) {
                                 _signInBloc.add(

diff --git a/app/lib/features/main/presentation/pages/setting_page.dart b/app/lib/features/main/presentation/pages/setting_page.dart
@@ -116,7 +116,7 @@ class _SettingPageState extends State<SettingPage> {
                     onTap: () async {
                       await FirebaseAuth.instance.signOut();
                       await GoogleSignIn().signOut();
-                      context.go('/onboarding');
+                      context.go('/login');
                     },
                     customButtonColor: Colors.red.shade900,
                     customTextColor: Colors.white,

diff --git a/app/lib/features/onboarding/presentation/pages/_pages.dart b/app/lib/features/onboarding/presentation/pages/_pages.dart
@@ -2,11 +2,16 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:go_router/go_router.dart';
+import 'package:page_view_indicators/circle_page_indicator.dart';
 import 'package:url_launcher/url_launcher.dart';
 
+import '../../../../core/bases/widgets/atoms/button.dart';
 import '../../../../core/constants/assets.dart';
+import '../../../../core/constants/get_started.dart';
+import '../../../../core/theme/base_colors.dart';
+import '../../../../core/theme/font_theme.dart';
 import '../bloc/user_initialization_bloc.dart';
 
-part 'splash_screen.dart';
 part 'onboarding_page.dart';
+part 'splash_screen.dart';
 part 'update_dialog.dart';
diff --git a/app/lib/features/onboarding/presentation/pages/onboarding_page.dart b/app/lib/features/onboarding/presentation/pages/onboarding_page.dart
@@ -8,10 +8,142 @@ class OnboardingPage extends StatefulWidget {
 }
 
 class _OnboardingPageState extends State<OnboardingPage> {
-  final nama = 'dummy';
+
+  int selectedIndex = 0;
+  void setPage(int index) {
+    selectedIndex = index;
+  }
+  final PageController pageController = PageController();
+  final currentPageNotifier = ValueNotifier<int>(0);
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Scaffold(
+      body: SafeArea(
+        child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Expanded(
+                child: PageView.builder(
+                  controller: pageController,
+                  itemCount: getStartedList.length,
+                  itemBuilder: (BuildContext context, int index) {
+                    final item = getStartedList[index];
+                    return buildOnboardPage(
+                        index,
+                        item['image'] as String, 
+                        item['title'] as String, 
+                        item['description'] as String
+                    );
+                  },
+                  onPageChanged: (int index) {
+                    currentPageNotifier.value = index;
+                    setPage(index);
+                  }
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+  }
+
+  Widget buildOnboardPage(
+    int index, 
+    String image, 
+    String title, 
+    String description
+  ) {
+  return Container(
+    padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 40),
+    child: Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              '${index + 1}/${getStartedList.length}', 
+              style: const TextStyle( 
+                  color: Colors.black, 
+                  fontWeight: FontWeight.bold
+                ),
+            ),
+            buildIndicator(),
+          ],
+        ),
+
+        Visibility(
+          visible: image.isNotEmpty,
+          child: Expanded(
+            flex: 2,
+            child: Container(
+              alignment: Alignment.bottomCenter,
+              child: Center(
+                child: Image.asset(
+                  image,
+                  height: 200,
+                  width: 200,
+                ),
+              ),
+            ),
+          ),
+        ),
+        Expanded(
+          child: Center(
+              child: Column(
+                children: [
+                  Text(
+                    title,
+                    style: FontTheme.blackSubtitleBold(),
+                    textAlign: TextAlign.center,
+                  ),
+                  const SizedBox(height: 24),
+                  Text(
+                    description,
+                    style: FontTheme.greyNormal14(),
+                    textAlign: TextAlign.center,
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+        FractionallySizedBox(
+          widthFactor: 0.6, // Set the width to 80%
+          child: Button(
+            onTap: () async {
+              if ( selectedIndex != 2 ) {
+                await pageController.nextPage(
+                  duration: const Duration(milliseconds: 300),
+                  curve: Curves.easeIn,
+                );
+              } else {
+                await context.push('/login');
+              }
+            },
+            customButtonColor: BaseColors.brightBlue,
+            customTextColor: Colors.white,
+            text: (index != 2 ? 'Selanjutnya' : 'Masuk'),
+          ),
+        ),
+      ],
+    ),
+  );
+}
+
+
+  Widget buildIndicator() {
+    return Container(
+      padding: const EdgeInsets.only(top: 5),
+      child: CirclePageIndicator(
+        dotColor: BaseColors.greyCustome,
+        selectedDotColor: BaseColors.brightBlue,
+        itemCount: getStartedList.length,
+        currentPageNotifier: currentPageNotifier,
+      ),
+    );
   }
 }
diff --git a/app/lib/services/router_service.dart b/app/lib/services/router_service.dart
@@ -23,6 +23,10 @@ GoRouter router = GoRouter(
     ),
     GoRoute(
       path: '/onboarding',
+      builder: (context, state) => const OnboardingPage(),
+    ),
+    GoRoute(
+      path: '/login',
       builder: (context, state) => const LoginPage(),
     ),
     GoRoute(

diff --git a/app/pubspec.lock b/app/pubspec.lock
@@ -1000,6 +1000,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.0"
+  page_view_indicators:
+    dependency: "direct main"
+    description:
+      name: page_view_indicators
+      sha256: d2ebf6c26d1b065f137e88a2b88181dea6b96d7a34abe9a237fbf214888d0f3f
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
   path:
     dependency: transitive
     description:

diff --git a/app/pubspec.yaml b/app/pubspec.yaml
@@ -2,7 +2,7 @@ name: bebras_pandai
 description: Aplikasi belajar Computational Thinking oleh bebras.org
 # The following line prevents the package from being accidentally published to
 # pub.dev using `flutter pub publish`. This is preferred for private packages.
-publish_to: 'none' # Remove this line if you wish to publish to pub.dev
+publish_to: "none" # Remove this line if you wish to publish to pub.dev
 
 # The following defines the version and build number for your application.
 # A version number is three numbers separated by dots, like 1.2.43
@@ -19,7 +19,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+13
 
 environment:
-  sdk: '>=3.0.5 <4.0.0'
+  sdk: ">=3.0.5 <4.0.0"
 
 # Dependencies specify other packages that your package needs in order to work.
 # To automatically upgrade your package dependencies to the latest versions
@@ -65,6 +65,7 @@ dependencies:
   printing: ^5.11.0
   cached_network_image: ^3.3.0
   firebase_messaging: ^14.7.3
+  page_view_indicators: ^2.0.0
   carousel_slider: ^4.2.1
   font_awesome_flutter: ^10.6.0
   cached_network_svg_image: ^0.0.7
@@ -89,8 +90,6 @@ permission:
 
 # The following section is specific to Flutter packages.
 flutter:
-
-
   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in
   # the material Icons class.