🔵
【Flutter】Awesome Dialog で綺麗なダイアログを爆速で作る
この記事では、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 を利用することも可能です。
詳しくは、パッケージのドキュメンテーションを確認してみてください。
宣伝
ダイエット中の人を応援するために、ファミリーレストランのメニューをガチャガチャ形式で選べるネタ(?)サイトを作成しました。
カロリーを指定してメニューを選べるので、ネタで遊んでみてください!
普段は、誰でも使いやすい「筋トレ記録アプリ」を開発しておりますので、こちらも是非ご利用ください!
Discussion