Zenn
🔵

【Flutter】Awesome Dialog で綺麗なダイアログを爆速で作る

2023/07/01に公開
Flutter
tech
Dart
tech

この記事では、awesome_dialog パッケージで綺麗なダイアログを作成します。簡単に爆速でダイアログを実装できることが、このパッケージの強みです。

はじめに

パッケージの追加

Dart 3.0 に対応しています。

flutter pub add awesome_dialog

実装例

INFO ダイアログ (ボタン付き)

btnCancelOnPressとbtnOkOnPressを指定することで、キャンセルと進むボタンが表示されます。いずれかを削除することで、ボタンを 1 つのみ表示することも可能です。

INFO ダイアログ (ボタン付き)
AwesomeDialog(
  context: context,
  dialogType: DialogType.infoReverse,
  animType: AnimType.rightSlide,
  title: 'お知らせ',
  desc: 'データ更新の準備ができました。',
  btnCancelText: 'キャンセル',
  btnOkText: '進む',
  btnCancelOnPress: () {
    // キャンセルで実行
  },
  btnOkOnPress: () {
    // 進むで実行
  },
)..show(),

スクリーンショット:

btnCancelColorやbtnOkColorでボタンの色を変更したり、btnCancelIconや　btnOkIconでボタンにアイコンを表示することが可能です。

ERROR ダイアログ

こちらは一般的なエラーダイアログです。

ERROR ダイアログ
AwesomeDialog(
  context: context,
  dialogType: DialogType.error,
  animType: AnimType.rightSlide,
  title: 'エラー',
  desc: 'データ更新でエラーが発生しました。',
)..show(),

スクリーンショット:

SUCCESS ダイアログ

こちらは一般的な成功ダイアログです。

SUCCESS ダイアログ
AwesomeDialog(
  context: context,
  dialogType: DialogType.success,
  animType: AnimType.rightSlide,
  title: '成功',
  desc: 'データ更新が完了しました。'
)..show(),

スクリーンショット:

ほかのダイアログ

上記はあくまでも一例で、ほかにも様々なスタイルのアイコンがあります。dialogTypeを変更してみると、簡単にアイコンの種類を切り替えることができるので試してみてください。

また、bodyでカスタムのダイアログボディ Widget を指定したり、btnOkやbtnCancelでカスタムのボタン Widget を利用することも可能です。

詳しくは、パッケージのドキュメンテーションを確認してみてください。
https://pub.dev/packages/awesome_dialog

宣伝

ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。

カロリーを指定してメニューを選べるので、ネタで遊んでみてください！
https://dietgacha.net/

普段は、誰でも使いやすい「筋トレ記録アプリ」を開発しておりますので、こちらも是非ご利用ください！

https://komms.co.jp/brnt

Discussion