0

I want to build something like this

enter image description here

What I build so far is this, but I can not move it up

enter image description here

I tired using stack to move the icon up but it does not work

my code

   BottomNavigationBarItem(
                  label: 'AppStrings.home',
                  icon: ImageIcon(
                    AssetImage(AppImages.home),
                    size: 35.sp,
                  ),
                  activeIcon: Stack(
                    clipBehavior: Clip.antiAlias,
                    children: [
                      Container(
                        width: 68,
                        height: 68,
                        decoration: BoxDecoration(
                          color: AppColors.secondaryColor,
                          borderRadius: BorderRadius.circular(100),
                          border: Border.all(
                            color: AppColors.whiteColor,
                            width: 3
                          ),
                        ),
                      ),
                    ],
                  )),
KIRAx2000
  • 111
  • 1
  • 10
  • You can wrap the icon button with padding and add a bottom offset, but that won't likely give you the design you want, you probably want to build custom navigation that will give you more control. There are a few packages that do this already: https://pub.dev/packages/molten_navigationbar_flutter I suggest following their pattern: https://github.com/AymanProjects/Molten_NavigationBar_Flutter/blob/master/lib/molten_navigationbar_flutter.dart – nramirez Mar 20 '23 at 01:05
  • here's another example: https://pub.dev/packages/curved_navigation_bar where they paint the bar as they wish: https://github.com/rafalbednarczuk/curved_navigation_bar/blob/master/lib/src/nav_custom_painter.dart – nramirez Mar 20 '23 at 01:08

1 Answers1

1

You can use FloatingActionButton but unfortunately will be not a good choice check this because you want to make it at any place you want, so the best way is to build with your custom widget by using stack 1 first stack if where the max height with house button height. 2 second stack is the normal bottom bar.

also you must know how to deal with Positioned widget which will help you. read this might help you,also to create create custom navigation bar .

and as final way to do it use package flutter gems website will help you.

Faisal Faraj
  • 576
  • 3
  • 9