Fermer la feuille inférieure modale par programme en flottement

Question

J'affiche un BottomSheet via showModalBottomSheet<Null>() et à l'intérieur de plusieurs widgets avec un GestureDetector. Je voudrais voir la feuille de fond fermée non seulement en touchant à l'extérieur, mais aussi après un événement onTap d'un GestureDetector à l'intérieur. Cependant, il semble que GestureDetector ne transfère pas l'événement tactile.

Je me demande donc, existe-t-il un moyen de déclencher la fermeture de ModalBottomSheet par programme ou un moyen de dire à GestureDetector de transmettre l'événement tactile?

Mise à jour (2018-04-12):

Suivre un extrait de code pour une meilleure compréhension. Le problème est que ModalBottomSheet ne se ferme pas lorsque vous appuyez sur "Item 1" ou "Item 2".

showModalBottomSheet<Null>(context: context, builder: (BuildContext context)
{
  return new SingleChildScrollView(child:
    new Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      new GestureDetector(onTap: () { doSomething(); }, child:
        new Text("Item 1")
      ),
      new GestureDetector(onTap: () { doSomething(); }, child:
        new Text("Item 2")
      ),
    ]),
  );
});

Answer 1

Je n'ai pas pu découvrir comment transmettre un événement capturé par un GestureDetector. Cependant, la fermeture d'un ModalBottomSheet par programmation se fait via

Navigator.pop(context);

Je viens donc d'appeler cette fonction pop à l'intérieur de la fonction de rappel onTap du GestureDetector.

showModalBottomSheet<Null>(context: context, builder: (BuildContext context)
{
  return new SingleChildScrollView(child:
    new Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
      new GestureDetector(onTap: () {
          Navigator.pop(context);
          doSomething();
        }, child:
        new Text("Item 1")
      ),
      new GestureDetector(onTap: () {
          Navigator.pop(context);
          doSomething();
        }, child:
        new Text("Item 2")
      ),
    ]),
  );
});

Answer 2

Il existe généralement 2 types de feuilles inférieures.

(I) showModalBottomSheet // fonctionne comme Dialog, ne fait pas partie de Scaffold

(II) showBottomSheet // ceci fait partie de Scaffold

---

Affichage et masquage showModalBottomSheet

Ce code affiche la feuille inférieure et la masque lorsque vous appuyez sur FlutterLogo

@override
void initState() {
  super.initState();
  Timer.run(() {
    showModalBottomSheet(
      context: context,
      builder: (_) {
        return GestureDetector(
          onTap: () => Navigator.of(context).pop(), // closing showModalBottomSheet
          child: FlutterLogo(size: 200),
        );
      },
    );
  });
}

Sortie:

---

Affichage et masquage showBottomSheet

Ce code affiche un bouton, qui ouvrira et fermera la feuille inférieure.

PersistentBottomSheetController _controller;
GlobalKey<ScaffoldState> _key = GlobalKey();
bool _open = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _key,
    body: Center(
      child: RaisedButton(
        onPressed: () {
          if (!_open) {
            _controller = _key.currentState.showBottomSheet(
              (_) => SizedBox(
                child: FlutterLogo(size: 200),
                width: double.maxFinite,
              ),
            );
          } else {
            _controller.close();
          }
          setState(() => _open = !_open);
        },
        child: Text(_open ? "Close" : "Open"),
      ),
    ),
  );
}

Sortie: