liquidsoft_components

Description:

liquidsoft components

liquidsoft_components #
---Currently in beta testing---
A lightweight but complete component package to get your flutter project off the ground. Provides an HTTP Caller, Global Error Handling, large set of useful methods, along with dynamic Cupertino/Material widgets based on device platform.
Works with: iOS, Android, Web, macOS and all other flutter platforms
The images below show one of the main widgets, LiquidScaffold.
LiquidScaffold - Creates the Bottom Navigation Bar, the top AppBar, and the action buttons based on platform. The same code created both of the below layouts, one for iOS and the other for Android. A user of your app will expect native layouts and actions, the LiquidSoft Component library makes this easy.


Documentation: Find a complete set of documentation on our website - https://liquidsoft.io/flutter-components/
Features #

HTTP Caller with error handling

Get, Post, Delete, Patch
Checks for connectivity on timeout (timeout set on init)

Throws connectivity error if connected to network but no internet access
Throws standard error on else


Returns back status code and error code dialog on error
if in debug mode throws error and prints out body


HTTP Error Handling

HTTP Errors
Connectivity Errors


Global Errors Handling

Debug prints error to console
Production

Catches errors and prints error out to dialog
Emails error to a given email address




Get Platform Type or Group

Group - web, mobile, desktop, or unknown
Type - Web, iOS, Android, MacOS, Fuchsia, Linux, Windows, or Unknown
Structured to not error on web


Hex Conversion

converts Hex codes to Colors


Dollar Formatting

easily format a number into a dollar string
534223.45 => $534,223.45


Number Formatting

format a number into a format
optional format and local inputs
Standard format = "###.0#"
Standard locale = 'en_US'
123.9847736274 => 123.98


Page Routing

Material or Cupertino Page Route based on Platform
Web defaults to Material


SnackBar

Easily call snackBar from anywhere in the app


Scaffold

Create a Material or Cupertino Scaffold
Optional Material AppBar or Cupertino Sliver AppBar

Uses LiquidLogo() to add logo to the left side of the appBar


Optional Material or Cupertino Bottom Nav Bar
Creates Floating action button or Cupertino action sheet
Pass in NavBarItems list and it will create the appBar, NavBar,actions buttons, and body for you :-)


App Bar

Creates a Material or Cupertino appbar
Uses LiquidLogo() to add logo to the left side of the appBar
Allows for a trailing Widget
Pass in the screen body


Secondary App Bar

Create a Material or Cupertino appBar with back transition arrow
Centered page name
Dynamic trailing widget


Standard Dialog

Opens a cupertino or material dialog
Standard dialog with an OK button


Approval Dialog

Opens a cupertino or material dialog
Used for standard approvals, like deletions
Approve or Deny
Pass in a approveCallback function


LiquidButton

Cupertino or Material button
adjust width, height,font size, and background color


DatePicker

Cupertino Date Wheel or Material Date Picker


Dropdown

Cupertino Picker or Material Dropdown


Header

Simple Header color, font sizes attributes


Logo

Returns logo based on dark or light theme


Multi-Text Field

Multiple line text field
Keyboard types, maxLines, editable, validation,focusNodes and more


Text Field

Single line text field
Suffix and Prefix Icons
Keyboard types, focusNodes, validation and more


Spinner

Cupertino or Material Spinner
Provide Text for loading context


Toggle Bar

Horizontal tab interface capable of handing any number of inputs.
Easily customize colors with an easy to use set of attributes.


Switch

Cupertino or Material Switch
customize colors and size


Search Bar

Cupertino or Material Seach Bar



Please check out each example for implementation details on each widget
Getting Started #
Add liquidsoft_components to your pubspec.yaml
dependencies:
liquidsoft_components: ^1.0.0

copied to clipboard
Import liquidsoft_components to main.dart file
// This file exports all of the components
import 'package:liquidsoft_components/liquid_components.dart';

