Flutter : Comment modifier la largeur d'un AlertDialog ?

Question

Je me demande comment changer la largeur par défaut d'un AlertDialog, je n'ai réussi qu'à changer le rayon de la bordure :

Voici mon code :

showDialog(
       context: context,
       builder: (_) =>
            new AlertDialog(
               shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.all(Radius.circular(10.0))
               ),
               content: ProductPreviewScreen(),
            )
    );

Résultat attendu :

Any idea?

Answer 1

À partir de mai 2020, si vous souhaitez modifier le remplissage d'une boîte de dialogue, il vous suffit d'utiliser la classe Dialog et de remplacer la propriété "insetPadding". Vous pouvez faire en sorte qu'une boîte de dialogue s'étende jusqu'aux bords de l'écran si vous le souhaitez.

Vous pouvez également créer des boîtes de dialogue personnalisées en rendant la surface de la boîte de dialogue transparente, puis en ajoutant les widgets de votre choix. Par exemple :

showDialog(Dialog(
  backgroundColor: Colors.transparent,
  insetPadding: EdgeInsets.all(10),
  child: Stack(
    overflow: Overflow.visible,
    alignment: Alignment.center,
    children: <Widget>[
      Container(
        width: double.infinity,
        height: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
          color: Colors.lightBlue
        ),
        padding: EdgeInsets.fromLTRB(20, 50, 20, 20),
        child: Text("You can make cool stuff!",
          style: TextStyle(fontSize: 24),
          textAlign: TextAlign.center
        ),
      ),
      Positioned(
        top: -100,
        child: Image.network("https://i.imgur.com/2yaf2wb.png", width: 150, height: 150)
      )
    ],
  )
));

Résultats dans :

Answer 2

C'est beaucoup plus simple que ce que les autres réponses laissent croire. Il suffit d'utiliser un constructeur pour modifier la taille de la boîte de dialogue au fur et à mesure qu'elle est construite (construite, instanciée dans d'autres langues). Cela signifie que vous pouvez également demander la taille de l'écran et décider de l'espace que vous voulez en fonction de cette taille. Par exemple, plus d'espace sur une tablette que sur un téléphone. Vous pouvez faire de Scaffold un enfant du Container si vous avez besoin de la barre d'applications et d'autres fonctions.

showDialog(
  context: context,
  builder: (_) => new AlertDialog(
  shape: RoundedRectangleBorder(
    borderRadius:
      BorderRadius.all(
        Radius.circular(10.0))),
    content: Builder(
      builder: (context) {
        // Get available height and width of the build area of this widget. Make a choice depending on the size.                              
        var height = MediaQuery.of(context).size.height;
        var width = MediaQuery.of(context).size.width;

        return Container(
          height: height - 400,
          width: width - 400,
        );
      },
    ),
  )
);

Exemples de différentes tailles :

Vous pouvez les ajouter pour supprimer les espaces inutiles des bordures intérieures et extérieures.

          insetPadding: EdgeInsets.zero,
          contentPadding: EdgeInsets.zero,
          clipBehavior: Clip.antiAliasWithSaveLayer,

Answer 3

Utilisation du dialogue intégré :

• Pour augmenter la largeur :

  AlertDialog(
    title: Text("AlertDialog"),
    insetPadding: EdgeInsets.zero,
  )

• Pour diminuer la largeur :

  AlertDialog(
    title: Text("AlertDialog"),
    insetPadding: EdgeInsets.symmetric(horizontal: 100),
  )

---

Utilisation d'un dialogue personnalisé :

Appelez cette méthode :

showGeneralDialog(
  context: context,
  barrierColor: Colors.black.withOpacity(0.5),
  pageBuilder: (_, __, ___) {
    return Material(
      color: Colors.transparent,
      child: Center(
        child: Container(
          color: Colors.white, // Dialog background
          width: 120, // Dialog width
          height: 50, // Dialog height
          child: SingleChildScrollView(
            child: Column(
              children: [
                Text('I am a small Dialog'),
              ],
            ),
          ),
        ),
      ),
    );
  },
);

Answer 4

Vous pourriez essayer d'envelopper votre widget AlertDialog avec le widget ConstrainedBox comme suggéré dans aquí et définissez la valeur que vous souhaitez pour le paramètre maxWidth.

MISE À JOUR

Je viens de regarder le code du parent du widget AlertDialog qui est le widget Dialog et j'ai découvert qu'il a enveloppé son enfant avec un widget ConstrainedBox avec une largeur minimale de 280 pixels. C'est la raison pour laquelle nous ne pouvons pas modifier la largeur du widget AlertDialog.

Heureusement, il y a deux choses que nous pouvons faire. La première option consiste à modifier la largeur minimale par défaut du widget Dialog dans le fichier dialog.dart. Notez que ce changement affectera tous vos projets Flutter qui utilisent le widget Dialog.

//inside dialog.dart

class Dialog extends StatelessWidget {

...

@override
Widget build(BuildContext context) {
  final DialogTheme dialogTheme = DialogTheme.of(context);
  return AnimatedPadding(
    padding: MediaQuery.of(context).viewInsets + const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
    duration: insetAnimationDuration,
    curve: insetAnimationCurve,
    child: MediaQuery.removeViewInsets(
      removeLeft: true,
      removeTop: true,
      removeRight: true,
      removeBottom: true,
      context: context,
      child: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints(minWidth: 280.0), // You can set your desired value for minWidth here
          child: Material(
            elevation: 24.0,

            ...

Vous pouvez alors utiliser l'AlertDialog comme suit :

showDialog(
  context: context,
  builder: (_) => AlertDialog(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(10.0))
      ),
    contentPadding: EdgeInsets.all(0.0),
    content: ProductPreviewScreen(),
    )
  )
);

L'autre moyen serait de créer notre propre dialogue de personnalisation.

showDialog(
  context: context,
  builder: (_) => Center( // Aligns the container to center
    child: Container( // A simplified version of dialog. 
      width: 100.0,
      height: 56.0,
      color: Colors.pink,
      )
    )
 );

Answer 5

Utiliser le widget Padding

 Padding(
   padding: EdgeInsets.only(left: 50.0, right: 50.0),
   child://AlertDialog or any other Dialog you can use
         Dialog(
                elevation: 0.0,
                backgroundColor: Colors.transparent,
                child: Container(
                  width: 10.0,
                  height: 50.0,
                  color: Colors.red,
                )
            ))