Comment faire un dialogue en plein écran dans flutter ?

Question

Je veux créer une boîte de dialogue en plein écran. Le fond de la boîte de dialogue doit être opaque. Voici un exemple :

Comment faire comme ça dans Flutter ?

Answer 1

Vous pouvez utiliser showGeneralDialog avec tout widget issu de Material comme Scaffold , Card etc.

Par exemple, je vais le faire avec Scaffold comme ça :

showGeneralDialog(
    context: context,
    pageBuilder: (context, animation, secondaryAnimation) => Scaffold(
      backgroundColor: Colors.black87,
      body: //Put your screen design here!
    ),
  );

Et maintenant vous pouvez définir votre design comme un écran normal en utilisant Scaffold .

Note : si vous voulez revenir en arrière, vous pouvez Navigator comme ça :

Navigator.of(context).pop(null)

Answer 2

Alerte RFlutter est une boîte de dialogue d'alerte/de pop-up super personnalisable et facile à utiliser pour Flutter. Vous pouvez créer des styles d'alerte réutilisables ou ajouter des boutons autant que vous le souhaitez avec facilité.

Alert(context: context, title: "RFLUTTER", desc: "Flutter is awesome.").show();

RFlutter

C'est facile à utiliser ! :)

Answer 3

Enveloppez votre widget de premier niveau avec Navigator widget comme ça :

return Navigator(
        pages: [
          MaterialPage(
            child: MainScreen(
              child: widgets...

puis appeler showDialog et parce que useRootNavigator est réglé sur true par défaut, il utilisera le navigateur Root que nous avons ajouté au-dessus de l'élément MainScreen

Answer 4

Si vous utilisez GetX (que je recommande vivement), c'est très simple :

Premier écran :

Get.to(RedeemConfirmationScreen(), opaque: false)

Deuxième écran (copié de La réponse de Muhammad Adil ):

class RedeemConfirmationScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.white.withOpacity(0.85), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
.....
  );
 }
}