new onboarding screen

lib/app/modules/onboarding/bindings/onboarding_binding.dart

@@ -0,0 +1,12 @@
+import 'package:get/get.dart';
+
+import '../controllers/onboarding_controller.dart';
+
+class OnboardingBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.lazyPut<OnboardingController>(
+      () => OnboardingController(),
+    );
+  }
+}

lib/app/modules/onboarding/controllers/onboarding_controller.dart

@@ -0,0 +1,31 @@
+import 'package:get/get.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../utils/constants.dart';
+import '../model/on_boarding_model.dart';
+
+class OnboardingController extends GetxController {
+  RxInt selectedPage = 0.obs;
+  final pageController = PageController();
+  forwardAction() {
+    pageController.nextPage(duration: 300.milliseconds, curve: Curves.ease);
+  }
+
+  backwardAction() {
+    pageController.previousPage(duration: 300.milliseconds, curve: Curves.ease);
+  }
+
+  List<OnBoardingModel> onBoardingPages = [
+    OnBoardingModel(
+        imageAsset: Onboarding.kBoard1,
+        title: 'Flutter and GetX: Empowering Efficient Development.',
+        description:
+            'GetX: A concise Flutter library for efficient state management and navigation, enhancing app development.'),
+    OnBoardingModel(
+        imageAsset: Onboarding.kBoard2,
+        title:
+            'Flutter supports both REST and GraphQL for handling API requests in your applications.',
+        description:
+            'Get Strong and smart client and error handling for both REST and GraphQL in GetX.'),
+  ];
+}

lib/app/modules/onboarding/model/on_boarding_model.dart

@@ -0,0 +1,9 @@
+class OnBoardingModel {
+  OnBoardingModel(
+      {required this.imageAsset,
+      required this.title,
+      required this.description});
+  final String imageAsset;
+  final String title;
+  final String description;
+}

lib/app/modules/onboarding/views/onboarding_view.dart

