LanarsInc / animated-bottom-navigation-bar-flutter

AnimatedBottomNavigationBar is a customizable widget inspired by
https://dribbble.com/shots/7134849-Simple-Tab-Bar-Animation
Other
353 stars 106 forks source link

setting extendBody: true has no effect #62

Closed heshesh2010 closed 10 months ago

heshesh2010 commented 10 months ago

Hi , I'm trying to make the floatingActionButton is background transparent , but when I set extendBody: true I didn't notice any effect

` Widget build(BuildContext context) { return Obx(() => Scaffold( extendBody: true,

      resizeToAvoidBottomInset: false,
      appBar: controller.bottomNavIndex.value == 1
          ? null
          : PreferredSize(
              preferredSize: Size(0, 80.h),
              child: SafeArea(
                child: Directionality(
                  textDirection: TextDirection.ltr,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 16.0),
                    child: AppBar(
                      backgroundColor: Colors.white,
                      // leading notification icon and count
                      actions: [
                        // drawer icon
                        Padding(
                          padding:
                              const EdgeInsets.symmetric(horizontal: 8.0),
                          child: Builder(
                            builder: (context) => InkWell(
                              onTap: () {
                                Scaffold.of(context).openDrawer();
                              },
                              child: Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 16.0),
                                child: SvgPicture.asset(
                                  drawer,
                                  height: 24.h,
                                  width: 24.w,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                      leading: InkWell(
                        onTap: () => Get.offNamed(Routes.notifications),
                        child: Padding(
                          padding: const EdgeInsets.only(left: 16.0),
                          child: Stack(
                            children: [
                              // svg icon

                              Center(
                                child: SvgPicture.asset(
                                  bell,
                                  height: 24.h,
                                  width: 24.w,
                                ),
                              ),

                              Positioned(
                                right: 8,
                                top: 11,
                                child: Container(
                                  padding: const EdgeInsets.all(2),
                                  decoration: const BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(10),
                                    ),
                                  ),
                                  constraints: const BoxConstraints(
                                    minWidth: 14,
                                    minHeight: 14,
                                  ),
                                  child: const Text(
                                    '0',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 8,
                                    ),
                                    textAlign: TextAlign.center,
                                  ),
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
      floatingActionButton: Obx(
        () => controller.bottomNavIndex.value == 1
            ? const SizedBox()
            : GestureDetector(
                child: SquareRoundNavigator(
                  height: 60,
                  width: 60,
                  imageAsset: addWorker,
                  borderColor: AppColors().mainColor(1),
                ),
                onTap: () {
                  if (Get.isRegistered<AddWorkerController>()) {
                    controller.bottomNavIndex.value = 1;
                  } else {
                    Get.lazyPut(() => AddWorkerController(
                        workerRepository: WorkerRepository(
                            apiClient: ApiClient(dio: Dio()))));

                    controller.bottomNavIndex.value = 1;
                  }
                },
              ),
      ),

      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked,
      drawer: DrawerWidget(),
      body: Obx(() => IndexedStack(
            index: controller.bottomNavIndex.value,
            children: controller.children,
          )),
      bottomNavigationBar: Obx(
        () => controller.bottomNavIndex.value == 1
            ? const SizedBox()
            : AnimatedBottomNavigationBar.builder(

                elevation: 0,
                itemCount: iconList.length,
                tabBuilder: (index, isActive) {
                  final color =
                      isActive ? const Color(0xff2F3672) : Colors.black;
                  return Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        iconList[index],
                        size: 30.sp,
                        color: color,
                      ),
                      const SizedBox(height: 4),
                      textList[index],
                    ],
                  );
                },
                shadow: null,
                backgroundColor: const Color(0xffDCDCE4),
                height: 80.h,
                activeIndex: controller.bottomNavIndex.value,
                notchSmoothness: NotchSmoothness.smoothEdge,
                gapLocation: GapLocation.center,
                leftCornerRadius: 10,
                rightCornerRadius: 10,
                onTap: (index) => controller.bottomNavIndex.value = index),
        //other params
      ),

      // CurvedNavigationBar(
      //     color: const Color(0xffDCDCE4),
      //     backgroundColor: AppColors().backgroundColor(1),
      //     buttonBackgroundColor: Colors.transparent,
      //     key: controller.bottomNavigationKey,
      //     onTap: controller.changePage,
      //     animationCurve: Curves.easeInQuad,
      //     animationDuration: const Duration(milliseconds: 0),
      //     letIndexChange: (index) {
      //       if (index == 1) {
      //         return true;
      //       } else {
      //         return false;
      //       }
      //     },
      //     items: <Widget>[
      //       controller.tabIndex.value == 0
      //           ? const Icon(Icons.home, size: 40)
      //           : const Icon(Icons.home, size: 40),
      //       controller.tabIndex.value == 1
      //           ? SquareRoundNavigator(
      //               height: 60,
      //               width: 60,
      //               imageAsset: addWorker,
      //               borderColor: AppColors().mainColor(1),
      //             )
      //           : const Icon(Icons.add, size: 40),
      //       controller.tabIndex.value == 2
      //           ? const Icon(Icons.settings, size: 40)
      //           : const Icon(Icons.settings, size: 40)
      //     ],
      //   ),
    ));

}`

vizhan-lanars commented 10 months ago

Try a solution from an issue

heshesh2010 commented 10 months ago

Try a solution from an issue

thanks it works