new navbar

android/app/build.gradle

@@ -45,8 +45,8 @@ android {
  applicationId "com.example.getx_standard"
  // You can update the following values to match your application needs.
  // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
- minSdkVersion flutter.minSdkVersion
- targetSdkVersion flutter.targetSdkVersion
+ minSdkVersion 24
+ targetSdkVersion 34
  versionCode flutterVersionCode.toInteger()
  versionName flutterVersionName
  }

lib/app/components/navbar/fixed_bottom_navbar.dart

@@ -0,0 +1,107 @@
+// ignore_for_file: no_leading_underscores_for_local_identifiers, must_be_immutable
+
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:get/get.dart';
+import 'package:iconly/iconly.dart';
+
+import 'navbar_controller.dart';
+
+class FixedBottomNavbar extends GetView<NavbarController> {
+ const FixedBottomNavbar({super.key});
+
+ @override
+ Widget build(BuildContext context) {
+ var theme = Theme.of(context);
+
+ return Scaffold(
+ resizeToAvoidBottomInset: false,
+ extendBody: false,
+ body: Obx(() => controller.navigation[controller.selectedIndex.value]),
+ bottomNavigationBar: Obx(() => Container(
+ width: MediaQuery.of(context).size.width,
+ height: 80.h,
+ color: theme.primaryColor,
+ padding: EdgeInsets.only(bottom: 18.sp, left: 18.sp, right: 18.sp),
+ child: SizedBox(
+ width: MediaQuery.of(context).size.width,
+ height: 75.h,
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+ children: [
+ /// ITEM 1
+ Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ SizedBox(
+ height: 40.h,
+ width: 40.w,
+ child: IconButton(
+ hoverColor: Colors.transparent,
+ onPressed: () {
+ controller.onTap(0);
+ },
+ icon: Icon(
+ controller.selectedIndex.value == 0
+ ? IconlyBold.home
+ : IconlyLight.home,
+ color: Colors.white,
+ size: 25.sp,
+ ),
+ ),
+ ),
+ SizedBox(height: 2.sp),
+ Container(
+ height: 8,
+ width: 8,
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: controller.selectedIndex.value == 0
+ ? Colors.white
+ : Colors.transparent,
+ ),
+ ),
+ ],
+ ),
+
+ /// ITEM 2
+ Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ SizedBox(
+ height: 40.h,
+ width: 40.w,
+ child: IconButton(
+ hoverColor: Colors.transparent,
+ onPressed: () {
+ controller.onTap(1);
+ },
+ icon: Icon(
+ controller.selectedIndex.value == 1
+ ? IconlyBold.graph
+ : IconlyLight.graph,
+ color: Colors.white,
+ size: 25.sp,
+ ),
+ ),
+ ),
+ SizedBox(height: 2.sp),
+ Container(
+ height: 8,
+ width: 8,
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: controller.selectedIndex.value == 1
+ ? Colors.white
+ : Colors.transparent,
+ ),
+ ),
+ ],
+ ),
+ ],
+ ),
+ ),
+ )),
+ );
+ }
+}

lib/app/components/navbar/bottom_navbar.dart → lib/app/components/navbar/floating_bottom_navbar.dart

@@ -7,8 +7,8 @@ import 'package:iconly/iconly.dart';
 
 import 'navbar_controller.dart';
 
