snippet_coder_utils 1.0.12 icon indicating copy to clipboard operation
snippet_coder_utils: ^1.0.12 copied to clipboard

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

snippetcoder_utils #

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

pub package

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.12

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

ParameterTypeOptionalDescription
contextBuildContextNOPass the current build context.
keyNameStringNOKey for the textbox, should be unique for every textbox.
labelNameStringNOLabelName will be used if using inputFieldWidgetWithLabel method to show label with TextBox.
hintTextStringNOUsed to show placeholder in textbox
onValidateFunction(String)NOFired on textbox Validation
onSavedFunction(String)NOFires on form Saved.
onChangeFunction(String)YESFires when textbox value changed.
initialValueStringYESUsed for showing initial value in textbox.
obscureTextboolYESUsed for showing or hiding text. Default value = false
fontSizedoubleYESUsed for TextFormField font size. Default value = 18
hintFontSizedoubleYESUsed for TextFormField hint font size. Default value = 15
paddingLeftdoubleYESUsed for TextFormField Container padding left. Default value = 20
paddingRightdoubleYESUsed for TextFormField Container padding right. Default value = 20
paddingTopdoubleYESUsed for TextFormField Container padding top. Default value = 0
paddingBottomdoubleYESUsed for TextFormField Container padding bottom. Default value = 0
suffixIconWidgetYESUsed for TextFormField SuffixIcon Widget
borderRadiusdoubleYESUsed for TextFormField Border Radius. Default value = 30
borderColorColorYESUsed for TextFormField Border Color. Default value = Colors.redAccent
borderFocusColorColorYESUsed for TextFormField Border Focus Color. Default value = Colors.redAccent
showPrefixIconboolYESUsed for Show/Hide Prefix Icon. Default value = Colors.true
prefixIconIconYESUsed to show Prefix Icon
prefixIconColorColorYESUsed for PrefixIcon Color. Default value = Colors.redAccent
prefixIconPaddingLeftdoubleYESUsed for PrefixIcon Padding Left. Default value = 30
prefixIconPaddingRightdoubleYESUsed for PrefixIcon Padding Right. Default value = 10
prefixIconPaddingTopdoubleYESUsed for PrefixIcon Padding Top. Default value = 0
prefixIconPaddingBottomdoubleYESUsed for PrefixIcon Padding Bottom. Default value = 0
isMultilineboolYESUsed for making TextFormField Multiline. Default value = false
textColorColorYESUsed for TextFormField Text Color. Default value = Colors.black
hintColorColorYESUsed for TextFormField Hint Color. Default value = Colors.black
validationColorColorYESUsed for TextFormField Validations Color. Default value = Colors.redAccent
borderWidthdoubleYESUsed for Border Width. Default value = 2
focusedBorderWidthdoubleYESUsed for Focus Border Width. Default value = 2
enabledBorderWidthdoubleYESUsed for Enabled Border Width. Default value = 1
contentPaddingdoubleYESUsed for Content Padding. Default value = 6
multilineRowsdoubleYESUsed for Multiline Texbox no. of Rows. Default value = 4
isNumericdoubleYESUsed for Numeric Texbox for showing numeric keyboard. Default value = false
backgroundColorColorYESUsed for Texbox background color. Default value = Colors.transparent

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

