vdialog 0.2.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 73

vDialog #

A new Flutter package project for simple and semantic way to fill the content inside the dialog.

🎖 Installing #

To use this package, add vDialog as a dependency in your pubspec.yaml file.

  1. install
    dependencies:
      vdialog: ^0.2.4
  1. import
    import 'package:vdialog/vdialog.dart';

Dialog Parameters #

CustomDialog({
    String title,
    Container titleContainerWidget,
    String content,
    Container contentContainerWidget,
    bool showButtonOne = true,
    Function buttonOne,
    String buttonOneText = "buttonOne",
    TextStyle buttonOneTextStyle,
    String buttonOneBackgroundHexColor = "00000000",
    double buttonOneMarginRight = 0,
    Container customButtonOneWidget,
    bool showButtonTwo = true,
    Function buttonTwo,
    String buttonTwoText = "buttonTwo",
    TextStyle buttonTwoTextStyle,
    String buttonTwoBackgroundHexColor = "00000000",
    double buttonTwoMarginRight = 0,
    Container customButtonTwoWidget,
    MainAxisAlignment buttonAlignment = MainAxisAlignment.end,
    bool showIcon = true,
    mainAlignment alignmentIcon = mainAlignment.right,
    double iconPositionTop = 20,
    double iconPositionLeft = 20,
    double iconPositionRight = 20,
    double iconBackgroundWidth = 80,
    double iconBackgroundHeight = 80,
    String iconBackgroundHexColor = "2979FF",
    IconData icon = Icons.lightbulb_outline,
    double iconSize = 50,
    String iconHexColor = "D32F2F",
  })

Example .1 Simple Dialog #

    showDialog(
          barrierDismissible: false,
          context: context,
          builder: (BuildContext ctx) => CustomDialog(
            title: "Error",
            buttonOne: this._buttonOne,
            buttonTwo: this._buttonTwo,
            buttonOneText: "retry",
            buttonTwoText: "close",
            content: "server not found!!",
            showButtonOne: true,
            showButtonTwo: true,
          ),
        );

Example .2 customTitleText and customContentText and customIcon #

    showDialog(
            barrierDismissible: false,
            context: context,
            builder: (BuildContext ctx) => CustomDialog(
              titleContainerWidget: customTitleText(),
              contentContainerWidget: customContentText(),
              buttonOne: this._buttonOne,
              buttonTwo: this._buttonTwo,
              buttonOneText: "retry",
              buttonTwoText: "close",
              showButtonOne: true,
              showButtonTwo: true,
              icon: Icons.public,
              iconBackgroundHexColor: "EF5350",
            ),
          );


  Widget customTitleText()
  {
    return Container(
      width: double.infinity,
      alignment: Alignment.center,
      child: Text(
        "Custom title",
        textAlign: TextAlign.end,
        style: TextStyle(fontSize: 24,),
      ),
    );
  }


  Widget customContentText()
  {
    return Container(
      width: double.infinity,
      alignment: Alignment.center,
      child: Text(
        "Custom Content",
        textAlign: TextAlign.end,
        style: TextStyle(fontSize: 24,),
      ),
    );
  }

Example .3 Styling Buttons #

    showDialog(
            barrierDismissible: false,
            context: context,
            builder: (BuildContext ctx) => CustomDialog(
              titleContainerWidget: customTitleText(),
              contentContainerWidget: customContentText(),
              buttonOne: this._buttonOne,
              buttonTwo: this._buttonTwo,
              buttonOneText: "retry",
              buttonTwoText: "close",
              showButtonOne: true,
              showButtonTwo: true,
              icon: Icons.public,
              iconBackgroundHexColor: "EF5350",
              buttonOneBackgroundHexColor: "EF5350",
              buttonOneTextStyle: TextStyle(color: Colors.white),
              buttonTwoBackgroundHexColor: "0daa0a",
              buttonTwoMarginRight: 10,
              buttonTwoTextStyle: TextStyle(color: Colors.yellow,fontSize: 20),
            ),
          );


  Widget customTitleText()
  {
    return Container(
      width: double.infinity,
      alignment: Alignment.center,
      child: Text(
        "Custom title",
        textAlign: TextAlign.end,
        style: TextStyle(fontSize: 24,),
      ),
    );
  }


  Widget customContentText()
  {
    return Container(
      width: double.infinity,
      alignment: Alignment.center,
      child: Text(
        "Custom Content",
        textAlign: TextAlign.end,
        style: TextStyle(fontSize: 24,),
      ),
    );
  }

