lovelydialogs 0.1.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 62

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

ParameterTypeDescription
contextBuildContextcontext
titleStringThe string that goes on the top
colorColorcolor of the top BoxDecoration
gradientGradientgradient of the top BoxDecoration
landscapeWidthdoublewidth of dialog when in landscape, portrait not affected
leadingWidgetwidget on center of the top box
borderRadiusRadiusradius of the curved border, set to Radius(0) to disable
buttonsTextThemeButtonTextThemethe style of the bottom buttons
touchDismissibleboolcan the skippable touching outside the dialog box
backDismissibleboolcan 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

ParameterTypeDescription
onConfirmFunction()called on click of the confirm button, need to button to appear
descriptionStringtext to inform the user about
confirmStringStringstring 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

ParameterTypeDescription
onValueChangedFunction(bool,int)called when clicked on a Checkbox
onConfirmFunction(List called on click of the confirm button, returns true in a index, if option was checked
stringListListthe list of options
activeCheckColorColorthe color to show that box was checked, theme accent by default
optionsFieldHeightdoublethe 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

ParameterTypeDescription
onConfirmFunction(String)called on click of the confirm button
onChangeFunction(String)called whenever the text changes
hintIconIconthe icon in the textInput
hintTextStringthe help string in the textInput
confirmStringStringstring 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

ParameterTypeDescription
typeLovelyProgressTypeLinear or Circular
onFinishFunction()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

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

0.1.0 #

* Fixes
    - landscape responsivity
* Adds
    - Customizable landscape width
    - ChoiceDialog customizable options field heigth
    - ProgressDialog onFinish

0.0.2 #

* Fix Changelog
* Fix inherited parameters
* Maintenance issues fixed
    - Homepage URL linked to Github repo
    - Added package description
* Docs
    - Examples of dialog type specific parameters

0.0.1 #

* First public release
* Some known bugs, to be fixed before 0.1.0

example/lib/main.dart

import 'dart:async';

import 'package:bloc_pattern/bloc_pattern.dart';
import 'package:example/theme_bloc.dart';
import 'package:flutter/material.dart';
import 'package:lovelydialogs/lovely_dialogs.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      blocs: [
        Bloc((i) => ThemeBloc()),
      ],
      child:
          Consumer<ThemeBloc>(builder: (BuildContext context, ThemeBloc bloc) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Lovely Dialogs',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            brightness: bloc.isDark ? Brightness.dark : Brightness.light,
          ),
          home: MyHomePage(title: 'Lovely Dialogs'),
        );
      }),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  LovelyProgressDialog dialog;
  double value = 0;

  Widget getCard({IconData iconData, Color color, Function onTap}) {
    return InkWell(
      child: Card(
          child: Container(
        decoration: BoxDecoration(
            color: color, borderRadius: BorderRadius.all(Radius.circular(4))),
        child: Icon(
          iconData,
          color: Colors.white,
          size: MediaQuery.of(context).size.width / 15,
        ),
      )),
      onTap: onTap,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        flexibleSpace: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(colors: [Colors.blue, Colors.pink])),
        ),
      ),
      body: OrientationBuilder(
        builder: (context, orientation) {
          return GridView.count(
            padding: EdgeInsets.only(top: 4),
            crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
            children: <Widget>[
              getCard(
                  iconData: Icons.info,
                  color: Colors.blue,
                  onTap: () => 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! ',
                        onConfirm: () => print("Dialog dismissed"),
                      ).show()),
              getCard(
                iconData: Icons.comment,
                color: Colors.green,
                onTap: () => LovelyTextInputDialog(
                  context: context,
                  buttonsTextTheme: ButtonTextTheme.accent,
                  hintIcon: Icon(Icons.comment),
                  hintText: 'Comment',
                  title: 'Comment on Facebook',
                  onConfirm: (text) => print('String entered was ' + text),
                  onChange: (text) => print('Current string is ' + text),
                ).show(),
              ),
              getCard(
                iconData: Icons.list,
                color: Colors.orange,
                onTap: () => LovelyChoiceDialog(
                  context: context,
									//landscapeWidth: 300,//MediaQuery.of(context).size.width*.3,
									//chooseFieldHeight: MediaQuery.of(context).size.height * .5, //insert in readme
                  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(),
              ),
              getCard(
                  iconData: Icons.fast_forward,
                  color: Colors.red,
                  onTap: () {
                    value = 0;
                    Timer tm = Timer.periodic(Duration(milliseconds: 100), (timer) {
											if(!LovelyProgressSingleton.hasDialogActive())
												timer.cancel();

                      print(value += .01);
                      LovelyProgressSingleton.setValue(value);
                    });
										LovelyProgressDialog(
                      context: context,
											//type: LovelyProgressType.Circular,
											onFinish: (){
												print('foii');
												tm.cancel();
											},
                    ).show();
                  }),
              getCard(
                iconData: Icons.favorite,
                color: Colors.pink,
                onTap: () => 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(),
              )
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.purple,
        onPressed: BlocProvider.getBloc<ThemeBloc>().switchColor,
        tooltip: 'Change theme',
        child: Icon(Icons.sync),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  lovelydialogs: ^0.1.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:lovelydialogs/lovely_choice_dialog.dart';
import 'package:lovelydialogs/lovely_custom_dialog.dart';
import 'package:lovelydialogs/lovely_dialogs.dart';
import 'package:lovelydialogs/lovely_info_dialog.dart';
import 'package:lovelydialogs/lovely_progress_dialog.dart';
import 'package:lovelydialogs/lovely_text_input_dialog.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
23
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • lovelydialogs that is a package requiring null.

Health suggestions

Format lib/lovely_choice_dialog.dart.

Run flutter format to format lib/lovely_choice_dialog.dart.

Format lib/lovely_custom_dialog.dart.

Run flutter format to format lib/lovely_custom_dialog.dart.

Format lib/lovely_dialogs.dart.

Run flutter format to format lib/lovely_dialogs.dart.

Fix additional 3 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/lovely_info_dialog.dart (Run flutter format to format lib/lovely_info_dialog.dart.)
  • lib/lovely_progress_dialog.dart (Run flutter format to format lib/lovely_progress_dialog.dart.)
  • lib/lovely_text_input_dialog.dart (Run flutter format to format lib/lovely_text_input_dialog.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test