QuickAlert

https://pub.dev/packages/quickalert
Admin
With QuickAlert, instantly display animated alert dialogs such as success, error, warning, confirm,...
Tokens:4,012
Snippets:38
Trust Score:9.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Dependency

Source: https://pub.dev/packages/quickalert

Run this command in your terminal to fetch the package.

```bash
$ flutter pub get
```

--------------------------------

### QuickAlert.show()

Source: https://pub.dev/packages/quickalert

Displays an animated alert dialog with the specified configuration options.

```APIDOC
## QuickAlert.show()

### Description
Displays an animated alert dialog based on the provided configuration parameters.

### Parameters
- **context** (BuildContext) - Required - The BuildContext for the dialog.
- **type** (QuickAlertType) - Required - The type of alert dialog (e.g., success, error, warning).
- **title** (String) - Optional - Custom title for the dialog.
- **text** (String) - Optional - Description text for the dialog.
- **widget** (Widget) - Optional - Custom widget to display in the dialog.
- **confirmBtnText** (String) - Optional - Text for the confirm button.
- **onConfirmBtnTap** (Function) - Optional - Callback function for the confirm button.
- **confirmBtnColor** (Color) - Optional - Color for the confirm button.
- **showCancelBtn** (bool) - Optional - Whether to show the cancel button.
- **showConfirmBtn** (bool) - Optional - Whether to show the confirm button.
- **cancelBtnText** (String) - Optional - Text for the cancel button.
- **onCancelBtnTap** (Function) - Optional - Callback function for the cancel button.
- **barrierDismissible** (bool) - Optional - Whether the dialog can be dismissed by tapping the overlay.
- **animType** (QuickAlertAnimType) - Optional - The animation type for the dialog entry.
- **autoCloseDuration** (Duration) - Optional - Duration before the dialog automatically closes.
- **borderRadius** (double) - Optional - Border radius of the dialog.
```

--------------------------------

### Add QuickAlert Dependency

Source: https://pub.dev/packages/quickalert

Add the package to your pubspec.yaml file.

```yaml
dependencies:
  quickalert: <latest version>
```

--------------------------------

### Build Alert Demo Scaffold

Source: https://pub.dev/packages/quickalert/example

Constructs a Scaffold containing a list of buttons that trigger different QuickAlert types.

```dart
return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 1,
        centerTitle: true,
        backgroundColor: Colors.white,
        title: Text(
          "QuickAlert Demo",
          style: Theme.of(context).textTheme.titleMedium,
        ),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 20),
          successAlert,
          const SizedBox(height: 20),
          errorAlert,
          const SizedBox(height: 20),
          warningAlert,
          const SizedBox(height: 20),
          infoAlert,
          const SizedBox(height: 20),
          confirmAlert,
          const SizedBox(height: 20),
          loadingAlert,
          const SizedBox(height: 20),
          customAlert,
          const SizedBox(height: 20),
        ],
      ),
    );
  }
```

--------------------------------

### Implement QuickAlert Dialogs in Flutter

Source: https://pub.dev/packages/quickalert/example

Demonstrates how to trigger various QuickAlert dialog types within a Flutter application using the QuickAlert.show method.

```dart
import 'package:flutter/material.dart';
import 'package:quickalert/quickalert.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'QuickAlert Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final successAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.success,
          text: 'Transaction Completed Successfully!',
          autoCloseDuration: const Duration(seconds: 2),
          showConfirmBtn: false,
        );
      },
      title: 'Success',
      text: 'Transaction Completed Successfully!',
      leadingImage: 'assets/success.gif',
    );

    final errorAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.error,
          title: 'Oops...',
          text: 'Sorry, something went wrong',
          backgroundColor: Colors.black,
          titleColor: Colors.white,
          textColor: Colors.white,
        );
      },
      title: 'Error',
      text: 'Sorry, something went wrong',
      leadingImage: 'assets/error.gif',
    );

    final warningAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.warning,
          text: 'You just broke protocol',
        );
      },
      title: 'Warning',
      text: 'You just broke protocol',
      leadingImage: 'assets/warning.gif',
    );

    final infoAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.info,
          text: 'Buy two, get one free',
        );
      },
      title: 'Info',
      text: 'Buy two, get one free',
      leadingImage: 'assets/info.gif',
    );

    final confirmAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          onCancelBtnTap: () {
            Navigator.pop(context);
          },
          context: context,
          type: QuickAlertType.confirm,
          text: 'Do you want to logout',
          titleAlignment: TextAlign.right,
          textAlignment: TextAlign.right,
          confirmBtnText: 'Yes',
          cancelBtnText: 'No',
          confirmBtnColor: Colors.white,
          backgroundColor: Colors.black,
          headerBackgroundColor: Colors.grey,
          confirmBtnTextStyle: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
          barrierColor: Colors.white,
          titleColor: Colors.white,
          textColor: Colors.white,
        );
      },
      title: 'Confirm',
      text: 'Do you want to logout',
      leadingImage: 'assets/confirm.gif',
    );

    final loadingAlert = buildButton(
      onTap: () {
        QuickAlert.show(
          context: context,
          type: QuickAlertType.loading,
          title: 'Loading',
          text: 'Fetching your data',
        );
      },
      title: 'Loading',
      text: 'Fetching your data',
      leadingImage: 'assets/loading.gif',
    );
```

