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();

ezgif-1-c274042f92

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

ezgif-5-c6586e94c5

Classes

EasyDialog Getting started Dialogs
Base dialog class.
EasyDialogContext Getting started Dialogs
Context that provides some useful methods and properties that are associated with specific EasyDialog.
EasyDialogsController Getting started Dialogs Migration guide from 2.x to 3.x
Core class for manipulating dialogs.
FlutterEasyDialogs Getting started Dialogs Migration guide from 2.x to 3.x FAQ
Wrapper for providing an easy use of different custom dialogs.