lovelydialogs 0.1.0

A set of simple wrapper classes that are aimed to help you easily create fancy material dialogs

Lovely Dialogs

A flutter implementation of LovelyDialog.

This library is a set of simple wrapper classes that are aimed to help you easily create fancy material dialogs.

Demo App

App can be found here

Major Improvements

• Supports gradients
• Fully Dark mode support

Installation

In your pubspeck.yaml:

dependencies:
  flutter:
    sdk: flutter

  lovelydialogs: ^0.1.0

to grab lastest release.

Usage

Import

import 'package:lovelydialogs/lovely_dialogs.dart';

Types

• LovelyInfoDialog
• LovelyChoiceDialog
• LovelyTextInput
• LovelyProgressDialog
• LovelyCustomDialog

LovelyDialog

Not acessible by default, but all other classes inherits from it. It holds the parameters of the base dialog, colors, etc. All of the dialog types can use the following parameters

Parameter Table

Parameter	Type	Description
context	BuildContext	context
title	String	The string that goes on the top
color	Color	color of the top BoxDecoration
gradient	Gradient	gradient of the top BoxDecoration
landscapeWidth	double	width of dialog when in landscape, portrait not affected
leading	Widget	widget on center of the top box
borderRadius	Radius	radius of the curved border, set to Radius(0) to disable
buttonsTextTheme	ButtonTextTheme	the style of the bottom buttons
touchDismissible	bool	can the skippable touching outside the dialog box
backDismissible	bool	can be skippable with back button

LovelyInfoDialog

A LovelyInfoDialog aims to show short information to the user. The standard way to use a LovelyDialog is to declare

dialog = LovelyInfoDialog(
  context: context,
  title: 'Pets',
  leading: Icon(Icons.pets, color: Colors.white),
  gradient: LinearGradient(colors: [Colors.blue, Colors.green]),
  description: 'Pets are cool, aren\'t they? So don\'t forget to give food and love!',
);

and calling it later

dialog.show()

or shortly

LovelyInfoDialog(
  context: context,
  title: 'Pets',
  description:'Pets are cool, aren\'t they? So don\'t forget to give food and love!',
  onConfirm: () => print("Dialog dismissed"),
).show();

if onConfirm function was not provided, confirm button will not appear

Parameter Table

Parameter	Type	Description
onConfirm	Function()	called on click of the confirm button, need to button to appear
description	String	text to inform the user about
confirmString	String	string placed in the flatbutton, if present

LovelyChoiceDialog

A dialog where you can toggle a series of options, provided a list of strings

LovelyChoiceDialog(
  context: context,
  leading: Icon(Icons.fastfood, color: Colors.white),
  activeCheckColor: Colors.red,
  stringList: <String>[
    'Pizza',
    'Noodles',
    'Pasta',
    'Hambuguer',
    'Pie',
  ],
  title: 'Order Some food',
  gradient: LinearGradient(colors: [Colors.orange, Colors.red]),
  onConfirm: (checked) => print(checked);
  onValueChanged: (value, index) => print(value.toString() + " " + index.toString()),
).show();

Parameter Table

Parameter	Type	Description
onValueChanged	Function(bool,int)	called when clicked on a Checkbox
onConfirm	Function(List	called on click of the confirm button, returns true in a index, if option was checked
stringList	List	the list of options
activeCheckColor	Color	the color to show that box was checked, theme accent by default
optionsFieldHeight	double	the height of options list container, limited by standard min and max values

LovelyTextInput

A dialog to ask text input from the user

LovelyTextInputDialog(
  context: context,
  title: 'Comment on @facebook',
  onConfirm: (text) => print('String entered was ' + text),
	onChange: (text) => print('Current string is ' + text),
).show();

Parameter Table

Parameter	Type	Description
onConfirm	Function(String)	called on click of the confirm button
onChange	Function(String)	called whenever the text changes
hintIcon	Icon	the icon in the textInput
hintText	String	the help string in the textInput
confirmString	String	string placed in the flatbutton

LovelyProgressDialog

Just need to declare

LovelyProgressDialog(
  context: context,
  type: LovelyProgressType.Circular
).show();

and to change its value at runtime

LovelyProgressSingleton.setValue(value);

Type is LovelyProgressType.Linear by default

Parameter Table

Parameter	Type	Description
type	LovelyProgressType	Linear or Circular
onFinish	Function()	function called when value gets to 1

LovelyCustomDialog

Inherits directly from LovelyDialog base, allowing the use of a custom widget as the child

LovelyCustomDialog(
  gradient: LinearGradient(colors: [Colors.blue, Colors.pink]),
  context: context,
  child: Column(
    children: <Widget>[
      FlutterLogo(size: 200, style: FlutterLogoStyle.stacked, duration: Duration(seconds: 50)),
      SizedBox(height: 8,),
    ],
  ),
).show(),

Parameter Table

Parameter	Type	Description
child	Widget	placeholder for content

TO DO

• ProgressDialog custom progressbar
• InfoDialog add a "never show again"/"Acept the terms" button
• Add SingleChoiceDialog
• Animations on panel

Fixes

• Choice Dialog Nested Scroll issues