Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to add top padding to a Stack Bottom Navigation Bar

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

enter image description here

Want to achieve

enter image description here

Tags:

2

Answers


  1. 0

    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:

    enter image description here

    Login or Signup to reply.
  2. 0

    BottomNavigationBar hasn’t got any height or padding parm, so you can just use this widget inside Stack, just wrap your stack with Sizebox, and then use Position Widget to Position BottomNavigationBar

    SizedBox(
        height: 56 + 12,
        child: Stack(
          fit: StackFit.loose,
          children: [
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              child: BottomNavigationBar(),
           ),
          ],
         ),
      );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search