flutter showModalBottomSheet 在单击后退按钮时不弹出

Question

i want to pop showModalBottomSheet when i clicked the button of back in android mobile. this is my showModalBottomSheet example:

    showModalBottomSheet(
   context: contextt,
   useRootNavigator: true,
   isScrollControlled: true,
   isDismissible: true,
   enableDrag: true,
   shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.vertical(top: Radius.circular(mySize.curve_large),
     ),),
   clipBehavior: Clip.antiAliasWithSaveLayer,
   builder: (contextt) {
      FocusScope.of(contextt).requestFocus(focusNode);
      return SizedBox(); });},

I use WillPopScope before my example widget "SizedBox", but its not work:

WillPopScope(
 onWillPop: () async {
 FocusScope.of(contextt).requestFocus(FocusNode());
 Navigator.of(contextt).pop();
 return false;
 }, 

can anyone help me how can I do that?

and by the way, when I clicked the back button twice in a row, showModalBottomSheet popped. I want to do that with one click..

Answer 1

I have implemented the same modal as you, but when I click android system back button the modal is closing as it's supposed to. Check the following code for builder implementation:

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: MyStatelessWidget()
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        FocusScope.of(context).requestFocus(FocusNode());
        Navigator.of(context).pop();
        return false;
      },
      child: Center(
        child: ElevatedButton(
          child: const Text('showModalBottomSheet'),
          onPressed: () {
            showModalBottomSheet<void>(
              useRootNavigator: true,
              isScrollControlled: true,
              isDismissible: true,
              enableDrag: true,
              context: context,
              clipBehavior: Clip.antiAliasWithSaveLayer,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(top: Radius.circular(80),
                ),),
              builder: (BuildContext context) {
                return Container(
                  height: 200,
                  color: Colors.amber,
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        const Text('Modal BottomSheet'),
                        ElevatedButton(
                          child: const Text('Close BottomSheet'),
                          onPressed: () => Navigator.pop(context),
                        )
                      ],
                    ),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Answer 2

try this

WillPopScope(
    onWillPop: () async {
        return (
            await showModalBottomSheet(
                //your code
            )
        )
    }
)

Answer 3

Not the exact solution Another workaround can be

  showModalBottomSheet().then((value)=>showModalBottomSheet());

The whole idea is calling again the bottom sheet when it is getting closed

OR For the exact solution try this

You can also use willpopscope to the builder/ bottomsheet which you are displaying

WillPopScope(
 onWillPop:() async{
   return false;
    },
    child:YourBottomSheet());