Example .4 CustomButton's #

    showDialog(
            barrierDismissible: false,
            context: context,
            builder: (BuildContext ctx) => Cdialog(
              titleContainerWidget: customTitleText(),
              contentContainerWidget: customContentText(),
              customButtonOneWidget: customButtonOne(),
              customButtonTwoWidget: customButtonTwo(),
              showButtonOne: true,
              showButtonTwo: false,
              icon: Icons.settings,
              iconHexColor: "5E35B1",
              iconBackgroundHexColor: "EF5350",
              alignmentIcon: mAlignment.center,
            ),
          );


  Widget customTitleText() {
      return Container(
        width: double.infinity,
        alignment: Alignment.center,
        child: Text(
          "Custom title",
          textAlign: TextAlign.end,
          style: TextStyle(
            fontSize: 24,
          ),
        ),
      );
    }

    Widget customContentText() {
      return Container(
        width: double.infinity,
        alignment: Alignment.center,
        child: Text(
          "Custom Content",
          textAlign: TextAlign.end,
          style: TextStyle(
            fontSize: 24,
          ),
        ),
      );
    }

    Widget customButtonOne() {
      return Container(
        margin: EdgeInsets.only(right: 20),
        padding: EdgeInsets.all(
          10,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.yellow,
        ),
        child: FlatButton(
          onPressed: () {
            loadData();
            Navigator.of(context).pop(); // To close the dialog
          },
          child: Text(
            "button one",
          ),
        ),
      );
    }

    Widget customButtonTwo() {
      return Container(
        margin: EdgeInsets.only(right: 20),
        child: FlatButton(
          color: Colors.red,
          onPressed: () {
            loadData();
            Navigator.of(context).pop(); // To close the dialog
          },
          child: Text(
            "button two",
            style: TextStyle(color: Colors.white),
          ),
        ),
      );
    }

Example .4 Slide in animation #

    showDialog(
        barrierDismissible: false,
        context: context,
        builder: (BuildContext ctx) => Cdialog(
          titleContainerWidget: customTitleText(),
          contentContainerWidget: customContentText(),
          customButtonOneWidget: customButtonOne(),
          customButtonTwoWidget: customButtonTwo(),
          showButtonOne: true,
          showButtonTwo: true,
          icon: Icons.settings,
          iconHexColor: "5E35B1",
          iconBackgroundHexColor: "EF5350",
          alignmentIcon: mainAlignment.center,
          haveAnimation: true,
          animationsType: mAnimations.slide,
          slideInTypes: SlideInTypes.SlideInBottom,
          animationMilliseconds: 500,
        ),
      );


  Widget customTitleText() {
      return Container(
        width: double.infinity,
        alignment: Alignment.center,
        child: Text(
          "Custom title",
          textAlign: TextAlign.end,
          style: TextStyle(
            fontSize: 24,
          ),
        ),
      );
    }

    Widget customContentText() {
      return Container(
        width: double.infinity,
        alignment: Alignment.center,
        child: Text(
          "Custom Content",
          textAlign: TextAlign.end,
          style: TextStyle(
            fontSize: 24,
          ),
        ),
      );
    }

    Widget customButtonOne() {
      return Container(
        margin: EdgeInsets.only(right: 20),
        padding: EdgeInsets.all(
          10,
        ),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
          color: Colors.yellow,
        ),
        child: FlatButton(
          onPressed: () {
            loadData();
            Navigator.of(context).pop(); // To close the dialog
          },
          child: Text(
            "button one",
          ),
        ),
      );
    }

    Widget customButtonTwo() {
      return Container(
        margin: EdgeInsets.only(right: 20),
        child: FlatButton(
          color: Colors.red,
          onPressed: () {
            loadData();
            Navigator.of(context).pop(); // To close the dialog
          },
          child: Text(
            "button two",
            style: TextStyle(color: Colors.white),
          ),
        ),
      );
    }

