Open a page on top of another page without hiding Drawer

This Article is posted by seven.srikanth at 7/1/2023 3:49:48 PM



Here is an example of how to open a page on top of another page without hiding the Drawer.

Flutter Overlay Example

Here is the complete code for the above example:

    
import 'package:flutter/material.dart';

void main() {
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'My App',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: const HomePage(),
        );
    }
}

class HomePage extends StatefulWidget {
    const HomePage({Key? key}) : super(key: key);

    @override
    _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
    int _currentIndex = 0;
    OverlayEntry? _overlayEntry;
    final List _pages = const [HomePageContent(), SecondPageContent()];

    @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(() {
                                        _currentIndex = index;
                                    });
                                },
                            ),
                        ),
                    ),
                    Expanded(
                        child: Stack(
                            children: [
                                Positioned.fill(child: _pages[_currentIndex]),
                            ],
                        ),
                    ),
                ],
            ),
        );
    }
}

class NavigationDrawer extends StatelessWidget {
    final int currentIndex;
    final Function(int) onItemSelected;

    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,
                ),
            ],
        );
    }
}

class HomePageContent extends StatelessWidget {
    const HomePageContent({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return const Center(child: Text('Home Page'));
    }
}

class SecondPageContent extends StatelessWidget {
    const SecondPageContent({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return Center(
            child: ElevatedButton(
                child: const Text('Show Third Page'),
                onPressed: () {
                    final homePageState = context.findAncestorStateOfType<_HomePageState>();
                    homePageState?._showThirdPageOverlay(context);
                },
            ),
        );
    }
}
    

Thanks,

Srikanth


Tags: How to create popup in flutter; How to open a page without closing the previous pages;








0 Comments
Login to comment.
Recent Comments













© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com