Search code examples
flutterflutter-layoutflutter-showmodalbottomsheet

Close Modal Bottom Sheet programmatically


In the below example, I have opened up a modal bottom sheet on pressed of a Raised button In the opened sheet, I have another icon that opens up another sheet but I want to close down the first sheet after the opening of the second-bottom sheet. How can I achieve this?

         import 'package:flutter/material.dart';

        class SecondScreen extends StatefulWidget {
         @override
        _SecondScreenState createState() => _SecondScreenState();
        }

        class _SecondScreenState extends State<SecondScreen> {
           @override
            Widget build(BuildContext context) {
              return Center(
                child: Container(
                 child:RaisedButton(child: Text('Click'), onPressed: () => _openSheet()),
                     ),
                  );
              }

           _openSheet() {
                        showModalBottomSheet(
                          context: context,
                          builder: (BuildContext context) 
                       {
                                return Column(
                                 children: <Widget>[
                                   Container(
                                     height: MediaQuery.of(context).size.height / 2,
                                     width: MediaQuery.of(context).size.width,
                                      child: IconButton(
                                       icon: Icon(Icons.info),
                                        iconSize: 50.0,
                                         onPressed: () => _openSecondSheet(),
                                          ),
                                         ),
                                        ],
                                       );
                                    });
                                  }

                             _openSecondSheet() {
                                showModalBottomSheet(
                               context: context,
                               builder: (BuildContext context) {
                               return Container(
                               height: MediaQuery.of(context).size.height / 3,
                               width: MediaQuery.of(context).size.width,
                               );
                             });
                           }
                        }

Solution

  • While opening second sheep pop first one.

    onPressed: () {
                 Navigator.pop(context);
                 _openSecondSheet()
                },