--------------------------------

### Identify missing type annotation in QuickAlert buttons

Source: https://pub.dev/packages/quickalert/score

Static analysis report highlighting missing type annotations in the okayBtn method.

```text
   ╷
29 │   Widget okayBtn(context) {
   │                  ^^^^^^^
   ╵
```

--------------------------------

### Display Basic Alert

Source: https://pub.dev/packages/quickalert

Use QuickAlert.show to display an alert with a specific type.

```dart
QuickAlert.show(
  context: context,
  type: QuickAlertType.success,
); // That's it to display an alert, use other properties to customize.
```

--------------------------------

### Add dependency via terminal

Source: https://pub.dev/packages/quickalert/install

Use the Flutter CLI to automatically add the package to your project.

```bash
$ flutter pub add quickalert
```

--------------------------------

### QuickAlert Class Options

Source: https://pub.dev/packages/quickalert/versions/1.1.0

The QuickAlert class allows developers to customize the appearance and behavior of alert dialogs through a set of configurable attributes.

```APIDOC
## QuickAlert Class

### Description
The QuickAlert class is used to display animated alert dialogs. It provides various configuration options to customize the title, text, buttons, and styling of the dialog.

### Parameters
- **context** (BuildContext) - Required - The BuildContext for the dialog.
- **type** (QuickAlertType) - Required - The type of alert dialog (e.g., QuickAlertType.success).
- **title** (String) - Optional - Custom title for the dialog.
- **text** (String) - Optional - Description text of the dialog.
- **widget** (Widget) - Optional - Custom widget to display in the dialog.
- **confirmBtnText** (String) - Optional - Text for the confirm button.
- **onConfirmBtnTap** (Function) - Optional - Callback function for the confirm button.
- **confirmBtnColor** (Color) - Optional - Color of the confirm button.
- **showCancelBtn** (bool) - Optional - Whether to show the cancel button.
- **showConfirmBtn** (bool) - Optional - Whether to show the confirm button.
- **cancelBtnText** (String) - Optional - Text for the cancel button.
- **onCancelBtnTap** (Function) - Optional - Callback function for the cancel button.
- **barrierDismissible** (bool) - Optional - Whether the dialog can be dismissed by touching the overlay.
- **animType** (QuickAlertAnimType) - Optional - The animation type for the dialog.
- **confirmBtnTextStyle** (TextStyle) - Optional - Text style for the confirm button.
- **cancelBtnTextStyle** (TextStyle) - Optional - Text style for the cancel button.
- **backgroundColor** (Color) - Optional - Background color of the dialog.
- **headerBackgroundColor** (Color) - Optional - Background color of the dialog header.
- **titleColor** (Color) - Optional - Color of the title text.
- **textColor** (Color) - Optional - Color of the description text.
- **barrierColor** (Color) - Optional - Color of the barrier overlay.
- **customAsset** (String) - Optional - Path to a custom asset image.
- **autoCloseDuration** (Duration) - Optional - Duration before the dialog automatically closes.
- **width** (double) - Optional - Width of the dialog.
- **titleAlignment** (TextAlign) - Optional - Alignment of the title.
- **textAlignment** (TextAlign) - Optional - Alignment of the description text.
- **borderRadius** (double) - Optional - Border radius of the dialog.
- **disableBackBtn** (bool) - Optional - Whether to disable the back button for closing the dialog.
```

--------------------------------

### Identify missing type annotation in QuickAlert cancel button

Source: https://pub.dev/packages/quickalert/score

Static analysis report highlighting missing type annotations in the cancelBtn method.

```text
   ╷
54 │   Widget cancelBtn(context) {
   │                    ^^^^^^^
   ╵
```

--------------------------------

### Import package in Dart

Source: https://pub.dev/packages/quickalert/install

Include the package in your Dart files to access its functionality.

```dart
import 'package:quickalert/quickalert.dart';
```

--------------------------------

### Display Loading Alert

Source: https://pub.dev/packages/quickalert

Displays a loading indicator alert.

```dart
QuickAlert.show(
 context: context,
 type: QuickAlertType.loading,
 title: 'Loading',
 text: 'Fetching your data',
);
```

--------------------------------

### Create a Custom Alert Dialog

Source: https://pub.dev/packages/quickalert/example

Defines a custom alert with a text input field and validation logic for the confirm button.

