Flutter Package for Utility Integration Tutorial

Developers used different dart utility packages in flutter apps. Today we are going to integrate flutter commons package in our flutter apps. 

This package is used for dialogs, shared preferences, validators, connection and api functions etc. I will explain how you can use this package to display dialogs and toasts in your flutter apps using this example. You can also checkout sample at HERE.

In this example, I created common custom button which is used for all buttons layout and their tap events. I pass three parameters in this class: title for button text, color for button background color and callback for button click event.

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

class CustomButton extends StatefulWidget {
  String title;
  Color buttonColor;
  VoidCallback onButtonPressed;

  CustomButton(this.title, this.buttonColor, this.onButtonPressed);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return CustomButtonState();
  }
}

class CustomButtonState extends State<CustomButton> {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
      color: widget.buttonColor,
      textColor: Colors.white,
      child: Text(widget.title, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22)),
      onPressed: widget.onButtonPressed
    );
  }
}


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutteruicommonssample/custom_button.dart';
import 'package:flutteruicommonssample/dialogs.dart';

import 'toasts.dart';

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          CustomButton("Dialogs", Colors.red, () => onDialogsClick(context)),
          SizedBox(height: 50),
          CustomButton("Toasts", Colors.red, () => onToastsClick(context)),
        ],
      ),
    ));
  }

   var onDialogsClick = (context) =>
     Navigator.push(context, MaterialPageRoute(builder: (_) => Dialogs()));

  var onToastsClick = (context) =>
    Navigator.push(context, MaterialPageRoute(builder: (_) => Toasts()));


}



 



Dialogs




(1) Success Dialog

successDialog(context, "Success Message");
flutter package



(2) Error Dialog

errorDialog(context, "Error Message");

 

flutter package
 


(3) Warning Dialog

warningDialog(context, "Warning Message");

 

flutter package

 

(4) Info Dialog

infoDialog(context, "Info Message");

 

flutter package

 

(5) Confirmation Dialog

confirmationDialog(
      context, "Are you sure want to delete this?",
      title: "Confirm",
      negativeText: "Cancel",
      positiveText: "Delete",
      positiveAction: () {});

 

 

(6) Wait Dialog

waitDialog(context, message: "Please Wait...", duration: Duration(seconds: 3));

(7) Single Input Dialog

singleInputDialog(
        context,
        title: "Input Dialog",
        label: "Name",
        validator: (value) {
          print("Validator: $value");
          return value.isEmpty ? "Required!" : null;
        },
        positiveAction: (value) {
          print("Submit: $value");
        },
        negativeAction: (value) {},
        neutralAction: () {
          print("neutral action");
        },
      ); 

 

(8) Option Dialog

static var options = List<Option>()
    ..add(Option.view())
    ..add(Option.edit())
    ..add(Option.details())
    ..add(Option.delete());

optionsDialog(context, "Options", options);

 

(9) Single Select Dialog

static var listPlayers = Set<SimpleItem>()
    ..add(SimpleItem(1, "Cristiano Ronaldo"))
    ..add(SimpleItem(2, "Lional Messi"))
    ..add(SimpleItem(3, "Neymar Jr."))
    ..add(SimpleItem(4, "Kylian Mbappe"))
    ..add(SimpleItem(5, "Kevin De Bruyne"))
    ..add(SimpleItem(6, "Eden Hazard"))
    ..add(SimpleItem(7, "Antoine Griezmann"))
    ..add(SimpleItem(8, "Robert Lewandowski"))
    ..add(SimpleItem(9, "Paul Pogba"));

singleSelectDialog(
      context,
      "Select Favourite Player",
      listPlayers,
      (item) => print(item));

 

flutter package

(10) Multi Select Dialog

static var listPlayers = Set<SimpleItem>()
    ..add(SimpleItem(1, "Cristiano Ronaldo"))
    ..add(SimpleItem(2, "Lional Messi"))
    ..add(SimpleItem(3, "Neymar Jr."))
    ..add(SimpleItem(4, "Kylian Mbappe"))
    ..add(SimpleItem(5, "Kevin De Bruyne"))
    ..add(SimpleItem(6, "Eden Hazard"))
    ..add(SimpleItem(7, "Antoine Griezmann"))
    ..add(SimpleItem(8, "Robert Lewandowski"))
    ..add(SimpleItem(9, "Paul Pogba"));

static var selectedItems = Set<SimpleItem>();

multiSelectDialog(
      context,
      "Select Favourite Players",
      listPlayers,
      selectedItems,
      (values) => selectedItems = values);

 

flutter package

(11) Radio Dialog

static var listPlayers = Set<SimpleItem>()
    ..add(SimpleItem(1, "Cristiano Ronaldo"))
    ..add(SimpleItem(2, "Lional Messi"))
    ..add(SimpleItem(3, "Neymar Jr."))
    ..add(SimpleItem(4, "Kylian Mbappe"))
    ..add(SimpleItem(5, "Kevin De Bruyne"))
    ..add(SimpleItem(6, "Eden Hazard"))
    ..add(SimpleItem(7, "Antoine Griezmann"))
    ..add(SimpleItem(8, "Robert Lewandowski"))
    ..add(SimpleItem(9, "Paul Pogba"));

