jin_widget_helper 1.5.0

Flutter Android iOS

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

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
6
likes
90
pub points
67%
popularity

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

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

chunlee.thong@gmail.com

License

MIT (LICENSE)

Dependencies

connectivity, flutter, intl

More

Packages that depend on jin_widget_helper