Getting started topic

Getting started

Installation

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';

Setup and usage

Wrap your MaterialApp with FlutterEasyDialogs.builder() and you are ready to go.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

Now you are able to call show methods from FlutterEasyDialogs like so:

FlutterEasyDialogs.show(
  EasyDialog.positioned(
    decoration: const EasyDialogAnimation.fade(),
    content: Container(
      height: 150.0,
      color: Colors.blue[900],
      alignment: Alignment.center,
      child: const Text(
        'Dialog',
        style: TextStyle(
          color: Colors.white,
          fontSize: 30.0,
        ),
      ),
    ),
  ),
);

Or:

Container(
  height: 150.0,
  color: Colors.blue[900],
  alignment: Alignment.center,
  child: const Text(
    'Dialog',
    style: TextStyle(
      color: Colors.white,
      fontSize: 30.0,
    ),
  ),
).positioned().fade().show();

Or to hide with the help of specific dialog id:

FlutterEasyDialogs.hide(id: EasyDialogPosition.top);

You can await and and finish dialog showing with some result:

final result = await FlutterEasyDialogs.show<int>(
  EasyDialog.positioned(
    content: Container(
      height: 150.0,
      color: Colors.amber[900],
      alignment: Alignment.center,
      child: const Text('Dialog'),
    ),
    position: EasyDialogPosition.bottom,
  ),
);

await FlutterEasyDialogs.hide(
  id: EasyDialogPosition.bottom,
  result: 5,
);

Or:

final result = await Container(
  height: 150.0,
  color: Colors.amber[900],
  alignment: Alignment.center,
  child: const Text('Dialog'),
).positioned(position: EasyDialogPosition.bottom).show<int>();

await FlutterEasyDialogs.hide(
  id: EasyDialogPosition.bottom,
  result: 5,
);

If needed, there is an option to hide multiple dialogs at once.

FlutterEasyDialogs.hideWhere<PositionedDialog>(
  (dialog) =>
      dialog.position == EasyDialogPosition.bottom ||
      dialog.position == EasyDialogPosition.top,
);

Extension

There is an extension that provides alternative ways to show and hide dialogs.

final dialog = Container(
  height: 150.0,
  color: Colors.blue[900],
  alignment: Alignment.center,
  child: Text(
    'bottom',
    style: const TextStyle(
      color: Colors.white,
      fontSize: 30.0,
    ),
  ),
)
    .positioned(position: EasyDialogPosition.bottom)
    .fade()
    .swipe(instantly: false)
    .animatedTap()
    .slideHorizontal()
    .slideVertical()
    .blurBackground(backgroundColor: Colors.red.withOpacity(0.5));

final result = await dialog.show<int>();
await dialog.hide(result: 5);

Classes

EasyDialog

Base dialog class.

EasyDialog

Base dialog class.

EasyDialog

Base dialog class.

EasyDialogContext

Context that provides some useful methods and properties that are associated with specific EasyDialog.

EasyDialogContext

Context that provides some useful methods and properties that are associated with specific EasyDialog.

EasyDialogContext

Context that provides some useful methods and properties that are associated with specific EasyDialog.

EasyDialogsController

Core class for manipulating dialogs.

EasyDialogsController

Core class for manipulating dialogs.

EasyDialogsController

Core class for manipulating dialogs.

FlutterEasyDialogs

Wrapper for providing an easy use of different custom dialogs.

FlutterEasyDialogs

Wrapper for providing an easy use of different custom dialogs.

Extensions

EasyDialogsX on EasyDialog

Shortcuts for EasyDialog.

EasyDialogsX on EasyDialog

Shortcuts for EasyDialog.

EasyDialogsX on EasyDialog

Shortcuts for EasyDialog.

EasyDialogWidgetX on Widget

Shortcuts for Widget.

EasyDialogWidgetX on Widget

Shortcuts for Widget.

EasyDialogWidgetX on Widget

Shortcuts for Widget.