title: Dropdown list in bottom navigation using flutter
body: <p>Is it possible to display a horizontal list by clicking on one of the <code>BottomNavigationBarItem</code> buttons? What I want is that if the <code>Clothes</code> tab is clicked by the user, the list of clothes will appeared as demonstrated in the picture below.</p>
  <p><a href="https://i.stack.imgur.com/ly8Zg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ly8Zg.png" alt="enter image description here" /></a></p>
  <p>This is my existing code</p>
  <pre><code>final List&lt;Widget&gt; _widgets = &lt;Widget&gt;[
    ClothesPage(),
    ColorsPage(),
    IdeasPage(),
    ProfilePage(),
  ];
  
  class _MyHomePageState extends State&lt;MyHomePage&gt; {
    int _currentIndex = 0;
  
    Widget build(BuildContext context) {
      final colorScheme = Theme.of(context).colorScheme;
      final textTheme = Theme.of(context).textTheme;
  
      return Scaffold(
        // This body is new.
        body: _widgets[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: _currentIndex,
          backgroundColor: Colors.orangeAccent,
          selectedItemColor: Colors.white,
          unselectedItemColor: colorScheme.onSurface.withOpacity(.40),
          selectedLabelStyle: textTheme.caption,
          unselectedLabelStyle: textTheme.caption,
          onTap: (value) {
            _currentIndex = value;
            showDialog(
              context: context,
              barrierDismissible: true,
              builder: (BuildContext context) {
                return Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    _widgets[_currentIndex],
                    SizedBox(
                      // Use whatever height you desire.
                      height: 90,
                    ),
                  ],
                );
              },
            );
          },
          items: [
            BottomNavigationBarItem(
              title: Text('Clothes'),
              icon: Icon(Icons.design_services_rounded),
            ),
            BottomNavigationBarItem(
              title: Text('Colors'),
              icon: Icon(Icons.colorize_rounded),
            ),
            BottomNavigationBarItem(
              title: Text('Ideas'),
              icon: Icon(Icons.lightbulb_outline_rounded),
            ),
            BottomNavigationBarItem(
              title: Text('Profile'),
              icon: Icon(Icons.face_rounded),
            ),
          ],
        ),
      );
    }
  }
  
  class ClothesPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return new Card(
        elevation: 9.0,
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(20.0)),
        child: new Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage(
                  'assets/shirt/white-shirt1.jpg'), // Use the path here.
              fit: BoxFit.cover,
            ),
          ),
        ),
      );
    }
  }
  
  class ColorsPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Card(
        color: Colors.white,
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Text(
            &quot;Color&quot;,
          ),
        ),
      );
    }
  }
  
  class IdeasPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Card(
        color: Colors.white,
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Text(
            &quot;Idea&quot;,
          ),
        ),
      );
    }
  }
  
  class ProfilePage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Card(
        color: Colors.white,
        child: Padding(
          padding: EdgeInsets.all(10),
          child: Text(
            &quot;Profile&quot;,
          ),
        ),
      );
    }
  }
  </code></pre>