[Flutter]AlertDialogを横幅いっぱいに広げる方法

Flutter

どうも、ちょげ(@chogetarou)です。

AlertDialogを横幅いっぱいに広げる方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

まず、「AlertDialog」の引数「insetPadding」に、「EgedInsets.zero」を指定します。

AlertDialog(
  insetPadding: EdgeInsets.zero,
  title: Text('Alert'),
),

次に、引数「content」に「Containerウェジェット」を指定します。

そして、「Containerウェジェット」の引数「width」に、「MediaQuery.of(context).size.width」を指定します。

builder: (BuildContext context) => AlertDialog(
  insetPadding: EdgeInsets.zero,
  title: Text('Alert'),
  content: Container(
    width: MediaQuery.of(context).size.width,
    height: 100,
  ),
),

これで横幅いっぱいのAlertDialogを表示することが出来ます。

AlertDialogの横に余白を作りたい場合は、「insetPadding」に指定する値を変えます。

具体的には、「EdgeInsets.all(value)」のように指定します。

insetPadding: EdgeInsets.all(8),

コメント

タイトルとURLをコピーしました