cool_alert_two 0.1.0 copy "cool_alert_two: ^0.1.0" to clipboard
cool_alert_two: ^0.1.0 copied to clipboard

A Flutter package to display animated alert dialogs such as success, error, warning, confirm or even a loading dialog.

example/lib/main.dart

import 'package:cool_alert_two/cool_alert_two.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cool Alert',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: GoogleFonts.poppins().fontFamily,
      ),
      home: MyHomePage(title: 'Cool Alert'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final successAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.success,
          text: 'Transaction completed successfully!',
          autoCloseDuration: Duration(seconds: 2),
        );
      },
      text: 'Success',
      color: Colors.green,
    );

    final errorAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.error,
          title: 'Oops...',
          text: 'Sorry, something went wrong',
          loopAnimation: false,
        );
      },
      text: 'Error',
      color: Colors.red,
    );

    final warningAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.warning,
          text: 'You just broke protocol',
        );
      },
      text: 'Warning',
      color: Colors.orange,
    );

    final infoAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.info,
          text: 'Buy two, get one free',
        );
      },
      text: 'Info',
      color: Colors.blue[100],
    );

    final confirmAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.confirm,
          text: 'Do you want to logout',
          confirmBtnText: 'Yes',
          cancelBtnText: 'No',
          confirmBtnColor: Colors.green,
        );
      },
      text: 'Confirm',
      color: Colors.lightGreen,
    );

    final loadingAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.loading,
        );
      },
      text: 'Loading',
      color: Colors.grey,
    );

    final customAlert = _buildButton(
      onTap: () {
        var _message = '';
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.custom,
          barrierDismissible: true,
          confirmBtnText: 'Save',
          widget: TextFormField(
            decoration: InputDecoration(
              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 CoolAlertTwo.show(
                context: context,
                type: CoolAlertTwoType.error,
                text: 'Please input something',
              );
              return;
            }
            Navigator.pop(context);
            await Future.delayed(Duration(milliseconds: 1000));
            await CoolAlertTwo.show(
              context: context,
              type: CoolAlertTwoType.success,
              text: "Phone number '$_message' has been saved!.",
            );
          },
        );
      },
      text: 'Custom',
      color: Colors.orange,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            successAlert,
            errorAlert,
            warningAlert,
            infoAlert,
            confirmAlert,
            loadingAlert,
            customAlert,
          ],
        ),
      ),
    );
  }

  Widget _buildButton({VoidCallback? onTap, required String text, Color? color}) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: MaterialButton(
        color: color,
        minWidth: double.infinity,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.0),
        ),
        onPressed: onTap,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 15.0),
          child: Text(
            text,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}
3
likes
120
pub points
61%
popularity

Publisher

verified publishermatwright.dev

A Flutter package to display animated alert dialogs such as success, error, warning, confirm or even a loading dialog.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flare_flutter, flutter, lottie, vector_math

More

Packages that depend on cool_alert_two