// You can also import each widget or service directly
import 'package:liquidsoft_components/services/liquidServices.dart';
import 'package:liquidsoft_components/services/platformInfo.dart';
import 'package:liquidsoft_components/widgets/liquidApproveDialog.dart';
import 'package:liquidsoft_components/widgets/liquidButton.dart';
import 'package:liquidsoft_components/widgets/liquidDate.dart';
import 'package:liquidsoft_components/widgets/liquidDropdown.dart';
import 'package:liquidsoft_components/widgets/liquidHeader.dart';
import 'package:liquidsoft_components/widgets/liquidLogo.dart';
import 'package:liquidsoft_components/widgets/liquidMultiText.dart';
import 'package:liquidsoft_components/widgets/liquidScaffold.dart';
import 'package:liquidsoft_components/widgets/liquidSecondaryAppBar.dart';
import 'package:liquidsoft_components/widgets/liquidSmallButton.dart';
import 'package:liquidsoft_components/widgets/liquidSpinner.dart';
import 'package:liquidsoft_components/widgets/liquidText.dart';
import 'package:liquidsoft_components/widgets/liquidToggleBar.dart';

copied to clipboard
Initialize liquidsoft_components
LiquidSoftComponents is the base widget to use in your Main function. The rootWidget parameter takes your applications root and sets up the global error handling along with the http caller.
/// This is a basic implementation - see all attributtes below
LiquidSoftComponents(
rootWidget: ExampleApp(),
httpHeaders: {
"Access-Control-Allow-Origin": '*',
"accept": "application/json",
"content-type": "application/json",
},
errorAdminEmail: '[email protected]',
isDebug: isDebug,
logoLocationLight: 'assets/lightLogo.png',
logoLocationDark: 'assets/darkLogo.png',
);

copied to clipboard
All Initialization attributes

bool isDebug

drives the outcome of the http and other error handling


String logoLocationLight || String logoLocationDark

Logo Location for each theme type
Used by the LiquidLogo widget
Used by the LiquidScaffold


Map<String, String> httpHeaders

Headers to be passed via http call


String errorAdminEmail

Email to be notified on a production error


String generalErrorHeader

Dialog header for general errors


String generalPreErrorMessage

Dialog body text pre error code message


String generalPostErrorMessage

Dialog body text post error code message


String httpErrorHeader

Dialog header for http errors


String httpPreErrorMessage

Dialog body text pre error code message


String httpPostErrorMessage

Dialog body text post error code message


String connectivityErrorHeader

Dialog header for connectivity errors


String connectivityErrorMessage

Dialog body text for connectivity errors



Documentation #

Complete set of documentation

https://liquidsoft.io/flutter-components/


Check out the example project on our github site

https://github.com/cwesterhold/liquidsoft_components



*** Services ***


HTTP Caller with error handling

Get, Post, Delete, Patch
Checks for connectivity on timeout (timeout set on init)

Throws connectivity error if connected to network but no internet access
Throws standard error on else


Returns back status code and error code dialog on error
if in debug mode throws error and prints out body

Basic implementation of the http caller


LiquidHTTPCaller _httpCaller = LiquidHTTPCaller();

// Get
Future<List<Accounts>> getAccounts() async {
var url = 'https://someAPI.com/accountsModel/';
var data = await _httpCaller.getData(url);
var obj = accountsFromJson(data);
return obj;
}
// Post
createUserLog(userId, platform, logInDate) async {
var url = 'https://someAPI.com/userLogModel/';
await _httpCaller.postData(url, {
"userId": userId,
"platform": platform,
"loginDate": logInDate,
});
}
// Patch
updateUserReview(String reviewStatus) async {
var url = 'https://someAPI.com/userModel/updateUserReview';

var data = await _httpCaller.postData(url, {
"userId": userId,
"userReviewStatus": reviewStatus,
});
}
// Delete
void deleteIncome(Income income) async {
var url = 'https://someAPI.com/incomeModel/' + income.incomeId.toString();
var data = await _httpCaller.deleteData(url);
}
copied to clipboard

Error Handling

LiquidSoftService _liquidService = LiquidSoftService();

// Use the catchError method in try/catch blocks or anywhere you want to catch an error
// This will print to the console in debug and show a dialog/send and email in production

_liquidService.catchError(details.exception.toString());

copied to clipboard


Get Platform Type or Group

Group - web, mobile, desktop, or unknown
Type - Web, iOS, Android, MacOS, Fuchsia, Linux, Windows, or Unknown
Structured to not error on web