radioListDialog(context,
      "Select Favourite Player", listPlayers, (item) => print(item));

 

Toasts

(1) Success Toast

successToast("Success Message");

 

(2) Error Toast

errorToast("Error Message");

 

 

(3) Warning Toast

warningToast("Warning Message");

 

(4) Info Toast

infoToast("Info Message");

 

Final Code

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'custom_button.dart';
import 'package:commons/commons.dart';

class Dialogs extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return DialogsState();
  }
}

class DialogsState extends State<Dialogs> {
  var onSuccessDialogClick =
      (context) => successDialog(context, "Success Message");

  var onErrorDialogClick = (context) => errorDialog(context, "Error Message");

  var onWarningDialogClick =
      (context) => warningDialog(context, "Warning Message");

  var onInfoDialogClick = (context) => infoDialog(context, "Info Message");

  var onConfirmationDialogClick = (context) => confirmationDialog(
      context, "Are you sure want to delete this?",
      title: "Confirm",
      negativeText: "Cancel",
      positiveText: "Delete",
      positiveAction: () {});

  var onWaitDialogClick = (context) => waitDialog(context,
      message: "Please Wait...", duration: Duration(seconds: 3));

  var onSingleInputDialogClick = (context) => singleInputDialog(
        context,
        title: "Input Dialog",
        label: "Name",
        validator: (value) {
          print("Validator: $value");
          return value.isEmpty ? "Required!" : null;
        },
        positiveAction: (value) {
          print("Submit: $value");
        },
        negativeAction: (value) {},
        neutralAction: () {
          print("neutral action");
        },
      );

  static var options = List<Option>()
    ..add(Option.view())
    ..add(Option.edit())
    ..add(Option.details())
    ..add(Option.delete());

  var onOptionDialogClick =
      (context) => optionsDialog(context, "Options", options);

  static var listPlayers = Set<SimpleItem>()
    ..add(SimpleItem(1, "Cristiano Ronaldo"))
    ..add(SimpleItem(2, "Lional Messi"))
    ..add(SimpleItem(3, "Neymar Jr."))
    ..add(SimpleItem(4, "Kylian Mbappe"))
    ..add(SimpleItem(5, "Kevin De Bruyne"))
    ..add(SimpleItem(6, "Eden Hazard"))
    ..add(SimpleItem(7, "Antoine Griezmann"))
    ..add(SimpleItem(8, "Robert Lewandowski"))
    ..add(SimpleItem(9, "Paul Pogba"));

  var onSingleSelectDialogClick = (context) => singleSelectDialog(
      context,
      "Select Favourite Player",
      listPlayers,
      (item) => print(item));

  static var selectedItems = Set<SimpleItem>();

  var onMultiSelectDialogClick = (context) => multiSelectDialog(
      context,
      "Select Favourite Players",
      listPlayers,
      selectedItems,
      (values) => selectedItems = values);

  var onRadioListDialogClick = (context) => radioListDialog(context,
      "Select Favourite Player", listPlayers, (item) => print(item));

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(
      child: Scaffold(
          body: Center(
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 30),
              CustomButton("Success Dialog", Colors.amber,
                  () => onSuccessDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Error Dialog", Colors.amber,
                  () => onErrorDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Warning Dialog", Colors.amber,
                  () => onWarningDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Info Dialog", Colors.amber,
                  () => onInfoDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Confirmation Dialog", Colors.amber,
                  () => onConfirmationDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Wait Dialog", Colors.amber,
                  () => onWaitDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Single Input Dialog", Colors.amber,
                  () => onSingleInputDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Option Dialog", Colors.amber,
                  () => onOptionDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Single Select Dialog", Colors.amber,
                  () => onSingleSelectDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Multi Select Dialog", Colors.amber,
                  () => onMultiSelectDialogClick(context)),
              SizedBox(height: 30),
              CustomButton("Radio Dialog", Colors.amber,
                  () => onRadioListDialogClick(context)),
              SizedBox(height: 30),
            ],
          ),
        ),
      )),
    );
  }
}

 

import 'package:commons/commons.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'custom_button.dart';

class Toasts extends StatefulWidget {

  @override
  State<StatefulWidget> createState() {
    return ToastsState();
  }

}

class ToastsState extends State<Toasts>{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return OKToast(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CustomButton("Success Toast", Colors.amber, () => onSuccessToastClick()),
              SizedBox(height: 50),
              CustomButton("Error Toast", Colors.amber, () => onErrorToastClick()),
              SizedBox(height: 50),
              CustomButton("Warning Toast", Colors.amber, () => onWarningToastClick()),
              SizedBox(height: 50),
              CustomButton("Info Toast", Colors.amber, () => onInfoToastClick()),
            ],
          ),
        ),
      ),
    );
  }

  var onSuccessToastClick = () =>
    successToast("Success Message");

  var onErrorToastClick = () =>
    errorToast("Error Message");

  var onWarningToastClick = () =>
    warningToast("Warning Message");

  var onInfoToastClick = () =>
    infoToast("Info Message");

}

Leave a Reply