jin_widget_helper 1.3.7

  • Readme
  • Changelog
  • Example
  • Installing
  • 78

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

Widgets #

WidgetDescription
ActionButtonA Simple RaisedButton with loading notifier
BadgeButtonA small icon button with badge (like notification badge)
ChoiceBottomSheetA Cupertino bottom sheet
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
JinConfirmationDialogA dialog with cancel and confirm action
JinPlatformCheckerProvide a widget base on Android or iOS platform
JinSimpleDialogA simple alert dialog
MiniListTleAn easy customizable ListTile
SmallIconButtonA small alternative to Flutter's IconButton
SmallFlatButtonA small alternative to Flutter's FlatButton
SpaceXSizedBox with width (equivalent to JinWidget.horizontalSpace())
SpaceYSizedBox with height (equivalent to JinWidget.verticalSpace())
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();
  }
}

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".firstUpperCase() // => 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 #

JinWidget.verticalSpace(12) //A SizedBox with value as height, default value is 8
JinWidget.horizontalSpace(16) //A SizedBox with value as width, default value is 8
RoundedRectangleBorder roundRectangle = JinWidget.roundRect(12);
BorderRadius radius = JinWidget.radius(12); //default value is 8

Todo #

[0.0.1] - 13 April 2020 #

  • Initial release

[0.0.2] - 13 April 2020 #

  • Add Action Button

[0.1.1] - 14 April 2020 #

  • Add Example and documentation

[1.0.0] - 14 April 2020 #

  • Add Connection checker
  • Add App extension
  • Add Badge Button
  • Add Form validator
  • Add General Dialog
  • Add Custom back button

[1.0.1] - 14 April 2020 #

  • fix intl package

[1.0.2] - 14 April 2020 #

  • update README.md

[1.0.3] - 14 April 2020 #

  • Add License

[1.0.4] - 15 April 2020 #

  • Add new example

[1.0.5] - 16 April 2020 #

  • Change WidgetHelper to UIHelper

[1.0.6] - 17 April 2020 #

  • Add textstyle extension

[1.0.11] - 22 April 2020 #

  • Fix connection checker error

[1.1.0] - 30 April 2020 #

  • Add FutureHandler
  • Add Widget extension
  • Refractor some code

[1.1.1] - 30 April 2020 #

  • Fix import

[1.1.2] - 30 April 2020 #

  • Add ChoiceBottomSheet

[1.1.3] - 1 May 2020 #

  • Add CssSpace

[1.2.0] - 5 May 2020 #

  • Minor fix and improvement
  • Add MiniListTile
  • Add Valuehandler
  • Add More extension
  • Update README

[1.2.1] - 13 May 2020 #

  • Add textColor to Widget Extension
  • Add fromRGB in ColorUtils
  • Add SpaceX and SpaceY
  • Add radius to UIHelper

[1.2.1+1] - 13 May 2020 #

  • Bug fixes

[1.2.1+2] - 13 May 2020 #

  • Fix ActionButton bugs

[1.2.2] - 15 May 2020 #

  • Add more documentation and breaking change on FormValidator

[1.2.2+1] - 15 May 2020 #

  • Fix Future and Stream bugs

[1.3.0] - 20 May 2020 #

  • Breaking change on UIHelper (change to JinWidget)
  • Breaking change on ColorUtils (change to JinColorUtil)
  • Breaking change on GeneralMessageDailog (change to JinSimpleDialog)
  • Other code improvement

[1.3.1] - 25 May 2020 #

  • Add icon field to ActionButton
  • Minor bug fix and improvement

[1.3.2] - 3 June 2020 #

  • Minor bug fix and improvement

[1.3.3] - 10 June 2020 #

  • Minor bug fix and improvement
  • Add validateNumber to FormValidator
  • Add SmallFlatButton
  • Breaking change: ValueHandler has been rename to ValueObserver

[1.3.4] - 15 June 2020 #

  • Minor bug fix and improvement
  • Add JinNavigator

[1.3.5] - 19 June 2020 #

  • Minor bug fix and improvement
  • Add JinPlatformChecker
  • Add JinConfirmationDialog
  • Organize files

[1.3.5+1] - 23 June 2020 #

  • Fix ConnectionChecker bugs
  • Fix code format

[1.3.6] - 25 June 2020 #

  • Add AfterBuildMixin
  • Add ConditionalWidget
  • Fix JinConfirmationDialog bugs

[1.3.7] - 3 July 2020 #

  • Add more Formvalidator
  • Add marginValue and paddingValue
  • Fix ConnectionChecker's bug on iOS

