FlutterEasyDialogs

Flutter overlay based service for easy usage of different kinds of 'dialogs'.

Features

Different pre-built dialogs and animations
Flexible mechanism of integrating custom self-built dialogs and animations
Show dialogs in any place of the application

Install

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  flutter_easy_dialogs: <latest_version>

In your library add the following import:

import 'package:flutter_easy_dialogs/flutter_easy_dialogs.dart'

Getting started

Wrap your MaterialApp with FlutterEasyDialogs.builder().

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: FlutterEasyDialogs.builder(),
    );
  }
}

That's it. Now you are able to call show methods from EasyDialogController like so:

 FlutterEasyDialogs.dialogsController.showBanner(
      content: ElevatedButton(
        style: ElevatedButton.styleFrom(primary: Colors.red),
        onPressed: () {},
        child: const Text(
          'BANNER',
          style: TextStyle(fontSize: 30),
        ),
      )
    );

 FlutterEasyDialogs.dialogsController.showModalBanner(
   content: Container(
     height: 200.0,
     width: 200.0,
     color: Colors.red,
     child: const Icon(
       Icons.home,
       size: 60,
     ),
   ),
 );

Also you can provide your own custom dialog managers.

int? _customDialogId;

class CustomDialogManager extends EasyDialogManagerBase<CustomManagerShowParams,
    ManagerHideParamsBase?> {
  CustomDialogManager({required super.overlayController});

  @override
  Future<void> hide({ManagerHideParamsBase? params}) async {
    super.overlayController.removeDialog(
          CustomDialogRemoveStrategy(
            dialogId: _customDialogId!,
          ),
        );
  }

  @override
  Future<void> show({required CustomManagerShowParams params}) async {
    if (_customDialogId != null) {
      super.overlayController.removeDialog(
            CustomDialogRemoveStrategy(
              dialogId: _customDialogId!,
            ),
          );
    }
    super.overlayController.insertDialog(
          CustomDialogInsertStrategy(
            dialog: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 200.0,
                width: 200.0,
                color: params.color,
                child: Center(child: params.content),
              ),
            ),
            onInserted: (dialogId) => _customDialogId = dialogId,
          ),
        );
  }
}

class CustomManagerShowParams extends ManagerShowParamsBase {
  final Color color;

  const CustomManagerShowParams({
    required super.theme,
    required super.content,
    required this.color,
  });
}

Usage

Show dialog example:

 FlutterEasyDialogs.dialogsController.showBanner(
      onDismissed: () {},
      content: ElevatedButton(
        style: ElevatedButton.styleFrom(primary: Colors.red),
        onPressed: () {},
        child: const Text(
          'BANNER',
          style: TextStyle(fontSize: 30),
        ),
      ),
      durationUntilHide: Duration(milliseconds: _autoHideDuration.toInt()),
      autoHide: true,
      position: EasyDialogPosition.top,
      animationType: EasyPositionedAnimationType.fade,
      dismissibleType: EasyPositionedDismissibleType.swipe,
    );

Theming

It's possible to pre-configure some settings for dialogs using FlutterEasyDialogsThemeData.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        final builder = FlutterEasyDialogs.builder(
          theme: FlutterEasyDialogsThemeData(
            easyBannerTheme: EasyBannerThemeData.light(),
            easyModalBannerTheme: EasyModalBannerThemeData.light(),
          ),
        );

        return builder(context, child);
      },
    );
  }
}