```dart
final customAlert = buildButton(
      onTap: () {
        var message = '';
        QuickAlert.show(
          context: context,
          type: QuickAlertType.custom,
          barrierDismissible: true,
          confirmBtnText: 'Save',
          customAsset: 'assets/custom.gif',
          widget: TextFormField(
            decoration: const InputDecoration(
              alignLabelWithHint: true,
              hintText: 'Enter Phone Number',
              prefixIcon: Icon(
                Icons.phone_outlined,
              ),
            ),
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.phone,
            onChanged: (value) => message = value,
          ),
          onConfirmBtnTap: () async {
            if (message.length < 5) {
              await QuickAlert.show(
                context: context,
                type: QuickAlertType.error,
                text: 'Please input something',
              );
              return;
            }
            Navigator.pop(context);
            if (mounted) {
              QuickAlert.show(
                context: context,
                type: QuickAlertType.success,
                text: "Phone number '$message' has been saved!.",
              );
            }
          },
        );
      },
      title: 'Custom',
      text: 'Custom Widget Alert',
      leadingImage: 'assets/custom.gif',
    );
```

--------------------------------

### Display Custom Alert

Source: https://pub.dev/packages/quickalert

Displays an alert with a custom widget and interaction logic.

```dart
QuickAlert.show(
  context: context,
  type: QuickAlertType.custom,
  barrierDismissible: true,
  confirmBtnText: 'Save',
  customAsset: 'assets/custom.gif',
  widget: TextFormField(
  decoration: const InputDecoration(
     alignLabelWithHint: true,
     hintText: 'Enter Phone Number',
     prefixIcon: Icon(
     Icons.phone_outlined,
     ),
    ),
    textInputAction: TextInputAction.next,
      keyboardType: TextInputType.phone,
      onChanged: (value) => message = value,
    ),
    onConfirmBtnTap: () async {
     if (message.length < 5) {
      await QuickAlert.show(
       context: context,
       type: QuickAlertType.error,
       text: 'Please input something',
      );
      return;
    }
    Navigator.pop(context);
     await Future.delayed(const Duration(milliseconds: 1000));
     await QuickAlert.show(
      context: context,
      type: QuickAlertType.success,
      text: "Phone number '$message' has been saved!.",
     );
    },
  );
 },
 title: 'Custom',
 text: 'Custom Widget Alert',
 leadingImage: 'assets/custom.gif',
);
```

--------------------------------

### Display Info Alert

Source: https://pub.dev/packages/quickalert

Displays an informational alert.

```dart
QuickAlert.show(
 context: context,
 type: QuickAlertType.info,
 text: 'Buy two, get one free',
);
```

--------------------------------

### Display Success Alert

Source: https://pub.dev/packages/quickalert

Displays a success-themed alert.

```dart
QuickAlert.show(
 context: context,
 type: QuickAlertType.success,
 text: 'Transaction Completed Successfully!',
);
```

--------------------------------

### Add dependency to pubspec.yaml

Source: https://pub.dev/packages/quickalert/install

Manually add the package version to the dependencies section of your pubspec.yaml file.

```yaml
dependencies:
  quickalert: ^1.1.0
```

--------------------------------

### Define Alert Trigger Button

Source: https://pub.dev/packages/quickalert/example

A helper method to create a styled Card widget that acts as a button to trigger alerts.

```dart
Card buildButton({
    required onTap,
    required title,
    required text,
    required leadingImage,
  }) {
    return Card(
      shape: const StadiumBorder(),
      margin: const EdgeInsets.symmetric(
        horizontal: 20,
      ),
      clipBehavior: Clip.antiAlias,
      elevation: 1,
      child: ListTile(
        onTap: onTap,
        leading: CircleAvatar(
          backgroundImage: AssetImage(
            leadingImage,
          ),
        ),
        title: Text(title ?? ""),
        subtitle: Text(text ?? ""),
        trailing: const Icon(
          Icons.keyboard_arrow_right_rounded,
        ),
      ),
    );
  }
```

--------------------------------

### Display Warning Alert

Source: https://pub.dev/packages/quickalert

Displays a warning-themed alert.

```dart
QuickAlert.show(
 context: context,
 type: QuickAlertType.warning,
 text: 'You just broke protocol',
);
```

--------------------------------

### Display Confirm Alert

Source: https://pub.dev/packages/quickalert

Displays a confirmation dialog with custom button text and colors.

```dart
QuickAlert.show(
 context: context,
 type: QuickAlertType.confirm,
 text: 'Do you want to logout',
 confirmBtnText: 'Yes',
 cancelBtnText: 'No',
 confirmBtnColor: Colors.green,
);
```

--------------------------------

### Display Error Alert

Source: https://pub.dev/packages/quickalert

Displays an error-themed alert.

```dart
QuickAlert.show(
 context: context,
 type: QuickAlertType.error,
 title: 'Oops...',
 text: 'Sorry, something went wrong',
);
```
Tokens:
Raw