example/lib/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:jin_widget_helper/jin_widget_helper.dart';
import 'new_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Jin Widget Helper',
      navigatorKey: JinNavigator.navigatorKey,
      theme: ThemeData(
        primarySwatch: JinColorUtils.hexColorToMaterialColor(0xff08f7ff),
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool stretch = true;
  ValueNotifier<bool> isLoading = ValueNotifier(false);
  StreamController<int> streamController = StreamController.broadcast();
  int _counter = 0;
  final listTileSelected = false.obs<bool>();

  void onButtonClick() async {
    isLoading.value = true;
    await Future.delayed(Duration(milliseconds: 2000));
    isLoading.value = false;
    JinNavigator.push(NewPage());
  }

  void _onIncrement() async {
    streamController.add(null);
    await Future.delayed(Duration(milliseconds: 200));
    _counter += 1;
    streamController.add(_counter);
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    streamController.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ConnectionChecker(
        reactToConnectionChange: false,
        onConnectionChange: (value) {
          print("On Connection change: $value");
        },
        onNoInternet: (message) {
          return FlatButton.icon(
            icon: Icon(Icons.error),
            label: Text(message),
            onPressed: () {},
          );
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            //custom back button with header
            CustomBackButton(
              onTap: () {},
              headerAlignment: Alignment.centerLeft,
              header: "Jin Widget Helper",
            ),
            JinWidget.verticalSpace(16),
            //date format extension
            Text(
                "Today date is ${DateTime.now().formatToLocalDate("dd MMMM yyyy hh:mm a")}"),
            JinWidget.verticalSpace(16),
            //action button
            ActionButton(
              stretch: false,
              loadingColor: Colors.white,
              color: JinColorUtils.getColorFromCode("03e2ff"),
              isLoading: isLoading,
              icon: Icon(Icons.add),
              onPressed: onButtonClick,
              child: Text("View Form Validation Page"),
              shape: StadiumBorder(),
            ),
            JinWidget.verticalSpace(16).cssSpacing(margin: [0, 16]),
            //streamhandler
            StreamHandler<int>(
              stream: streamController.stream,
              initialData: _counter,
              error: (error) => Text(error),
              ready: (number) {
                return Column(
                  children: <Widget>[
                    //badge button
                    BadgeButton(
                      icon: Icon(Icons.notifications_active),
                      badgeColor: Colors.red,
                      badgeText: "$_counter",
                      onTap: () {
                        _counter = 0;
                        streamController.add(_counter);
                      },
                      showBadge: _counter != 0,
                    ),
                    Text("You click the Add button $number times"),
                  ],
                );
              },
            ),
            JinWidget.verticalSpace(32),
            //small icon button
            SmallIconButton(
              icon: Icon(
                Icons.add,
                color: Colors.white,
              ),
              margin: EdgeInsets.zero,
              borderRadius: 16,
              elevation: 1.0,
              backgroundColor: Theme.of(context).primaryColor,
              onTap: _onIncrement,
            ),
            JinWidget.verticalSpace(32),
            //Mini listtile
            ValueObserver<bool>(
              valueNotifier: listTileSelected,
              child: (selected) => MiniListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage(
                      JinUtils.randomCategoryStringImage(category: "cat")),
                ),
                margin: EdgeInsets.zero,
                padding: EdgeInsets.all(18),
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black12),
                ),
                title: ConditionalWidget(
                  condition: selected,
                  onTrue: Text(
                    "This is a long mini listitle title that use to check if it can be overflow",
                  ),
                  onFalse: Text("Title has been hidden"),
                ),
                subtitle: Text("Click the checkbox to show or hide title"),
                trailing: Checkbox(
                  onChanged: (value) {
                    listTileSelected.value = value;
                  },
                  value: selected,
                ),
              ),
            ),
            SmallFlatButton(
              child: Text("Small Flat Button"),
              onTap: () {},
              textColor: Colors.white,
              margin: EdgeInsets.symmetric(vertical: 16),
              backgroundColor: Colors.red,
            ),

            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.black),
                color: Colors.black12,
              ),
              child: Text("Padding value and Margin Value")
                  .paddingValue(horizontal: 16, vertical: 8),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          RaisedButton(
            color: Colors.deepOrange,
            textColor: Colors.white,
            shape: StadiumBorder(),
            onPressed: () {
              JinNavigator.dialog(
                  JinSimpleDialog(content: "Hello from my dialog"));
            },
            child: Text("Simple dialog"),
          ),
          RaisedButton(
            color: Colors.deepOrange,
            textColor: Colors.white,
            shape: StadiumBorder(),
            onPressed: () {
              JinNavigator.dialog(
                JinConfirmationDialog(
                  content: Text("Are you sure you want to delete this?"),
                  onCancel: () => print("Cancel option"),
                  onConfirm: () => print("confirm option"),
                ),
              );
            },
            child: Text("Confirmation dialog"),
          ),
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  jin_widget_helper: ^1.3.7

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:jin_widget_helper/jin_widget_helper.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
55
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
78
Learn more about scoring.

We analyzed this package on Jul 10, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform linux

Because:

  • package:jin_widget_helper/jin_widget_helper.dart that imports:
  • package:jin_widget_helper/src/widgets/connection_checker.dart that imports:
  • package:connectivity/connectivity.dart that declares support for platforms: android, ios, macos, web

Package does not support Flutter platform windows

Because:

  • package:jin_widget_helper/jin_widget_helper.dart that imports:
  • package:jin_widget_helper/src/widgets/connection_checker.dart that imports:
  • package:connectivity/connectivity.dart that declares support for platforms: android, ios, macos, web

Package not compatible with SDK dart

Because:

  • jin_widget_helper that is a package requiring null.

Package not compatible with runtime flutter-web on web

Because:

  • package:jin_widget_helper/jin_widget_helper.dart that imports:
  • package:jin_widget_helper/src/utils/jin_widget.dart that imports:
  • dart:io

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
connectivity ^0.4.8+2 0.4.9
flutter 0.0.0
intl ^0.16.0 0.16.1
Transitive dependencies
collection 1.14.12 1.14.13
connectivity_for_web 0.3.0
connectivity_macos 0.1.0+3
connectivity_platform_interface 1.0.6
flutter_web_plugins 0.0.0
js 0.6.2
meta 1.1.8 1.2.2
path 1.7.0
plugin_platform_interface 1.0.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test