Each getter will return one of two enums

enum PlatformType { Web, iOS, Android, MacOS, Fuchsia, Linux, Windows, Unknown }
enum PlatformGroup { web, mobile, desktop, unknown }



LiquidSoftService _liquidService = LiquidSoftService();

_liquidservice.getPlatformGroup == PlatformGroup.web;

_liquidService.getPlatformType == PlatformType.iOS;

copied to clipboard

Hex Conversion

converts Hex codes to Colors



// To use, just instantiate the HexColor Class

ThemeData light = ThemeData(
brightness: Brightness.light,
primaryColor: HexColor('#FFCD38'),
primaryColorDark: HexColor('#AE7849'),
primaryColorLight: Colors.black12,
);
copied to clipboard

Dollar Formatting

easily format a number into a dollar string
534223.45 => $534,223.45



//make sure to instantiate the service
LiquidSoftService _liquidService = LiquidSoftService();

Text(
'${_liquidService.getDollarFormat(235223.00)}',
style: TextStyle(fontSize: 16),
)

// output $234,223.00

copied to clipboard

Number Formatting

format a number into a format
optional format and local inputs
Standard format = "###.0#"
Standard locale = 'en_US'
123.9847736274 => 123.98



//make sure to instantiate the service
LiquidSoftService _liquidService = LiquidSoftService();

Text(
'${_liquidService.numberFormat(123.132232323)}',
style: TextStyle(fontSize: 16),
)

//output 123.13

copied to clipboard

Page Routing

Material or Cupertino Page Route based on Platform
Web defaults to Material



//make sure to instantiate the service
LiquidSoftService _liquidService = LiquidSoftService();

_liquidService.routePage(context,
TheNewScreenToRouteToo(),
);
copied to clipboard

SnackBar

Easily call snackBar from anywhere in the app



//make sure to instantiate the service
LiquidSoftService _liquidService = LiquidSoftService();

_liquidService.showSnackBar(context, 'Refreshing transactions is complete');
copied to clipboard
*** Widgets ***
Find complete examples of each in our example project or on our website - https://liquidsoft.io/flutter-components/

Scaffold

Create a Material or Cupertino Scaffold
Optional Material AppBar or Cupertino Sliver AppBar

Uses LiquidLogo() to add logo to the left side of the appBar


Optional Material or Cupertino Bottom Nav Bar
Creates Floating action button or Cupertino action sheet
Pass in NavBarItems list and it will create the appBar, NavBar,actions buttons, and body for you :-)


App Bar

Creates a Material or Cupertino appbar
Uses LiquidLogo() to add logo to the left side of the appBar
Allows for a trailing Widget
Pass in the screen body


Standard Dialog

Opens a cupertino or material dialog
Standard dialog with an OK button


Approval Dialog

Opens a cupertino or material dialog
Used for standard approvals, like deletions
Approve or Deny
Pass in a approveCallback function


LiquidButton

Cupertino or Material button
adjust width, height,font size, and background color


DatePicker

Cupertino Date Wheel or Material Date Picker


Dropdown

Cupertino Picker or Material Dropdown


Header

Simple Header color, font sizes attributes


Logo

Returns logo based on dark or light theme


Multi-Text Field

Multiple line text field
Keyboard types, maxLines, editable, validation,focusNodes and more


Text Field

Single line text field
Suffix and Prefix Icons
Keyboard types, focusNodes, validation and more


Spinner

Cupertino or Material Spinner
Provide Text for loading context


Toggle Bar

Horizontal tab interface capable of handing any number of inputs.
Easily customize colors with an easy to use set of attributes.


Switch - Coming soon

Cupertino or Material Switch
customize colors and size


Search Bar - Coming Soon

Contributors Welcome #

Want to help out? You're more than welcome!
Fork the repo and send us a PR
Or if you want join as a contributor/maintainer, reach out to [email protected]

Change Log #
Check out the CHANGELOG.md file updates
Authors - LiquidSoft.io #

Chris Westerhold - Initial work - (https://github.com/cwesterhold)

License #
This project is licensed under the MIT License - see the LICENSE file for details