<h2 id="here-is-an-example-of-how-to-open-a-page-on-top-of-another-page-without-hiding-the-drawer">Here is an example of how to open a page on top of another page without hiding the Drawer.</h2> <pre>![](https://fluttercentral.com/Uploads/0bb38e42-15ce-472b-a574-e238e3059825.gifwidth="50%height="auto Flutter Overlay Example]( </pre> <h3 id="here-is-the-complete-code-for-the-above-example">Here is the complete code for the above example:</h3> <pre>` </pre> <p>import 'package:flutter/material.dart';</p> <p>void main() { runApp(const MyApp()); }</p> <p>class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);</p> <pre>@override Widget build(BuildContext context) { return MaterialApp( title: 'My App', theme: ThemeData( primarySwatch: Colors.blue, ), home: const HomePage(), ); } </pre> <p>}</p> <p>class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key);</p> <pre>@override _HomePageState createState() => _HomePageState(); </pre> <p>}</p> <p>class _HomePageState extends State { int _currentIndex = 0; OverlayEntry? _overlayEntry; final List _pages = const [HomePageContent(), SecondPageContent()];</p> <pre>@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('My App')), body: Row( children: [ SizedBox( width: 200, child: Drawer( child: NavigationDrawer( currentIndex: _currentIndex, onItemSelected: (index) { setState(() ); }, ), ), ), Expanded( child: Stack( children: [ Positioned.fill(child: _pages[_currentIndex]), ], ), ), ], ), ); } </pre> <p>}</p> <p>class NavigationDrawer extends StatelessWidget { final int currentIndex; final Function(int) onItemSelected;</p> <pre>const NavigationDrawer({required this.currentIndex, required this.onItemSelected, Key? key}) : super(key: key);
@override Widget build(BuildContext context) { return ListView( children: [ ListTile( leading: const Icon(Icons.home), title: const Text('Home'), onTap: () => onItemSelected(0), selected: currentIndex == 0, ), ListTile( leading: const Icon(Icons.pageview), title: const Text('Second Page'), onTap: () => onItemSelected(1), selected: currentIndex == 1, ), ], ); } </pre> <p>}</p> <p>class HomePageContent extends StatelessWidget { const HomePageContent({Key? key}) : super(key: key);</p> <pre>@override Widget build(BuildContext context) { return const Center(child: Text('Home Page')); } </pre> <p>}</p> <p>class SecondPageContent extends StatelessWidget { const SecondPageContent({Key? key}) : super(key: key);</p> <pre>@override Widget build(BuildContext context) { return Center( child: ElevatedButton( child: const Text('Show Third Page'), onPressed: () { final homePageState = context.findAncestorStateOfType(); homePageState?._showThirdPageOverlay(context); }, ), ); } </pre> <p>} `</p> <p>Thanks,</p> <p>Srikanth</p>