jin_widget_helper

pub package

A package that contain many UI and Utility helper that help decrease your development time on creating custom Widget.

Installation

Add this to pubspec.yaml

dependencies:
  jin_widget_helper: ^1.5.0

Widgets

WidgetDescription
ActionButtonA Simple RaisedButton with loading notifier
BadgeButtonA small icon button with badge (like notification badge)
CupertinoOptionActionSheetA Cupertino bottom sheet with option
ConditionalWidgetProvide a widget base on condition true or false
ConnectionCheckerA widget to check internet connection and provide onNoInternet callback
CustomBackButtonA custom back button with title (header)
FutureHandlerA FutureBuilder with less boilerplate code
JinAccordianA customizable ExpansionTile
JinExpandableA widget that can be toggle with top and bottom widget
JinConfirmationDialogA dialog with cancel and confirm action
JinMediaCardA customizable Card with media
JinLoadingButtonA Loading button without using ValueNotifier
JinLoadingDialogA Class for showing dialog
JinPlatformCheckerProvide a widget base on Android or iOS platform
JinSimpleDialogA simple alert dialog
MiniListTileAn easy customizable ListTile
PaginatedListViewA Listview.separated with pagination support
PaginatedGridViewA Gridview.builder with pagination support
SmallIconButtonA small alternative to Flutter's IconButton
SmallFlatButtonA small alternative to Flutter's FlatButton
SpaceXSizedBox with only width
SpaceYSizedBox with only height
StreamHandlerA Streambuilder with less boilerplate code
ValueObserverA ValueListenableBuilder with lest boilerplate code

Mixin

AfterBuildMixin

class _HomePageState extends State<NewPage> with AfterBuildMixin {

  //this method will call after widget has been build
  @override
  void afterBuild(BuildContext context) {

  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

FormMixin

field and attribute

  • formKey: a key for form
  • loadingNotifier: a bool ValueNotifier
  • passwordObsecureNotifier: a bool ValueNotitifer for toggling password obsecure field
  • isFormValidated: a bool return by validate formKey

method

  • toggleLoading: toggle loadingNotifier
  • togglePasswordObsecure: toggle passwordObsecureNotifier
class _HomePageState extends State<NewPage> with FormMixin {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Widget's Extension

padding, margin

Text("Hello Flutter").padding(EdgeInsets.all(16.0)) // defaulat value is EdgeInsets.all(8.0)
Text("Hello Flutter").margin(EdgeInsets.all(16.0)) // defaulat value is EdgeInsets.all(8.0)
///As a value
Text("Hello Flutter").marginValue(all: 12)
Text("Hello Flutter").paddingValue(horizontal: 12, vertical: 8)

cssSpacing

Text("Hello Flutter").cssSpacing(margin: [10,10], padding:[16])
//css margin and padding rule

rotate (in degree)

Text("Hello Flutter").rotate(45)

flexible, expanded, clipOval, opacity

Text("Hello Flutter").flexible
Text("Hello Flutter").expanded
Text("Hello Flutter").clipOval
Text("Hello Flutter").opacity(0.5)

TextStyle Extention

Text("Hello Flutter", style: TextStyle().normal)
Text("Hello Flutter", style: TextStyle().medium)
Text("Hello Flutter", style: TextStyle().bold)
Text("Hello Flutter", style: TextStyle().applyColor(Colors.white))
Text("Hello Flutter", style: TextStyle().applFontSize(24))

Other Extension

DateTime extension

DateTime.now().format("dd mmm yyyy")
DateTime.now().isTheSameDay(DateTime.now())
DateTime.now().formatToLocalDate("dd mmm yyyy")

String extension

String name = "chunlee".capitalize() // => Chunlee

Object extension

var count = 1.obs<int>();
//equivalent to: ValueNotifier count = ValueNotifier<int>(1);

Utility Class

ColorUtils

Color green = ColorUtils.getColorFromCode("42f545")
Color newColor = ColorUtils.fromRGB(8, 182, 155)
MaterilColor newMaterialColor = ColorUtils.hexColorToMaterialColor(0xFF869CF4)

JinUtils

Future<Uint8List> imageByte = await JinUtils.getBytesFromAsset("image asset path", 200); //200 is imagewidth
String carUrlImage =  JinUtils.randomCategoryStringImage(dimension: 200, category: "car"); //get image url with given dimension and category
String randomUrlImage = JinUtils.randomStringImage(200); //get random image url with given dimension

FormValidator

TextFormField(
validator: (value) => JinFormValidator.validateEmail(value),
// check JinValidator class for more field validator
)

PageNavigator support push, pushReplacement and pushAndRemove method

PageNavigator.push(context, DetailPage());
PageNavigator.pushReplacement(context, HomePage());
PageNavigator.pushAndRemove(context, RootPage());

JinNavigator also support push, pushReplacement, pushAndRemove without providing a context but you need to add JinNavigator.navigatorKey to MaterialApp

MaterialApp(
    ...
    navigatorKey: JinNavigator.navigatorKey,
    ...
    home: MyHomePage(),
)
JinNavigator.push(DetailPage());
JinNavigator.pushReplacement(HomePage());
JinNavigator.pushAndRemove(RootPage());

JinNavigator also can show dialog without providing a context

var result = await JinNavigator.dialog(MyDialog());

JinWidget

RoundedRectangleBorder roundRectangle = JinWidget.roundRect(12);
BorderRadius radius = JinWidget.radius(12); //default value is 8

Libraries

jin_widget_helper