Search code examples
flutterdartlistviewscaffold

Can I Scaffold bottomNavigationBar wrap ListView?


I'm thinking about — if I need more menu elements in bottom — can I wrap my Scaffold bottomNavigationBar to ListView and horizontal scroll it?

// below code is wrong, but it shows my idea clearly (I suppose :) )
// piece of Scaffold
bottomNavigationBar: BottomNavigationBar(
        items: [
          ListView(
            children: [
              BottomNavigationBarItem(icon: Icon(Icons.home), label: "Q"),
              BottomNavigationBarItem(
                  icon: Icon(Icons.contact_mail), label: "W"),
              BottomNavigationBarItem(
                  icon: Icon(Icons.contact_page), label: "E"),
              BottomNavigationBarItem(icon: Icon(Icons.search), label: "R"),
            ],
          )
        ],
      ),

Solution

  • Use BottomAppBar:

    bottomNavigationBar: BottomAppBar(
      child: ListView(
    

    OR

    another approach is to use Tabbar:

    import 'package:flutter/material.dart';
    
    void main() => runApp(const MyApp());
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: _title,
          home: MyStatelessWidget(),
        );
      }
    }
    
    class MyStatelessWidget extends StatelessWidget {
      const MyStatelessWidget({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
          initialIndex: 1,
          length: 9,
          child: Scaffold(
            appBar: AppBar(
              title: const Text('TabBar Widget'),
            ),
            body: Column(
              children: [
                Expanded(
                  child: const TabBarView(
                    children: <Widget>[
                      Center(
                        child: Text("It's cloudy here"),
                      ),
                      Center(
                        child: Text("It's rainy here"),
                      ),
                      Center(
                        child: Text("It's sunny here"),
                      ),
                      Center(
                        child: Text("It's cloudy here"),
                      ),
                      Center(
                        child: Text("It's rainy here"),
                      ),
                      Center(
                        child: Text("It's sunny here"),
                      ),
                      Center(
                        child: Text("It's cloudy here"),
                      ),
                      Center(
                        child: Text("It's rainy here"),
                      ),
                      Center(
                        child: Text("It's sunny here"),
                      ),
                    ],
                  ),
                ),
                Container(
                  color: Colors.blue,
                  child: const TabBar(
                    isScrollable: true,
                    tabs: <Widget>[
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.cloud_outlined),
                      ),
                      Tab(
                        icon: Icon(Icons.beach_access_sharp),
                      ),
                      Tab(
                        icon: Icon(Icons.brightness_5_sharp),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      }
    }