@@ -0,0 +1,153 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+import 'package:get/get.dart';
+
+import '../../../components/global-widgets/my_buttons.dart';
+import '../../../routes/app_pages.dart';
+import '../controllers/onboarding_controller.dart';
+
+class OnboardingView extends GetView<OnboardingController> {
+  const OnboardingView({Key? key}) : super(key: key);
+  @override
+  Widget build(BuildContext context) {
+    var theme = Theme.of(context);
+    return SafeArea(
+      child: Scaffold(
+        body: Stack(
+          children: [
+            PageView.builder(
+              controller: controller.pageController,
+              onPageChanged: controller.selectedPage,
+              itemCount: controller.onBoardingPages.length,
+              itemBuilder: (context, index) {
+                return controller.onBoardingPages.isEmpty
+                    ? Center(
+                        child: CircularProgressIndicator(
+                          color: theme.primaryColor,
+                        ),
+                      )
+                    : Column(
+                        children: [
+                          SizedBox(height: 150.h),
+                          Container(
+                            height: 200.h,
+                            width: 300.w,
+                            decoration: BoxDecoration(
+                                image: DecorationImage(
+                              image: AssetImage(
+                                  controller.onBoardingPages[index].imageAsset),
+                              fit: BoxFit.cover,
+                            )),
+                          ),
+                          SizedBox(
+                            height: 40.sp,
+                          ),
+                          Padding(
+                            padding: EdgeInsets.symmetric(horizontal: 25.sp),
+                            child: Column(
+                              mainAxisAlignment: MainAxisAlignment.center,
+                              children: [
+                                SizedBox(height: 30.sp),
+                                SizedBox(
+                                  width: 300.w,
+                                  child: Text(
+                                    controller.onBoardingPages[index].title,
+                                    style: TextStyle(
+                                      fontSize: 24.sp,
+                                      fontWeight: FontWeight.w700,
+                                      height: 1.4,
+                                      color: Colors.black,
+                                    ),
+                                    textAlign: TextAlign.center,
+                                  ),
+                                ),
+                                const SizedBox(
+                                  height: 15,
+                                ),
+                                Text(
+                                  controller.onBoardingPages[index].description,
+                                  textAlign: TextAlign.center,
+                                  style: TextStyle(
+                                    fontSize: 14.sp,
+                                    fontWeight: FontWeight.w400,
+                                    color: theme.hintColor,
+                                    height: 1.4,
+                                  ),
+                                ),
+                              ],
+                            ),
+                          ),
+                        ],
+                      );
+              },
+            ),
+            Positioned(
+              bottom: 100.h,
+              left: 150.w,
+              child: Row(
+                children: List.generate(
+                  controller.onBoardingPages.length,
+                  (index) => Obx(() {
+                    return Container(
+                      margin: const EdgeInsets.symmetric(horizontal: 3),
+                      height: 4,
+                      width: 15,
+                      decoration: BoxDecoration(
+                        color: controller.selectedPage.value == index
+                            ? theme.primaryColor
+                            : theme.primaryColor.withOpacity(.2),
+                        borderRadius: BorderRadius.circular(30.r),
+                        shape: BoxShape.rectangle,
+                      ),
+                    );
+                  }),
+                ),
+              ),
+            ),
+            Positioned(
+              bottom: 40.sp,
+              left: 0,
+              right: 0,
+              child: Padding(
+                padding: EdgeInsets.symmetric(horizontal: 25.sp),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    SizedBox(
+                      width: 80.sp,
+                      height: 40.sp,
+                      child: PrimaryButton(
+                        title: 'Skip',
+                        onPressed: () {
+                          Get.offAllNamed(Routes.NAV);
+                        },
+                        inactive: false,
+                      ),
+                    ),
+                    SizedBox(
+                      width: 80.sp,
+                      height: 40.sp,
+                      child: PrimaryButton(
+                        title: 'Next',
+                        onPressed: () {
+                          if (controller.selectedPage.value >
+                              controller.onBoardingPages.length - 2) {
+                            Get.offAllNamed(Routes.NAV);
+                          } else {
+                            controller.forwardAction();
+                          }
+                        },
+                        inactive: false,
+                      ),
+                    )
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/app/routes/app_pages.dart

@@ -1,12 +1,14 @@
 import 'package:get/get.dart';
-import 'package:getx_standard/app/modules/home-with-restAPI/views/post_detail_view.dart';
 
 import '../components/navbar/bottom_navbar.dart';
 import '../components/navbar/navbar_binding.dart';
 import '../modules/home-with-graphql/bindings/graphql_binding.dart';
 import '../modules/home-with-graphql/views/graphql_view.dart';
 import '../modules/home-with-restAPI/bindings/home_binding.dart';
 import '../modules/home-with-restAPI/views/home_view.dart';
+import '../modules/home-with-restAPI/views/post_detail_view.dart';
+import '../modules/onboarding/bindings/onboarding_binding.dart';
+import '../modules/onboarding/views/onboarding_view.dart';
 
 // ignore_for_file: constant_identifier_names
 
@@ -15,6 +17,7 @@ part 'app_routes.dart';
 class AppPages {
   AppPages._();
 
+  static const ONBOARDING = Routes.ONBOARDING;
   static const NAV = Routes.NAV;
   static const HOME = Routes.HOME;
   static const POST_DETAIL = Routes.POST_DETAIL;
@@ -43,5 +46,10 @@ class AppPages {
       page: () => const GraphQLView(),
       binding: GraphQLBinding(),
     ),
+    GetPage(
+      name: _Paths.ONBOARDING,
+      page: () => const OnboardingView(),
+      binding: OnboardingBinding(),
+    ),
   ];
 }

lib/app/routes/app_routes.dart

@@ -10,6 +10,7 @@ abstract class Routes {
   static const HOME = _Paths.HOME;
   static const POST_DETAIL = _Paths.POST_DETAIL;
   static const GRAPHQL = _Paths.GRAPHQL;
+  static const ONBOARDING = _Paths.ONBOARDING;
 }
 
 abstract class _Paths {
@@ -19,4 +20,5 @@ abstract class _Paths {
   static const HOME = '/home';
   static const POST_DETAIL = '/post_detail';
   static const GRAPHQL = '/graphql';
+  static const ONBOARDING = '/onboarding';
 }

lib/main.dart

@@ -58,7 +58,7 @@ Future<void> main() async {
             );
           },
 
-          initialRoute: AppPages.NAV,
+          initialRoute: AppPages.ONBOARDING,
           // first screen to show when app is running
 
           defaultTransition: Transition.circularReveal,

lib/utils/constants.dart

@@ -1,3 +1,9 @@
 class AppImages {
   static String get kAppIcon => 'assets/images/icon-splash/app_icon.png';
 }
+
+class Onboarding {
+  static String get kBoard2 => 'assets/images/onBoarding/board2.png';
+  static String get kBoard1 => 'assets/images/onBoarding/board1.png';
+  static String get kBoard3 => 'assets/images/onBoarding/board3.png';
+}

pubspec.yaml

@@ -82,6 +82,7 @@ flutter:
   assets:
     - assets/images/
     - assets/images/icon-splash/
+    - assets/images/onBoarding/
     - assets/vectors/
     - assets/fonts/
     - animations/