How to add top padding to a Stack Bottom Navigation Bar

Question

class MainScreen extends StatelessWidget {
  MainScreen({super.key});

  List<Widget> pageList = const [
    HomePage(),
    FlightsPage(),
    DirectoryPage(),
    GuidePage()
  ];

  @override
  Widget build(BuildContext context) {
    final controller = Get.put(TabIndexController());
    return Obx(() => Scaffold(
          body: Stack(
            children: [
              pageList[controller.tabIndex],
              Align(
                alignment: Alignment.bottomCenter,
                child: Theme(
                    data: Theme.of(context).copyWith(canvasColor: kSecondary),
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(topLeft: Radius.circular(30.r),topRight: Radius.circular(30.r)),
                      child: BottomNavigationBar(
                        elevation: 0,
                        showSelectedLabels: true,
                        showUnselectedLabels: true,
                        selectedLabelStyle: appStyle(10, kPrimary, FontWeight.bold),
                        unselectedLabelStyle: appStyle(10, kWhite, FontWeight.bold),
                        selectedItemColor: kPrimary,
                        unselectedItemColor: kOffWhite,
                        type: BottomNavigationBarType.fixed,
                       
                        onTap: (value) {
                          controller.setTabIndex = value;
                        },
                        currentIndex: controller.tabIndex,
                        items: [
                          BottomNavigationBarItem(
                              icon: controller.tabIndex == 0
                                  ? SvgPicture.asset(
                                      'assets/icons/home_selected.svg')
                                  : SvgPicture.asset(
                                      ('assets/icons/home_unselected.svg')),
                              label: 'HOME'),
                          BottomNavigationBarItem(
                              icon: controller.tabIndex == 1
                                  ? SvgPicture.asset(
                                      'assets/icons/flights_selected.svg')
                                  : SvgPicture.asset(
                                      ('assets/icons/flights_unselected.svg')),
                              label: 'FLIGHTS'),
                          BottomNavigationBarItem(
                              icon: controller.tabIndex == 2
                                  ? SvgPicture.asset(
                                      'assets/icons/directory_selected.svg')
                                  : SvgPicture.asset(
                                      ('assets/icons/directory_unselected.svg')),
                              label: 'DIRECTORY'),
                          BottomNavigationBarItem(
                              icon: controller.tabIndex == 3
                                  ? SvgPicture.asset(
                                      'assets/icons/guide_selected.svg')
                                  : SvgPicture.asset(
                                      ('assets/icons/guide_unselected.svg')),
                              label: 'GUIDE')
                        ],
                      ),
                    )),
              )
            ],
          ),
        ));
  }
}

How does one add padding to a stack method of Bottom Navigation Bar?
I am having trouble adding a little bit of top padding to my icons.I have tried wrapping in a Container and provided a height but unable to achieve what i want to achieve. Also tried sized box no luck either!

Current View

Want to achieve

Answer 1

Try custom instead of using BottomNavigationBar

Refer to this code:

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  final controller = Get.put(TabIndexController());
  final _selectedItemColor = Colors.green;
  final _unselectedItemColor = Colors.black12;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Container(
              color: Colors.red,
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: ClipRRect(
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(30),
                    topRight: Radius.circular(30)),
                child: Container(
                  padding: EdgeInsets.symmetric(horizontal: 24),
                  color: Colors.yellow,
                  width: double.infinity,
                  height: 80,
                  child: Center(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        _buildIcon('selected', 'un_selected', 'HOME', 0),
                        _buildIcon('selected', 'un_selected', 'FLIGHTS', 1),
                        _buildIcon('selected', 'un_selected', 'DIRECTORY', 2),
                        _buildIcon('selected', 'un_selected', 'GUIDE', 3),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _onItemTapped(index) => controller.setTabIndex = index;
  Color _getItemColor(int index) => controller.setTabIndex == index
      ? _selectedItemColor
      : _unselectedItemColor;

  _buildIcon(String selectedIcon, String unSelectedIcon, String label,
          int index) =>
      InkWell(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SvgPicture.asset(index == controller.setTabIndex
                ? selectedIcon
                : unSelectedIcon),
            Text(label,
                style: TextStyle(fontSize: 12, color: _getItemColor(index))),
          ],
        ),
        onTap: () => _onItemTapped(index),
      );
}

This is the result: