Smart Dialogs for Web Apps

What the package can do for you

  • You want to show an alert message?
  • You want to let something confirm?
  • You want to show a dialog with several action buttons to offer a choice?
  • You want to request input from a user, e.g. via text entry fields, combo boxes, radio or check buttons?
  • You want to have all this with a consistent default style?
  • You want to configure the style yourself?
  • You want to open the operating system's file selection dialog?
  • You want to display a panel containing clickable icons to start actions?
  • You want to show popup menus with clickable menu items?
  • You want to show a fine table displaying table data for your users?
  • You want to show such a table, but also with interactive input elements (buttons, text entry fields)?
  • And you want to program this with a few lines of code, compatible with Chrome(Windows/Linux/Android), Safari (Mac/IOS), and MS Edge, without importing extra packages, just based on standard Dart packages, especially on 'Dart.html'.?
  • You are looking for simple code examples to start with?

Then your are exactly right here. The focus of this package is the ease-of-use of the provided functionalities.

Display the examples

Click here to view the examples:

smart_dialog examples

The source code of the examples can be found in the files example/main.dart and example/src/examples.dart.

The major API functionalities

Please view the detailed API documentation in the API reference of this package (sidebar at the right of this page). The following provides an API overview.

Dialogs

For convenience and ease-of-use, employ the following asynchroneous functions.

  • Info.show(..) - display a message.
  • Info.confirm(..) - confirm a message (optionally with multiple confirm buttons).
  • Info.get(..) - get the user's input from the text entry fields, combo boxes, radio or check buttons present in the dialog displayed by this method.
  • Info.get2D(..) - similar to Info.get(), however the displayed dialog provides two columns for the user to enter data.

These methods display a dialog and return a Future of type UserInput, containing everything the user entered into the dialog, including which buttons were pressed.

For additional flexibility, dialogs can be opened by using their respective constructors. Modal (blocking) and non-modal dialogs are supported. Constructors require a callback function invoked when a button is pressed.

A special dialog provides access to the operating system's file selection dialog:

  • FileSelectionDialog(..) (the constructor)

Table, Icon Panel, Popup Menu

This package provides the following GUI elements in addition to dialogs :

  • BasicTable - display table data, and provide access to the data a user entered into the optional interactive elements of the table. A table must be embedded into a parent html element for display, e.g. into a dialog (demonstrated by the examples of this package), a user provided div, etc.
  • IconPanel - a rectangular grid of icons acting as buttons with assigned action functions,
  • PopupMenu - a popup menu with a list of menu items, acting as buttons with assigned action functions.

Style configuration

The classes DiaAttr and TableAttr contain style attribute names and their defaults for various screen sizes (PC, Tablet, Phone) and attribute setter methods for Dialogs and Tables, respectively. See also the example source files where style changes are demonstrated.

Using this package

You need Dart 2.0 or later.

Import the package using:

  • import 'package:smart_dialogs/smart_dialogs.dart';

Libraries

smart_dialogs