Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Navigation inside modal using go_router

In general, go_router is used to navigate from one page to another page. The page that we navigated will show in front of the previous page. But how to implement this inside of showModalBottomSheet?

I have a modal that show only half screen. Then, when i click button where navigate to the new page, the page is show in front of the modal. But what i want is the new page still showing inside half modal.

Tags:

2

Answers


  1. 0

    The go_router package is a package used to facilitate page management in Flutter applications. The showModalBottomSheet function is used to open subpages. You can follow these steps to open two showModalBottomSheets, nested one after another.

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

 class MyApp extends StatelessWidget {
 @override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('Nested Bottom Sheets'),
    ),
    body: Center(
      child: ElevatedButton(
        onPressed: () {
          // İlk bottom sheet'i aç
          showModalBottomSheet(
            context: context,
            builder: (BuildContext context) {
              return Container(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    ListTile(
                      leading: Icon(Icons.music_note),
                      title: Text('Music'),
                      onTap: () {
                        // İkinci bottom sheet'i aç
                        showModalBottomSheet(
                          context: context,
                          builder: (BuildContext context) {
                            return Container(
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  ListTile(
                                    leading: Icon(Icons.radio),
                                    title: Text('Radio'),
                                    onTap: () {
                                      // İkinci bottom sheet kapat
                                      Navigator.pop(context);
                                    },
                                  ),
                                  ListTile(
                                    leading: Icon(Icons.album),
                                    title: Text('Album'),
                                    onTap: () {
                                      // İkinci bottom sheet kapat
                                      Navigator.pop(context);
                                    },
                                  ),
                                ],
                              ),
                            );
                          },
                        );
                      },
                    ),
                    ListTile(
                      leading: Icon(Icons.photo),
                      title: Text('Photos'),
                      onTap: () {
                        // İlk bottom sheet'i kapat
                        Navigator.pop(context);
                      },
                    ),
                  ],
                ),
              );
            },
          );
        },
        child: Text('Open Bottom Sheet'),
      ),
    ),
  ),
  );
 }
}
    Login or Signup to reply.
  2. 0

    If you are delivering simple enough pages within the ModalBottomSheet then consider using a boolean value to control which page gets rendered. There is no need to spice things up.

    Otherwise, if you have a sub-complex tree under your ModalBottomSheet, e.g >3 screens with layers of page. Try to define it explicitly as a new tree and assign it to showModalBottomSheet's builder, then it will be built using the modal’s context, hence not trying to extend the whole screen size.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search