web-dev-qa-db-fra.com

Comment créer un AlertDialog dans Flutter?

J'apprends à créer des applications dans Flutter. Maintenant, je suis venu pour alerter les dialogues. Je les ai déjà faites dans Android et iOS , mais comment puis-je faire une alerte dans Flutter?

Voici quelques questions connexes SO:

Je voudrais faire un Q&A canonique plus général, donc ma réponse est ci-dessous.

dartflutterflutter-alertdialog
6
Suragch

Un bouton

showAlertDialog(BuildContext context) {

  // set up the button
  Widget okButton = FlatButton(
    child: Text("OK"),
    onPressed: () { },
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("My title"),
    content: Text("This is my message."),
    actions: [
      okButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Deux boutons

showAlertDialog(BuildContext context) {

  // set up the buttons
  Widget cancelButton = FlatButton(
    child: Text("Cancel"),
    onPressed:  () {},
  );
  Widget continueButton = FlatButton(
    child: Text("Continue"),
    onPressed:  () {},
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("AlertDialog"),
    content: Text("Would you like to continue learning how to use Flutter alerts?"),
    actions: [
      cancelButton,
      continueButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Trois boutons

showAlertDialog(BuildContext context) {

  // set up the buttons
  Widget remindButton = FlatButton(
    child: Text("Remind me later"),
    onPressed:  () {},
  );
  Widget cancelButton = FlatButton(
    child: Text("Cancel"),
    onPressed:  () {},
  );
  Widget launchButton = FlatButton(
    child: Text("Launch missile"),
    onPressed:  () {},
  );

  // set up the AlertDialog
  AlertDialog alert = AlertDialog(
    title: Text("Notice"),
    content: Text("Launching this missile will destroy the entire universe. Is this what you intended to do?"),
    actions: [
      remindButton,
      cancelButton,
      launchButton,
    ],
  );

  // show the dialog
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return alert;
    },
  );
}

Manipulation des pressions sur les boutons

Le rappel onPressed pour les boutons dans les exemples ci-dessus était vide, mais vous pouvez ajouter quelque chose comme ceci:

Widget launchButton = FlatButton(
  child: Text("Launch missile"),
  onPressed:  () {
    Navigator.of(context).pop(); // dismiss dialog
    launchMissile();
  },
);

Si vous effectuez le rappel null, le bouton sera désactivé.

onPressed: null,

enter image description here

Code supplémentaire

Voici le code pour main.Dart au cas où vous n'obtiendrez pas les fonctions ci-dessus pour qu'elles s'exécutent.

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: MyLayout()),
    );
  }
}

class MyLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: RaisedButton(
        child: Text('Show alert'),
        onPressed: () {
          showAlertDialog(context);
        },
      ),
    );
  }
}

// replace this function with the examples above
showAlertDialog(BuildContext context) { ... }
18
Suragch

Ou vous pouvez utiliser la bibliothèque RFlutter Alert pour cela. Il est facilement personnalisable et facile à utiliser. Son style par défaut comprend des coins arrondis et vous pouvez ajouter autant de boutons que vous le souhaitez.

Alerte de base:

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

Alerte avec bouton:

Alert(
    context: context,
    type: AlertType.error,
    title: "RFLUTTER ALERT",
    desc: "Flutter is more awesome with RFlutter Alert.",
    buttons: [
    DialogButton(
        child: Text(
        "COOL",
        style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        onPressed: () => Navigator.pop(context),
        width: 120,
    )
    ],
).show();

Vous pouvez également définir styles d'alerte génériques .

* Je suis l'un des développeurs de RFlutter Alert.

3
ibrahimdevs

Vous pouvez utiliser cet extrait de code pour créer une boîte d'alerte à deux boutons,

import 'package:flutter/material.Dart';

class BaseAlertDialog extends StatelessWidget {

  //When creating please recheck 'context' if there is an error!

  Color _color = Color.fromARGB(220, 117, 218 ,255);

  String _title;
  String _content;
  String _yes;
  String _no;
  Function _yesOnPressed;
  Function _noOnPressed;

  BaseAlertDialog({String title, String content, Function yesOnPressed, Function noOnPressed, String yes = "Yes", String no = "No"}){
    this._title = title;
    this._content = content;
    this._yesOnPressed = yesOnPressed;
    this._noOnPressed = noOnPressed;
    this._yes = yes;
    this._no = no;
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: new Text(this._title),
      content: new Text(this._content),
      backgroundColor: this._color,
      shape:
          RoundedRectangleBorder(borderRadius: new BorderRadius.circular(15)),
      actions: <Widget>[
        new FlatButton(
          child: new Text(this._yes),
          textColor: Colors.greenAccent,
          onPressed: () {
            this._yesOnPressed();
          },
        ),
        new FlatButton(
          child: Text(this._no),
          textColor: Colors.redAccent,
          onPressed: () {
            this._noOnPressed();
          },
        ),
      ],
    );
  }
}

LA SORTIE SERA COMME CELA

enter image description here

2
Achintha Isuru

Si vous voulez une boîte de dialogue d'alerte belle et réactive, vous pouvez utiliser des packages de flottement comme

alerte rflutter, dialogue fantaisie, alerte riche, dialogues d'alerte douce, dialogue facile et alerte facile

Ces alertes sont attrayantes et réactives. Parmi eux, l'alerte rflutter est la meilleure. actuellement j'utilise l'alerte rflutter pour mes applications.

1
raman raman