flat_dialog 1.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • new55

flat_dialog #

Modified, more updated fork of rflutter_alert. FlatDialog is a simple method of creating various popup dialogs in Flutter.

Error Dialog

Features #

  • Simple animations
  • Production ready dialog styles
  • Recyclable and reusable dialogs
  • Flat, easy to understand and beautiful

Let's begin! #

  1. Add dependency to your app:
dependencies:
	flat_dialog: ^1.0.0
  1. Use some of our ready dialogs!
Future<bool> throwErrorDialog(BuildContext context) {
    return FlatDialog(
      context: context,
      type: DialogType.error, // We have more of these!
      title: "ERROR",
      desc: "We can't reach our server :(, try again later.",
      buttons: [
        FlatDialogButton(
		  width: 150,
		  onPressed: () => Navigator.pop(context),
          child: const Text(
            "Oh no!",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
        )
      ],
    ).show();
  }
  1. Customize your new flat dialog (with style)!
AlertStyle(
      animationStyle: AnimationStyle.fromTop, // How the dialog animates
      closeButtonVisible: false, // Does the [x] in the corner appear?
      isTapDismiss: true, // If you click outside the dialog, does it close?
      descStyle: TextStyle(fontWeight: FontWeight.bold), // How does the text look? 
      animationDuration: const Duration(milliseconds: 400), // How long does the animation last?
      alertBorder: RoundedRectangleBorder( // Do you want a border around the dialog?
        borderRadius: BorderRadius.circular(0.0),
        side: BorderSide(
          color: Colors.grey,
        ),
      ),
      titleStyle: TextStyle(
        color: Colors.red, // What color is the [title] text?
      ),
      boxConstraints: const BoxConstraints.expand( // Do you want constraints?
        width: 300,
      ),
    );
  1. Check out the example project for even more features!

Want to contribute? #

  • Open a pull request
  • Make a new issue on GitHub.

Giant thank you to Ratel and İzzet Öztürk for providing the base for this project <3.

[1.0.0] - 2020-06-28 #

  • Release version

[1.1.0] - 2020-07-08 #

  • Added isDescScrollable so that the dialog support long descriptions

[1.1.1] - 2020-07-08 #

  • Added a different way of limiting dialog size.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flat_dialog/flat_dialog.dart';

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

class RatelApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('FlatDialog'),
        ),
        body: PopupDialog(),
      ),
    );
  }
}

class PopupDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(5),
            alignment: Alignment.center,
            width: 300,
            decoration:
                BoxDecoration(color: Colors.indigoAccent.withOpacity(0.8)),
            child: FlatButton(
              child: Text('Normal Dialog'),
              onPressed: () => _onBasicAlertPressed(context),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.all(5),
            alignment: Alignment.center,
            width: 300,
            decoration:
                BoxDecoration(color: Colors.indigoAccent.withOpacity(0.8)),
            child: FlatButton(
              child: Text('Error Dialog'),
              onPressed: () => _onAlertButtonPressed(context),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.all(5),
            alignment: Alignment.center,
            width: 300,
            decoration:
                BoxDecoration(color: Colors.indigoAccent.withOpacity(0.8)),
            child: FlatButton(
              child: Text('Dialog with Gradient Buttons'),
              onPressed: () => _onAlertButtonsPressed(context),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.all(5),
            alignment: Alignment.center,
            width: 300,
            decoration:
                BoxDecoration(color: Colors.indigoAccent.withOpacity(0.8)),
            child: FlatButton(
              child: Text('Dialog with a Custom Style'),
              onPressed: () => _onAlertWithStylePressed(context),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.all(5),
            alignment: Alignment.center,
            width: 300,
            decoration:
                BoxDecoration(color: Colors.indigoAccent.withOpacity(0.8)),
            child: FlatButton(
              child: Text('Dialog with an Custom Image'),
              onPressed: () => _onAlertWithCustomImagePressed(context),
            ),
          ),
          const SizedBox(
            height: 10,
          ),
          Container(
            padding: const EdgeInsets.all(5),
            alignment: Alignment.center,
            width: 300,
            decoration:
                BoxDecoration(color: Colors.indigoAccent.withOpacity(0.8)),
            child: FlatButton(
              child: Text('Dialog with some Custom Content'),
              onPressed: () => _onAlertWithCustomContentPressed(context),
            ),
          ),
        ],
      ),
    );
  }

  Future<bool> _onBasicAlertPressed(BuildContext context) {
    return FlatDialog(
            context: context,
            title: "DIALOG",
            desc: "Here is some example text.")
        .show();
  }

  Future<bool> _onAlertButtonPressed(BuildContext context) {
    return FlatDialog(
      context: context,
      type: DialogType.error,
      title: "ERROR",
      desc: "Some text for you to understand the layout :)",
      buttons: [
        FlatDialogButton(
          child: const Text(
            "Amazing!",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          width: 150,
        )
      ],
    ).show();
  }

  Future<bool> _onAlertButtonsPressed(BuildContext context) {
    return FlatDialog(
      context: context,
      type: DialogType.warning,
      title: "DIALOG",
      desc: "Here is another dialog example.",
      buttons: [
        FlatDialogButton(
          child: Text(
            "FLAT",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          color: Color.fromRGBO(0, 179, 134, 1.0),
        ),
        FlatDialogButton(
          child: const Text(
            "GRADIENT",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          gradient: LinearGradient(colors: [
            Colors.redAccent,
            Colors.redAccent.withOpacity(0.6),
          ]),
        )
      ],
    ).show();
  }

  Future<bool> _onAlertWithStylePressed(BuildContext context) {
    final AlertStyle alertStyle = AlertStyle(
      animationStyle: AnimationStyle.fromTop,
      closeButtonVisible: false,
      isTapDismiss: false,
      isDescScrollable: true,
      descStyle: TextStyle(fontWeight: FontWeight.bold),
      animationDuration: const Duration(milliseconds: 400),
      alertBorder: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(0.0),
        side: BorderSide(
          color: Colors.grey,
        ),
      ),
      titleStyle: TextStyle(
        color: Colors.red,
      ),
      descHeight: 50
    );

    return FlatDialog(
      context: context,
      style: alertStyle,
      type: DialogType.info,
      title: "RFLUTTER ALERT",
      desc: """
Flutter is more awesome with RFlutter Alert.
""",
      buttons: [
        FlatDialogButton(
          child: Text(
            "Okay",
            style: const TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          color: const Color.fromRGBO(0, 179, 134, 1.0),
          radius: BorderRadius.circular(0.0),
        ),
      ],
    ).show();
  }

  Future<bool> _onAlertWithCustomImagePressed(BuildContext context) {
    return FlatDialog(
      context: context,
      title: "Alert with a different image.",
      desc: "Custom image example",
      image: Image.asset("assets/images/success.png"),
    ).show();
  }

  Future<bool> _onAlertWithCustomContentPressed(BuildContext context) {
    return FlatDialog(
        context: context,
        title: "LOGIN",
        content: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.account_circle),
                labelText: 'E-Mail',
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                icon: Icon(Icons.lock),
                labelText: 'Password',
              ),
            ),
          ],
        ),
        buttons: [
          FlatDialogButton(
            onPressed: () => Navigator.pop(context),
            child: Text(
              "LOGIN",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          )
        ]).show();
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flat_dialog: ^1.1.1

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:flat_dialog/flat_dialog.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
11
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
97
Overall:
Weighted score of the above. [more]
55
Learn more about scoring.

We analyzed this package on Jul 8, 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:

  • flat_dialog that is a package requiring null.

Health suggestions

Format lib/flat_dialog.dart.

Run flutter format to format lib/flat_dialog.dart.

Format lib/src/flat_dialog_animations.dart.

Run flutter format to format lib/src/flat_dialog_animations.dart.

Format lib/src/flat_dialog_button.dart.

Run flutter format to format lib/src/flat_dialog_button.dart.

Format lib/src/flat_dialog_start.dart.

Run flutter format to format lib/src/flat_dialog_start.dart.

Maintenance suggestions

The package description is too short. (-3 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
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
lint any