ParameterTypeOptionalDescription
contextBuildContextNOPass the current build context.
labelNameStringNOLabelName will be used if using dropDownWidgetWithLabel method to show label with Dropdown.
hintTextStringNOUsed to show Hint Text in Dropdown
valueDynamicNOUsed for showing initial value in Dropdown.
lstDataList<dynamic>NODropdown list Data
onChangedFunction(String)YESFires when dropdown value changed.
onValidateFunction(String)NOFired on dropdown Validation
hintFontSizedoubleYESUsed for DropdownField hint font size. Default value = 15
borderColorColorYESUsed for DropdownField Border Color. Default value = Colors.redAccent
borderRadiusdoubleYESUsed for DropdownField Border Radius. Default value = 30
borderFocusColorColorYESUsed for DropdownField Border Focus Color. Default value = Colors.redAccent
paddingLeftdoubleYESUsed for DropdownField Container padding left. Default value = 20
paddingRightdoubleYESUsed for DropdownField Container padding right. Default value = 20
paddingTopdoubleYESUsed for DropdownField Container padding top. Default value = 0
paddingBottomdoubleYESUsed for DropdownField Container padding bottom. Default value = 0
optionValueStringYESUsed for DropdownField Option Value Column Mapping from Data Collection. Default value = id
optionLabelStringYESUsed for DropdownField Option Label Column Mapping from Data Collection. Default value = name
contentPaddingdoubleYESUsed for Content Padding. Default value = 6
validationColorColorYESUsed for TextFormField Validations Color. Default value = Colors.redAccent
textColorColorYESUsed for TextFormField Text Color. Default value = Colors.black
hintColorColorYESUsed for TextFormField Hint Color. Default value = Colors.black
borderWidthdoubleYESUsed for Border Width. Default value = 2
focusedBorderWidthdoubleYESUsed for Focus Border Width. Default value = 2
enabledBorderWidthdoubleYESUsed for Enabled Border Width. Default value = 1
suffixIconWidgetYESUsed for TextFormField SuffixIcon Widget
prefixIconIconYESUsed to show Prefix Icon
showPrefixIconboolYESUsed for Show/Hide Prefix Icon. Default value = Colors.true
prefixIconColorColorYESUsed for PrefixIcon Color. Default value = Colors.redAccent
prefixIconPaddingLeftdoubleYESUsed for PrefixIcon Padding Left. Default value = 30
prefixIconPaddingRightdoubleYESUsed for PrefixIcon Padding Right. Default value = 10
prefixIconPaddingTopdoubleYESUsed for PrefixIcon Padding Top. Default value = 0
prefixIconPaddingBottomdoubleYESUsed for PrefixIcon Padding Bottom. Default value = 0

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

ParameterTypeOptionalDescription
contextBuildContextNOPass the current build context.
columnsList<String>NOPass the column name in string array.
fieldsList<String>NOPass the field name in string array.
sortAscendingboolNOIf sorting in ascending order pass true else false.
sortColumnIndexnumberNOColumn index of sorting based on.
listOfDatadynamicNODataSource for the DataTable list.
onEditTapFunction(dyanmic)NOFires when an edit is tapped and model will be return.
onDeleteTapFunction(dyanmic)NOFires when an delete is tapped and model will be return.
onSortFunction(String, String, String)YESFires when an column is click for sorting and it will return columnIndex, columnName, ascending.
headingRowHeightnumberYESUsed for header row height. Default value = 45
headingRowColorColorYESUsed for header row color. Default value = Colors.redAccent
columnTextFontSizedoubleYESUsed for column Text font size. Default value = 15
columnTextBoldboolYESUsed for column Text bold. Default value = true
columnSpacingboolYESUsed for column spacing. Default value = 30
actionWidgetWidgetYESUsed for adding custom action button just like edit and delete icon.
onActionTapFunction(dyanmic)YESFires when an custom action button is tapped and model will be return.
actionEditWidgetboolYESUsed for making any custom Edit Widget
actionDeleteWidgetboolYESUsed for making any custom Delete Widget

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

ParameterTypeDescription
childWidgetAssign the widget need to show.
inAsyncCallboolVariable used to show or hide loader.
opacitydoubleUsed for transparency of background.

HexColor #

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

color: HexColor("#FC4136"),

Constructors Parameters

ParameterTypeDescription
hexColorStringHexCode for conversion.

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;
    },
),

Constructors Parameters

ParameterTypeDescription
totalImagesnumberSet the total number of images to be show.
imageSourceImagePickSourceChange the Image Source. Can be either  ImagePickSource.camera or ImagePickSource.gallery.
initialValueList<String>Used for showing default images.
onImageChangedFunction(List<Object>)Fires when an image is added or deleted.

Donate #

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

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

106
likes
110
pub points
94%
popularity

Publisher

verified publisher iconsnippetcoder.com

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

Homepage

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter, image_picker

More

Packages that depend on snippet_coder_utils