Vali Naeimabadi, Flutter Developer

License under the MIT License.

0.2.3 - 2020-05-01 #

  • Added Animations.

0.2.2+2 - 2020-04-29 #

  • initial release.

example/lib/main.dart

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

void main() {
  runApp(MyApp());
}

//class MyApp extends StatefulWidget {
//  // This widget is the root of your application.
//  @override
//  _MyAppState createState() => _MyAppState();
//}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Test",
      home: Testing(),
    );
  }
}
//class _MyAppState extends State<MyApp> {
//  @override
//  Widget build(BuildContext context) {
//    return MaterialApp(
//      title: 'Flutter Demo',
//      theme: ThemeData(
//        primarySwatch: Colors.blue,
//      ),
//      home: Testing(),
//    );
//  }
//
//
//
//
//
////  void showVDialog() {
////    showDialog(
////      barrierDismissible: false,
////      context: context,
////      builder: (BuildContext ctx) => CustomDialog(
////        titleContainerWidget: customTitleText(),
////        contentContainerWidget: customContentText(),
////        customButtonOneWidget: customButtonOne(),
////        customButtonTwoWidget: customButtonTwo(),
////        showButtonOne: true,
////        showButtonTwo: true,
////        icon: Icons.settings,
////        iconHexColor: "5E35B1",
////        iconBackgroundHexColor: "EF5350",
////        alignmentIcon: mainAlignment.center,
////        haveAnimation: true,
////        animationsType: mAnimations.slide,
////        slideInTypes: SlideInTypes.SlideInBottom,
////        animationMilliseconds: 500,
////      ),
////    );
////  }
////
////  void loadData() {
////    //this is data function!
////  }
////
////
////  void _buttonOne() {
////    loadData();
////  }
////
////  void _buttonTwo() {
////    SystemNavigator.pop();
//////    Navigator.of(context).pop();
////  }
////
////  Widget customTitleText() {
////    return Container(
////      width: double.infinity,
////      alignment: Alignment.center,
////      child: Text(
////        "Custom title",
////        textAlign: TextAlign.end,
////        style: TextStyle(
////          fontSize: 24,
////        ),
////      ),
////    );
////  }
////
////  Widget customContentText() {
////    return Container(
////      width: double.infinity,
////      alignment: Alignment.center,
////      child: Text(
////        "Custom Content",
////        textAlign: TextAlign.end,
////        style: TextStyle(
////          fontSize: 24,
////        ),
////      ),
////    );
////  }
////
////  Widget customButtonOne() {
////    return Container(
////      margin: EdgeInsets.only(right: 20),
////      padding: EdgeInsets.all(
////        10,
////      ),
////      decoration: BoxDecoration(
////        borderRadius: BorderRadius.circular(40),
////        color: Colors.yellow,
////      ),
////      child: FlatButton(
////        onPressed: () {
////          loadData();
////          Navigator.of(context).pop(); // To close the dialog
////        },
////        child: Text(
////          "button one",
////        ),
////      ),
////    );
////  }
////
////  Widget customButtonTwo() {
////    return Container(
////      margin: EdgeInsets.only(right: 20),
////      child: FlatButton(
////        color: Colors.red,
////        onPressed: () {
////          loadData();
////          Navigator.of(context).pop(); // To close the dialog
////        },
////        child: Text(
////          "button two",
////          style: TextStyle(color: Colors.white),
////        ),
////      ),
////    );
////  }
//}

