snippetcoder_utils #

SnippetCoderUtils is a Utility package built with Flutter SDK to make Flutter development easier and more enjoyable than ever.

Features #

• FormHelper Utility to create custom UI TextBox, DropDown, Buttons.
• DataTable Utility with Generic Collection, Sorting, Edit, Delete & Custom Action Button
• ProgressHUD (Heads Up Display)
• Hex Color Converter.
• Multiple Image Picker with Add and Remove image.

Install #

Add this to your pubspec.yaml file:

dependencies:
  snippetcoder_utils: ^1.0.13

Usage #

FormHelper #

This utility will be used to create custom UI TextBox, DropDown, Buttons.

FormHelper - inputFieldWidget

 FormHelper.inputFieldWidget(
    context,
    "host",
    "Host URL",
    (onValidateVal) {
    if (onValidateVal.isEmpty) {
        return 'Host URL can\'t be empty.';
    }

    return null;
    },
    (onSavedVal) => {
        this.loginModel.host = onSavedVal,
    },
    initialValue: this.loginModel.host,
    obscureText: false,
    borderFocusColor: Theme.of(context).primaryColor,
    prefixIconColor: Theme.of(context).primaryColor,
    borderColor: Theme.of(context).primaryColor,
),

FormHelper.submitButton(
    "Login",
    () {
    
    },
    btnColor: Theme.of(context).primaryColor,
    borderColor: Theme.of(context).primaryColor,
    txtColor: Colors.black,
),

FormHelper - inputFieldWidgetWithLabel

FormHelper.inputFieldWidgetWithLabel(
    context,    
    "name",
    "Category Name",
    "",
    (onValidateVal) {
    if (onValidateVal.isEmpty) {
        return 'Category Name can\'t be empty.';
    }

    return null;
    },
    (onSavedVal) => {
        this.categoryModel.name = onSavedVal,
    },
    initialValue: this.categoryModel.name,
    obscureText: false,
    borderFocusColor: Theme.of(context).primaryColor,
    prefixIconColor: Theme.of(context).primaryColor,
    borderColor: Theme.of(context).primaryColor,
    borderRadius: 10,
    paddingLeft: 0,
    paddingRight: 0,
    showPrefixIcon: true,
    prefixIcon: Icon(Icons.web),
    onChange: (val) {},
),
FormHelper.inputFieldWidgetWithLabel(
    context,   
    "description",
    "Category Description",
    "",
    (onValidateVal) {
    return null;
    },
    (onSavedVal) => {
        this.categoryModel.description = onSavedVal,
    },
    initialValue: this.categoryModel.description,
    obscureText: false,
    borderFocusColor: Theme.of(context).primaryColor,
    prefixIconColor: Theme.of(context).primaryColor,
    borderColor: Theme.of(context).primaryColor,
    borderRadius: 10,
    paddingLeft: 0,
    paddingRight: 0,
    showPrefixIcon: true,
    prefixIcon: Icon(Icons.web),
    isMultiline: true,
    onChange: (val) {},
),

Constructors Parameters

FormHelper - dropDownWidget

 List<dynamic> productTypesList = [];
 this.productTypesList.add({"id": "simple", "name": "Simple"});
 this.productTypesList.add({"id": "variable", "name": "Variable"});

 FormHelper.dropDownWidget(
    context,
    "Select Product Type",
    "",
    this.productTypesList,
    (onChangedVal) {
        this.requestModel.productType = onChangedVal! ?? "";
    },
    (onValidateVal) {
        if (onValidateVal == null) {
            return 'Please Select Product Type';
        }

        return null;
    },
    borderFocusColor: Theme.of(context).primaryColor,
    borderColor: Theme.of(context).primaryColor,
    borderRadius: 10,
),

FormHelper - dropDownWidgetWithLabel

 List<dynamic> productTypesList = [];
 this.productTypesList.add({"val": "1", "label": "Simple"});
 this.productTypesList.add({"val": "2", "label": "Variable"});

 FormHelper.dropDownWidgetWithLabel(
    context,
    "Product Type"
    "Select Product Type",
    "",
    this.productTypesList,
    (onChangedVal) {
        this.requestModel.productType = onChangedVal! ?? "";
    },
    (onValidateVal) {
        if (onValidateVal == null) {
            return 'Please Select Product Type';
        }

        return null;
    },
    borderFocusColor: Theme.of(context).primaryColor,
    borderColor: Theme.of(context).primaryColor,
    borderRadius: 10,
    optionValue: "val",
    optionLabel: "label"
),

Constructors Parameters

ListUtils #

This utility will be used to create DataTable list with Generic Collection, Sorting, Edit, Delete & Custom Action Button

 return ListUtils.buildDataTable<CategoryModel>(
    context,
    ["Name", "Description", ""],
    ["name", "description", ""],
    sortAscending,
    sortColumnIndex,
    model.categoriesList,
    (CategoryModel onEditVal) {
        print(onEditVal.name);
    },
    (CategoryModel onRemoveVal) {
        print(onRemoveVal.id);
    },
    onSort: (columnIndex, columnName, ascending) {
        print(columnName);
        print(ascending);
    },
    headingRowColor: Theme.of(context).primaryColor,
    actionWidget: Icon(
       Icons.add,
       color: Colors.red,
    ),
    onActionTap: (CategoryModel model) {
        print(model.id);
    },
);

Constructors Parameters

ProgressHUD (Heads Up Display) #

It's helpful to give the user an indication that content is being loaded while the app sends a network request to get new data.

When we start any network call we will set isApiCallProcess = true, when the network call completed we will set back isApiCallProcess = false

bool isApiCallProcess = false;
return Scaffold(
    appBar: _buildAppBar(),
    body: ProgressHUD(
        child: pageUI(),
        inAsyncCall: isApiCallProcess,
        opacity: 0.3,
    ),
);

Constructors Parameters

HexColor #

This will be used to convert any HEX color to Flutter Color.

color: HexColor("#FC4136"),

Constructors Parameters

MultiImagePicker #

This widget will be used to show multi select images using Camera or Gallery.

To get updated images collection, you can use the onImageChanged parameter.

List<Object> images = [];

MultiImagePicker(
    totalImages: 6,
    imageSource: ImagePickSource.camera,
    initialValue: this.productModel.images.map((e) => e.src).toList(), //for showing images from collection
    onImageChanged: (images) {
        this.images = images;
    },
    imageType: ImageType.list,
    addImageWidget: Card(
            child: SizedBox(
                width: 100,
                child: Center(
                child: SizedBox(
                    width: 50,
                    height: 50,
                    child: Image.asset("assets/images/add-photo.png",),
                    ),
                ),
            ),
        ),
    ),
),

Constructors Parameters

Donate #

If you like my work, you can support me buying a cup of ☕

• PayPal

Copyright & License #

Code and documentation Copyright 2021 SnippetCoder. Code released under the Apache License. Docs released under Creative Commons.