Flutter – BottomNavigationBar – should I use Container and align?

Sometimes the predefined widgets are limited, like the BottomNavigationBar, but you are using Flutter, so you can customize and create your own Widgets 😀 .

I created an example for you, I’m using IndexedStack to control the view pages, and a simple Container and Stack to create the navigation bottom bar (you can extract this in your own widget).

Results:

Code:

class MyNewPage extends StatefulWidget {
 const MyNewPage({super.key});

 @override
 State<MyNewPage> createState() => _MyNewPageState();
}

class _MyNewPageState extends State<MyNewPage> {
 int _currentPage = 0;
 final int _maxPages = 5;

 Widget _buildPage(String text) {
   return Center(
     child: Text(
       text,
       style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 60),
     ),
   );
 }

 Widget _buildTab(
   String text,
   int index, {
   bool isCenter = false,
 }) {
   return InkWell(
     onTap: () {
       setState(() {
         _currentPage = index;
       });
     },
     child: Column(
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         isCenter
             ? const Icon(
                 Icons.apartment,
                 size: 50,
               )
             : const Icon(Icons.home),
         Text(text),
       ],
     ),
   );
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: IndexedStack(
       index: _currentPage,
       children: List.generate(
         _maxPages,
         (index) => _buildPage('Page: $index'),
       ),
     ),
     bottomNavigationBar: SafeArea(
       child: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 10),
         child: SizedBox(
           height: 100,
           child: Stack(
             children: [
               Align(
                 alignment: Alignment.bottomCenter,
                 child: Container(
                   height: 80,
                   decoration: const BoxDecoration(
                     borderRadius: BorderRadius.all(Radius.circular(20)),
                     border:
                         Border.fromBorderSide(BorderSide(color: Colors.grey)),
                   ),
                 ),
               ),
               Positioned.fill(
                 child: Padding(
                   padding: const EdgeInsets.only(bottom: 20),
                   child: Row(
                     crossAxisAlignment: CrossAxisAlignment.end,
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: List.generate(
                       _maxPages,
                       (index) => _buildTab(
                         'Home',
                         index,
                         isCenter: index == 2,
                       ),
                     ),
                   ),
                 ),
               ),
             ],
           ),
         ),
       ),
     ),
   );
 }
}