class Testing extends StatefulWidget {
  @override
  _TestingState createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: SafeArea(
          child: RaisedButton(
            child: Text("show dialog"),
            onPressed: () => showVDialog(context),
          ),
        ),
      ),
    );
  }


  void showVDialog(BuildContext context) {
    try {
      showDialog(
        barrierDismissible: false,
        context: context,
        builder: (BuildContext ctx) => CustomDialog(
          titleContainerWidget: customTitleText(),
          contentContainerWidget: customContentText(),
          customButtonOneWidget: customButtonOne(),
          customButtonTwoWidget: customButtonTwo(),
          showTitle: true,
          showContent: false,
          showIcon: false,
          showButtonOne: true,
          showButtonTwo: true,
          icon: Icons.add_photo_alternate,
          iconSize: 10,
          iconHexColor: "ffffff",
          iconBackgroundHexColor: "EF5350",
          alignmentIcon: mainAlignment.center,
          haveAnimation: true,
          animationsType: mAnimations.slide,
          slideInTypes: SlideInTypes.SlideInBottom,
          animationMilliseconds: 500,
        ),
      );
    } catch (error) {
      String asd="";
    }
  }

  Future<void> _buttonOne() async {
//    Navigator.of(context).pop();
//    Navigator.of(context)
//        .pushNamed(MainSearch.routeName, arguments: {'isUser': true});
  }

  void _buttonTwo() {
//    Navigator.of(context).pop();
//    Navigator.of(context)
//        .pushNamed(MainSearch.routeName, arguments: {'isUser': false});
  }

  Widget customTitleText() {
    return Container(
      width: double.infinity,
      alignment: Alignment.center,
      child: Text(
        "Search in",
        textAlign: TextAlign.end,
        textDirection: TextDirection.rtl,
        style: TextStyle(fontSize: 12, fontFamily: 'IRANSans'),
      ),
    );
  }

  Widget customContentText() {
    return Container(
      width: double.infinity,
      alignment: Alignment.center,
      child: Text(
        "",
        textAlign: TextAlign.end,
        textDirection: TextDirection.rtl,
        style: TextStyle(fontSize: 0, fontFamily: 'IRANSans'),
      ),
    );
  }

  Widget customButtonOne() {
    return Container(
      margin: EdgeInsets.only(right: 20),
      height: 80,
      width: MediaQuery.of(context).size.width*0.25,
      decoration: BoxDecoration(
          color: Colors.redAccent,
          borderRadius: BorderRadius.all(Radius.circular(10))
      ),
      child: GestureDetector(
        onTap: () => _buttonOne(),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.local_mall,
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Products",
              style: TextStyle(
                  color: Colors.white, fontFamily: 'IRANSans', fontSize: 12),
            ),
          ],
        ),
      ),
    );
  }

  Widget customButtonTwo() {
    return Container(
      margin: EdgeInsets.only(right: 20),
      height: 80,
      width: MediaQuery.of(context).size.width*0.25,
      decoration: BoxDecoration(
          color: Colors.redAccent,
          borderRadius: BorderRadius.all(Radius.circular(10))
      ),
      child: GestureDetector(
        onTap: () => _buttonTwo(),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              Icons.group,
            ),
            SizedBox(
              height: 10,
            ),
            Text(
              "Users",
              style: TextStyle(
                  color: Colors.white, fontFamily: 'IRANSans', fontSize: 12),
            ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  vdialog: ^0.2.4

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:vdialog/vdialog.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
46
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]
73
Learn more about scoring.

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

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • vdialog that is a package requiring null.

Health suggestions

Format lib/src/customDialog.dart.

Run flutter format to format lib/src/customDialog.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