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