jin_widget_helper 1.6.0

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

jin_widget_helper

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

Installation

Add this to pubspec.yaml

dependencies:
  jin_widget_helper: ^1.6.0

Widgets

Widget	Description
ActionButton	A Simple RaisedButton with loading notifier
BadgeButton	A small icon button with badge (like notification badge)
CupertinoOptionActionSheet	A Cupertino bottom sheet with option
ConditionalWidget	Provide a widget base on condition true or false
ConnectionChecker	A widget to check internet connection and provide onNoInternet callback
CustomBackButton	A custom back button with title (header)
FutureHandler	A FutureBuilder with less boilerplate code
JinAccordian	A customizable ExpansionTile
JinExpandable	A widget that can be toggle with top and bottom widget
JinConfirmationDialog	A dialog with cancel and confirm action
JinMediaCard	A customizable Card with media
JinLoadingButton	A Loading button without using ValueNotifier
JinLoadingDialog	A Class for showing dialog
JinPlatformChecker	Provide a widget base on Android or iOS platform
JinSimpleDialog	A simple alert dialog
MiniListTile	An easy customizable ListTile
PaginatedListView	A Listview.separated with pagination support
PaginatedGridView	A Gridview.builder with pagination support
SmallIconButton	A small alternative to Flutter's IconButton
SmallFlatButton	A small alternative to Flutter's FlatButton
SpaceX	SizedBox with only width
SpaceY	SizedBox with only height
StreamHandler	A Streambuilder with less boilerplate code
ValueObserver	A 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

BuildContext extension

  Size screenSize = context.screenSize;
  Color primaryColor = context.primaryColor;
  Color accentColor = context.accentColor;
  TextTheme textTheme = context.textTheme;

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

DotTabIndicator

  TabBar(
      ...
      indicator: DotTabIndicator(
        color: Colors.blue,
        dotAlignment: DotAlignment.Bottom,
      )
      ...
  )

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 and JinNavigator

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