Dialog kh library

A Flutter library to help you create animated, simple, style, custom dialogs in your app. Dialog kh is opensource library developed by Voern Kimsoer with Vann Dev

Features

  • Show alert dialog.
  • Show bottom Sheet.
  • Alert dialog has option auto close or not.
  • Support theme mode : Dark mode and light mode.
  • Support custom: color, style, button, icon, widget.
  • Custom Text field to input submit.
  • Header can customize widget
  • Bottom can customize widget

Installation

  1. Add the latest version of package to your pubspec.yaml (and rundart pub get):
dependencies:
  dialog_kh: ^0.0.3
  1. Import the package and use it in your Flutter App.
import 'package:dialog_kh/dialog_kh.dart';

Example 01

For example, to create dialog kh, you could use the following code:

   /// Show alert message
            SizedBox(
              width: 280,
              height: 50,
              child: ElevatedButton(
                child: const Text('Show alert message'),
                onPressed: () {
                  DialogKh.alertDialogKh(
                    context: context,
                    isAutoClosed: true, // default: true
                    seconds: 2,
                    header: const Icon(Icons.check_circle, color: Colors.green, size: 100),
                    title: "Congratulations",
                    description: "Congratulation your work is good",
                    radius: 30,
                  );
                },
              ),
            ),

Example 02

For example, to create dialog kh, you could use the following code:

   /// Show alert message
            SizedBox(
              width: 280,
              height: 50,
              child: ElevatedButton(
                child: const Text('Show alert message'),
                onPressed: () {
                      DialogKh.alertDialogKh(
                      context: context,
                      isAutoClosed: false, // default: true
                      disableBtn: false, // disable button is default os you need set disable to false, If you want to use button
                      header: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
                      title: "Congratulations",
                      titleColor: Theme.of(context).primaryColor,
                      description: "Congratulation your work is good",
                      onConfirm: () {
                      /// Do something...
                      Navigator.pop(context);
                      },
                      onCancel: () {
                      /// Do something...
                      Navigator.pop(context);
                      },
                  );
                },
              ),
            ),

Example 03

For example, to create dialog kh, you could use the following code:

  TextEditingController txt = TextEditingController();

/// Show alert dialog with text field input submit form
            SizedBox(
              width: 280,
              height: 50,
              child: ElevatedButton(
                child: const Text('Show alert message'),
                onPressed: () {
                      txt.clear();
                      DialogKh.alertDialogKh(
                      context: context,
                      header: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
                      title: "Success",
                      titleColor: Theme.of(context).primaryColor,
                      description: "Do you have any reason?",
                      isTextField: true, // default: false
                      isAutoClosed: false, // default: true
                      txtEditController: txt,
                      onSubmit: () {
                      /// Do something...
                      print("Submit: ${txt.text}");
                      Navigator.pop(context);
                      },
                  );
                },
              ),
            ),

Example 04

For example, to create dialog kh, you could use the following code:

 /// Show bottom sheet
SizedBox(
    height: 50,
    width: 280,
    child: ElevatedButton(
        child: const Text('Bottom sheet message'),
        onPressed: () {
            DialogKh.messageKh(
                context: context,
                radius: 15,
                title: "Message",
                description: "Congratulation your work is good",
                leading: const Icon(Icons.email, size: 40),
            );
        },
    ),
),

Example 05

For example, to create dialog kh, you could use the following code:

 /// Show bottom sheet
SizedBox(
    height: 50,
    width: 280,
    child: ElevatedButton(
        child: const Text('Bottom sheet'),
        onPressed: () {
            DialogKh.bottomSheetKh(
                context: context,
                height: 500,
                header: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Icon(Icons.check_circle, color: Theme.of(context).primaryColor, size: 100),
                ),
                onConfirm: () {
                /// Do something...
                Navigator.pop(context);
                },
                onCancel: () {
                /// Do something...
                Navigator.pop(context);
            });
        },
    ),
),

Libraries

dialog_kh