mdialog 0.0.2

Modal Dialog System #

A minimalist modal dialog system.

alert confirm

Usage #

This package contains a basic CSS skin (mdialog.css) and two themes (blue.css and dark.css). Load them from your web page:

  <link rel="stylesheet" href="packages/mdialog/css/mdialog.css">
  <link rel="stylesheet" href="packages/mdialog/css/themes/dark.css">


import 'package:mdialog/mdialog.dart';

main() async {
  await alert('We will proceed to format the Hard Disk');
  print('Ok, you\'ve been alerted');

  if (await confirm('Are you sure?')) {
    print('Formating Hard Disk ...');

Create custom dialogs #

The library provides two classes to create custom modal dialogs: ModalWindow and ModalBlock. The following code creates a modal loading interface.

import 'dart:html';
import 'package:mdialog/mdialog.dart';

class ModalLoading {
  final _modalWindow = new ModalWindow();

  ModalLoading() {
    _modalWindow.add(new ModalBlock('header')..text = 'Loading request');
    _modalWindow.add(new ModalBlock('body')..text = 'Please wait ...');;

  void close() => _modalWindow.close();

main() async {
  final loading = new ModalLoading();

  try {
    await HttpRequest.getString('');
  } catch (e) {
    await alert('Error processing the request');
  } finally {

Features and bugs #

Please file feature requests and bugs at the Issue Tracker.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  mdialog: ^0.0.2

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:mdialog/mdialog.dart';
Awaiting analysis to complete.