パッケージ、リポジトリ、アプリカテゴリを検索

awesome_dialog のカバー
パッケージ詳細v3.3.0

awesome_dialog

アニメーション付きで、最も簡単な方法で美しいダイアログ(INFO、QUESTION、WARNING、SUCCESS、ERROR)を表示するFlutterパッケージ。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
1.7万
いいね数
1480
Pub ポイント
150

パッケージをインストール

flutter pub add awesome_dialog

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Awesome Dialog は、INFO、QUESTION、WARNING、SUCCESS、ERROR のようなさまざまなアラートタイプに対して、視覚的に魅力的なダイアログとスムーズなアニメーションを表示できる Flutter パッケージです。シンプルさを重視しており、最小限のコードで迅速に統合できます。Android、iOS、Web、macOS、Windows、Linux を含む複数のプラットフォームをサポートしており、クロスプラットフォームアプリケーションに最適です。カスタマイズ可能なテーマと組み込みのアニメーション効果により、複雑な設定なしにユーザー体験を向上させます。

用途

  • アプリアラートの表示
  • 確認ダイアログの表示
  • ユーザーのフィードバックの向上
  • 成功またはエラーメッセージを作成する
  • アニメーション付きの通知を追加する

主な機能

  • 事前定義されたダイアログタイプ
  • スムーズなアニメーション
  • クロスプラットフォーム対応
  • 最小限の設定
  • カスタマイズ可能な外観
  • 組み込みテーマ

適している対象

  • 初心者のFlutter開発者
  • 視覚的なフィードバックが必要なアプリ
  • クロスプラットフォームプロジェクト
  • シンプルな UI の向上
  • 迅速なプロトタイピング

注意事項

  • 基本的なスタイリングを超えるカスタマイズは限定的
  • 高度なデザインには追加のスタイリングが必要になる場合があります
  • 外部アニメーションライブラリに依存しています
  • 複雑なモーダルインターフェースには適していません
  • 低価格デバイス上のアニメーションパフォーマンス

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

awesome_dialog

A new Flutter package project for simple and awesome dialogs

Usage

To use this package, add awesome_dialog as a dependency in your pubspec.yaml file. And add this import to your file.

import 'package:awesome_dialog/awesome_dialog.dart';

Demo

Check out https://cv.toranzo.dev/awesome-dialog for more fun.

Image

alt text

Example
AwesomeDialog(
            context: context,
            dialogType: DialogType.info,
            animType: AnimType.rightSlide,,
            title: 'Dialog Title',
            desc: 'Dialog description here.............',
            btnCancelOnPress: () {},
            btnOkOnPress: () {},
            )..show();

Custom Body

If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.

AwesomeDialog(
            context: context,
            animType: AnimType.scale,
            dialogType: DialogType.info,
            body: Center(child: Text(
                    'If the body is specified, then title and description will be ignored, this allows to 											further customize the dialogue.',
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),),
            title: 'This is Ignored',
            desc:   'This is also Ignored',
            btnOkOnPress: () {},
            )..show();

Custom Button

To use custom buttons, just specify the buttonOk or btnCancel widget, all text parameters icon etc will be ignored.

Dissmiss and Callback

AwesomeDialog has onDismissCallback(type) and can be dismissed at any time using dismiss() public method.

AwesomeDialog Class
Dart attribute Datatype Description Default Value
dialogType DialogType Set DialogType example: DialogType.info, this create an animated Header. Null
customHeader Widget Create your own header(if this is set DiaologType is ignored.) Null
width double The maximum width of the dialog, especially useful in web flutter, or landscape mode MediaQuery.of(context).size.width.
title String Set the title of dialog. Null
desc String Set the description text of the dialog. Null
body Widget Create your own Widget for body, if this property is set title and description will be ignored. Null
context BuildContext @required Null
btnOkText String Text of positive button 'Ok'
btnOkIcon IconData Icon of positive button Null
btnOkOnPress Function Function that handle click of positive Button, closing the dialog is handled internally. Null
btnOkColor Color Color of positive Button Color(0xFF00CA71)
btnOk Widget Allows to create a custom button, if this property is different from null then btnOkText, btnOkIcon, btnOkOnPress, btnOkColor will be ignored null
btnCancelText String Text of negative button 'Cancel'
btnCancelIcon IconData Icon of negative button Null
btnCancelOnPress Function Function that handle click of negative Button, closing the dialog is handled internally. Null
btnCancelColor Color Color of negative Button Colors.red
btnCancel Widget Allows to create a custom button, if this property is different from null then btnCancelText, btnCancelIcon, btnCancelOnPress, btnCancelColor will be ignored null
buttonsBorderRadius BorderRadiusGeometry Allows to customize buttons border radius BorderRadius.all(Radius.circular(100))
dismissOnTouchOutside bool Dismiss dialog on touch overlay true
onDismissCallback Function Dismiss callback function Null
animType AnimType Type of dialogue enter animation AnimType.SCALE
alignment AlignmentGeometry dialogue alignment gravity Alignment.center
useRootNavigator bool Use the root navigator instead than the local. This is useful when the default cancel go to the previous screen instead to just close the dialog false
headerAnimationLoop bool headerAnimationLoop control the loop for animation header true
padding EdgeInsetsGeometry The padding of dialog elements EdgeInsets.only(left: 5, right: 5),
autoHide Duration Hide the Dialog after this Duration null
keyboardAware bool Control if add or not the Padding EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom). true
dismissOnBackKeyPress bool control if AwesomeDialog is dismissible by back button. true
buttonsBorderRadius BorderRadiusGeometry Border Radius for built in buttons. BorderRadius.all(Radius.circular(100)
buttonsTextStyle TextStyle TextStyle for built in buttons. TextStyle(color: Colors.white, fontWeight:FontWeight.w700, fontSize: 14)
showCloseIcon bool Control if close icon is appear. false
closeIcon Widget Custom closeIcon. null
dialogBackgroundColor Color custom background color for entire dialog. Theme.of(context).cardColor
borderSide BorderSide enable border en entire dialog shape null
autoDismiss bool When stetted to false clicking Ok or Cancel button won't dismiss the dialog. You can pass custom Navigator.pop function in the onDissmissCallback. true
barrierColor Color Color for the barrier around the dialog Colors.black54
enableEnterKey bool If true, hitting Enter key will act like pressing the Ok button. false

カテゴリー

依存関係

依存関係一覧 1 件

ソースリポジトリ

このパッケージを使用しているプロジェクト