Alerts - WebReinvent Internal Docs

Dependencies

fluttertoast
depends on app_theme also.
API lib depends on Alerts.

Basically we have two types of alerts: 1. Toast and 2. Dialog

Here Type of alert functions are nullable so you might want to check if they are null or not before using them. We made them nullable because developer can remove them in specific project so API will check if the dialogue or toast exist, if they don't it won't show anything. One usecase here is: developer wants to show error toasts only and not succuss toasts when using API, so dev will set this success toast to null. Now on success it will check if success toast is null or not if not null then only it shows it.

Toast

For toast, we have 3 kind of toasts: success, error, and info.

Info toast

Alerts.showInfoToast!(content: 'Your Content');

Success toast

Alerts.showSuccessToast!(content: 'Your Content');

Error toast

Alerts.showErrorToast!(content: 'Your Content');

Dialog

For dialog also, we have 2 kind of dialogs: success, and error.

Success Dialog

Alerts.showSuccessDialog!(
    title: 'Title',
    messages: ['Content'],
    hint: 'Hint',
    actions: [],
);

Error Dialog

Alerts.showErrorDialog!(
    title: 'Title',
    messages: ['Content'],
    hint: 'Hint',
    actions: [],
);

Source Code

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:get/get.dart';

import '../app_theme.dart';
import 'constants.dart';

class Alerts {
  static Future<void> _toast({required String content}) async {
    await Fluttertoast.showToast(
      msg: content,
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      backgroundColor: AppTheme.colors['white'],
      textColor: AppTheme.colors['black'],
      fontSize: 16.0,
    );
  }

  static _dialog({
    required String title,
    List<String>? messages,
    String? hint,
    Color? hintColor,
    List<Widget>? actions,
    Color color = Colors.white,
  }) {
    return Get.dialog(
      AlertDialog(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(defaultPadding),
          ),
        ),
        contentPadding: allPadding8,
        title: Center(child: Text(title)),
        content: SingleChildScrollView(
          physics: const BouncingScrollPhysics(),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              if (messages != null && messages.isNotEmpty) ...[
                verticalMargin12,
                Padding(
                  padding: horizontalPadding8,
                  child: Text(
                    messages.join('\n'),
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
              if ((messages != null && messages.isNotEmpty) ||
                  (hint != null && hint.trim().isNotEmpty))
                verticalMargin8,
              if (hint != null && hint.trim().isNotEmpty) ...[
                Padding(
                  padding: horizontalPadding8,
                  child: Text(
                    hint,
                    textAlign: TextAlign.center,
                    style: TextStyle(color: hintColor),
                  ),
                ),
                verticalMargin8,
              ],
            ],
          ),
        ),
        actions: <Widget>[
          if (actions == null || actions.isNotEmpty)
            Center(
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(backgroundColor: color),
                child: Text(
                  'Ok',
                  style: TextStyle(
                    color: color == AppTheme.colors['white']
                        ? AppTheme.colors['black']
                        : AppTheme.colors['white'],
                  ),
                ),
                onPressed: () {
                  Get.back();
                },
              ),
            )
          else
            ...actions,
        ],
      ),
      barrierDismissible: false,
    );
  }

  static Future<void> Function({
    required String content,
  })? showInfoToast = ({required String content}) async {
    await _toast(content: content);
  };

  static Future<void> Function({
    required String content,
  })? showErrorToast = ({required String content}) async {
    await _toast(content: 'Error: $content');
  };

  static Future<void> Function({
    required String content,
  })? showSuccessToast = ({required String content}) async {
    await _toast(content: content);
  };

  static Future<void> Function({
    required String title,
    List<String>? messages,
    String? hint,
    List<Widget>? actions,
  })? showErrorDialog = ({
    required String title,
    List<String>? messages,
    String? hint,
    List<Widget>? actions,
  }) async {
    await _dialog(
      title: title,
      messages: messages,
      hint: hint,
      hintColor: AppTheme.colors['danger'],
      actions: actions,
      color: AppTheme.colors['danger']!,
    );
  };

  static Future<void> Function({
    required String title,
    List<String>? messages,
    String? hint,
    List<Widget>? actions,
  })? showSuccessDialog = ({
    required String title,
    List<String>? messages,
    String? hint,
    List<Widget>? actions,
  }) async {
    await _dialog(
      title: title,
      messages: messages,
      hint: hint,
      hintColor: AppTheme.colors['success'],
      actions: actions,
      color: AppTheme.colors['success']!,
    );
  };
}

AppTheme

Constants