flutter_easy_dialogs 1.0.0

Easy, lightweight and flexible service for showing dialogs inside your Flutter application using BuildContext.

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 via BuildContext

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.of(context).showBanner(
      content: ElevatedButton(
        style: ElevatedButton.styleFrom(primary: Colors.red),
        onPressed: () {},
        child: const Text(
          'BANNER',
          style: TextStyle(fontSize: 30),
        ),
      )
    );

Or

 FlutterEasyDialogs.of(context).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 agent.

const customAgentName = 'customDialogAgent';
const customDialogName = 'customDialog';

class CustomDialogAgent extends EasyDialogAgentBase {
  CustomDialogAgent({required super.overlayController});

  @override
  Future<void> hide({AgentHideParams? params}) async {
    super.overlayController.removeCustomDialog(name: customDialogName);
  }

  @override
  Future<void> show({required CustomAgentShowParams params}) async {
    super.overlayController.insertCustomDialog(
          name: customDialogName,
          dialog: Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              height: 200.0,
              width: 200.0,
              color: params.color,
              child: Center(child: params.content),
            ),
          ),
        );
  }
}

class CustomAgentShowParams extends AgentShowParams {
  final Color color;

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


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( 
          customAgentBuilder: (overlayController) => {
            customAgentName:
                CustomDialogAgent(overlayController: overlayController)
          },
        );

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

Usage

Show dialog example:

 FlutterEasyDialogs.of(context).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);
      },
    );
  }
}

Positioned dialogs

Slide:

Fade:

Expansion:

Fullscreen dialogs

Special thanks to back_button_interceptor