1
votes

Comment changer la position d'une boîte de dialogue Flutter

J'ai créé une boîte de dialogue qui s'affiche lorsqu'un numéro existe dans Firestore lors de l'enregistrement d'un nouvel utilisateur. Cependant, par défaut, Android semble positionner la boîte de dialogue au centre de l'écran. Existe-t-il un moyen de positionner la boîte de dialogue, disons à la position du widget dans lequel elle est appelée, pour mon cas, le bouton Raised rappelle. J'aimerais également savoir comment je peux afficher le message de validation dans un pop juste au-dessus d'un bouton,

Voici un exemple de mon code.

  numberExistsDialog(BuildContext context) {
var numberDialog = AlertDialog(
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
  title: Text(
    'Number Already Exists',
    style: TextStyle(color: Colors.red),
    textAlign: TextAlign.center,
  ),
  content: Text(
    'Use another number',
    textAlign: TextAlign.center,
  ),
);
showDialog(
    context: context,
    builder: (BuildContext context) {
      return numberDialog;
    });

}


0 commentaires

3 Réponses :


3
votes

Je ne sais pas si cela peut être fait avec le AlertDialog existant, mais j'ai une fois changé l'alignement de Dialog en créant une boîte de dialogue personnalisée.

Vous pouvez utiliser le widget Align et aligner votre widget de dialogue selon vos besoins. Ici, dans l'exemple, je le bottomCenter au bottomCenter qui est Alignment(0, 1) .

Exemple de code:

numberExistsDialog(BuildContext context) {
    var numberDialog = Align(
      alignment: Alignment(0, 1),
      child: Material(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                'Number Already Exists',
                style: TextStyle(color: Colors.red),
                textAlign: TextAlign.center,
              ),
              Text(
                'Use another number',
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return numberDialog;
      },
    );
  }

PS: Vous pouvez régler la TextStyle selon vos besoins en tant AlertDialog de title et le content TextStyle est défini par défaut du Flutter lui - même.

ÉDITER:

Vous pouvez l'utiliser comme ci-dessous:

Align(
      alignment: Alignment(0, 1),
      child: Material(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text(
                'Number Already Exists',
                style: TextStyle(color: Colors.red),
                textAlign: TextAlign.center,
              ),
              Text(
                'Use another number',
                textAlign: TextAlign.center,
              ),
            ],
          ),
        ),
      ),
    );


0 commentaires

1
votes

Vous devez le personnaliser par vous-même, voici un exemple de code. Ou utilisez simplement les packages. En voici un cool:

flutter_custom_dialog

entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici entrez la description de l'image ici


0 commentaires

0
votes

Capture d'écran:

entrez la description de l'image ici


Utilisez showGeneralDialog qui sort de la boîte avec Flutter.

Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {
      showGeneralDialog(
        context: context,
        barrierColor: Colors.black54,
        barrierDismissible: true,
        barrierLabel: 'Label',
        pageBuilder: (_, __, ___) {
          return Align(
            alignment: Alignment.bottomLeft,
            child: Container(
              color: Colors.blue,
              child: FlutterLogo(size: 150),
            ),
          );
        },
      );
    },
  ),
)


0 commentaires