-class BottomNavbar extends GetView<NavbarController> {
- const BottomNavbar({super.key});
+class FloatingBottomNavbar extends GetView<NavbarController> {
+ const FloatingBottomNavbar({super.key});
 
  @override
  Widget build(BuildContext context) {

lib/app/modules/example/home-with-restAPI/views/home_view.dart

@@ -32,8 +32,9 @@ class HomeView extends GetView<HomeController> {
  color: theme.primaryColor,
  onRefresh: () async => await controller.getRecipes(),
  child: Padding(
- padding: EdgeInsets.fromLTRB(
- 18.sp, 18.sp, 18.sp, controller.bottomPadding.value),
+ /// NOTE: IF USE FLOATING_NAV => bottom padding=controller.bottomPadding.value;
+ /// Otherwise 18.sp;
+ padding: EdgeInsets.fromLTRB(18.sp, 18.sp, 18.sp, 18.sp),
  child: GridView.builder(
  itemCount: controller.recipes.length,
  physics: const BouncingScrollPhysics(),

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

@@ -101,7 +101,7 @@ class OnboardingView extends GetView<OnboardingController> {
  height: 40.sp,
  child: TextButton(
  onPressed: () {
- Get.offAllNamed(Routes.NAV);
+ Get.offAllNamed(Routes.FLOATING_NAV);
  },
  child: Text(
  "Skip",
@@ -147,7 +147,7 @@ class OnboardingView extends GetView<OnboardingController> {
  onPressed: () {
  if (controller.selectedPage.value >
  controller.onBoardingPages.length - 2) {
- Get.offAllNamed(Routes.NAV);
+ Get.offAllNamed(Routes.FLOATING_NAV);
  } else {
  controller.forwardAction();
  }

lib/app/routes/app_pages.dart

@@ -1,6 +1,7 @@
 import 'package:get/get.dart';
+import 'package:getx_standard/app/components/navbar/fixed_bottom_navbar.dart';
 
-import '../components/navbar/bottom_navbar.dart';
+import '../components/navbar/floating_bottom_navbar.dart';
 import '../components/navbar/navbar_binding.dart';
 
 import '../modules/example/home-with-graphql/bindings/graphql_binding.dart';
@@ -19,15 +20,20 @@ class AppPages {
  AppPages._();
 
  static const ONBOARDING = Routes.ONBOARDING;
- static const NAV = Routes.NAV;
+ static const FIXED_NAV = Routes.FIXED_NAV;
+ static const FLOATING_NAV = Routes.FLOATING_NAV;
  static const HOME = Routes.HOME;
  static const POST_DETAIL = Routes.POST_DETAIL;
 
  static final routes = [
- /// NAV BAR
+ /// NAV BARs
  GetPage(
- name: _Paths.NAV,
- page: () => const BottomNavbar(),
+ name: _Paths.FIXED_NAV,
+ page: () => const FixedBottomNavbar(),
+ binding: NavbarBinding(),
+ ), GetPage(
+ name: _Paths.FLOATING_NAV,
+ page: () => const FloatingBottomNavbar(),
  binding: NavbarBinding(),
  ),
 

lib/app/routes/app_routes.dart

@@ -6,7 +6,8 @@ part of 'app_pages.dart';
 abstract class Routes {
  Routes._();
 
- static const NAV = _Paths.NAV;
+ static const FIXED_NAV = _Paths.FIXED_NAV;
+ static const FLOATING_NAV = _Paths.FLOATING_NAV;
  static const HOME = _Paths.HOME;
  static const POST_DETAIL = _Paths.POST_DETAIL;
  static const GRAPHQL = _Paths.GRAPHQL;
@@ -16,7 +17,8 @@ abstract class Routes {
 abstract class _Paths {
  _Paths._();
 
- static const NAV = '/nav';
+ static const FIXED_NAV = '/fixed_nav';
+ static const FLOATING_NAV = '/floating_nav';
  static const HOME = '/home';
  static const POST_DETAIL = '/post_detail';
  static const GRAPHQL = '/graphql';

lib/app/service/REST/dio_client.dart

@@ -18,9 +18,9 @@ class DioClient {
  sendTimeout: const Duration(seconds: TIME_OUT_DURATION),
  ))
  ..interceptors.add(PrettyDioLogger(
- requestHeader: true,
+ requestHeader: false,
  requestBody: true,
- responseBody: true,
+ responseBody: false,
  responseHeader: false,
  error: true,
  compact: true,

lib/my_app.dart

@@ -36,7 +36,7 @@ class MyApp extends GetView {
  );
  },
 
- initialRoute: AppPages.NAV,
+ initialRoute: AppPages.FIXED_NAV,
  // first screen to show when app is running
 
  defaultTransition: Transition.circularReveal,