An awesome Flutter package with widget extension.

Related tags

Widgets jr_extension
Overview

Language: English | 中文简体

jr_extension

An awesome Flutter package with widget extension.

Why do I want to create this lib?

In SwiftUI framework created by apple,views use modifier to declare what the views look,which makes code readable. But in flutter,we usually use some nested code to setup the properties,making the code very ugly...

So today,I create this lib to avoid nested code as possible as I can,to make code readable and elegant.

Get started

import package in your dart file:

import 'package:jr_extension/jr_extension.dart';

In the past we coded like this

        SizeBox(
            height: 300,
            Padding(
            padding: const EdgeInsets.only(left: 5, right: 5),
            child: Text(
              'bulabula',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20,
              ),
            ),
          ),
      );

today you code like this

        Text(
          'bulabula',
        ).withStyle(fontSize: 20, fontWeight: FontWeight.bold)
         .padding(left: 5, right: 5)
         .withHeight(300),
         

Use animation easily

///API
withAnimation<double>(
    vsync: this,///widget's state ,with TickerProviderStateMixin
    tween: Tween(begin: num, end: 300.0),
    duration: Duration(seconds: 2),
    curve: Curves.linear,
    initialValue: 0.0,
    callBack: (value, per) {
      ///[value] is the animation 's value
      ///[per] is the value of controller ,in [0,1]
    });

It has a lot of usages like this

/// for all widgets
SizedBox withSize({double width = 0.0, double height = 0.0});
SizedBox withWidth(double width);
SizedBox withHeight(double height);
Expanded expand({int flex = 1});
DecoratedBox backgroundColor(Color color);
ClipRRect cornerRadius(double radius);
Padding padding({double top = 0.0,double left = 0.0,double bottom = 0.0,double right = 0.0});
Padding paddingAll(double padding);
Padding paddingSymmetric({double vertical = 0.0, double horizontal = 0.0});
Padding paddingTop(double top);
Padding paddingLeft(double left);
Padding paddingRight(double right);
Padding paddingBottom(double bottom);

GestureDetector onTap(VoidCallback onTap,
      {HitTestBehavior hitTestBehavior = HitTestBehavior.deferToChild});

Widget onFeedBackTap(VoidCallback onTap,
      {HitTestBehavior hitTestBehavior = HitTestBehavior.deferToChild,
      bool touchFeedBack = false});

GestureDetector onDoubleTap(VoidCallback onDoubleTap,
      {HitTestBehavior hitTestBehavior = HitTestBehavior.deferToChild});

GestureDetector onLongPress(VoidCallback onLongPress,
      {HitTestBehavior hitTestBehavior = HitTestBehavior.deferToChild});

SliverToBoxAdapter sliverBoxAdapter();

/// Example:
/// Navigator.push(context, YourPage().withCupertinoRoute());
///
CupertinoPageRoute withCupertinoRoute({bool fullscreenDialog = false});
MaterialPageRoute withMaterialRoute({bool fullscreenDialog = false});

///
/// YourWidget().tapToPushCupertinoPageRoute(context, YourPage());
///         
GestureDetector tapToPushCupertinoPageRoute(
    BuildContext context,
    Widget page, {
    bool rootNavigator = false,
    bool fullscreenDialog = false,
    Function(dynamic result) callback,
    HitTestBehavior hitTestBehavior,
  });

 GestureDetector tapToPushMaterialRoute(
    BuildContext context,
    Widget page, {
    bool rootNavigator = false,
    bool fullscreenDialog = false,
    Function(dynamic result) callback,
    HitTestBehavior hitTestBehavior,
  });

GestureDetector tapToPushNamed(
    String name,
    dynamic args,
    BuildContext context, {
    bool rootNavigator = false,
    Function(dynamic result) callback,
    HitTestBehavior hitTestBehavior,
  });


Widget visible(bool visible);
Widget opacity({@required double opacity});
Widget offset({@required Offset offset, bool transformHitTests = true});

Widget rotate(
      {@required double angle, bool transformHitTests = true, Offset origin});

Widget scale(
      {@required double scale,
      bool transformHitTests = true,
      Offset origin,
      Alignment alignment = Alignment.center});

Widget center({double heightFactor, double widthFactor});


PreferredSize preferredSize(Size size);


/// This extension works better especially for the page in PageView that will be kept alive
  /// example:
  ///  PageView.builder(itemBuilder: (BuildContext context, int index) {
  ///      return Page().keepAlive();
  ///    },);
  ///
Widget keepAlive(); 




/// useful only on Text 
Text withStyle({
    double fontSize = 14,
    FontWeight fontWeight,
    Color color,
    FontStyle fontStyle,
    Paint foreground,
    double wordSpacing,
    Color backgroundColor,
    Color decorationColor,
    TextDecoration textDecoration,
    TextDecorationStyle decorationStyle,
    double decorationThickness,
    List<Shadow> shadows,
    double letterSpacing,
    Locale locale,
    TextBaseline textBaseline,
    Paint background,
    String fontFamily,
    List<String> fontFamilyFallback,
    List<FontFeature> fontFeatures,
    String debugLabel,
    double height,
    bool inherit,
  });

/// for scrollController
animToTop();
animToBottom();
jumpToTop();
jumpToBottom();

Attention!!! Important for the best user experience

if you want your widget has exactly height and width, please don't use

yourWidget().withHeight(20).withWidth(20);

You should code like this:

yourWidget().withSize(height:20,width:20);

This rule is also valid for padding. Don't use:

yourWidget().paddingLeft(5).paddingRight(5);

use like this

yourWidget().padding(left: 5, right: 5);

My other package:

linked_scroll_widgets

You might also like...

Widget, that can make any static located widget hidable

Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Dec 16, 2022

A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

Dec 13, 2022

Flutter Package: When your desired layout or animation is too complex for Columns and Rows, this widget lets you position/size/rotate/transform its child in complex ways.

Flutter Package: When your desired layout or animation is too complex for Columns and Rows, this widget lets you position/size/rotate/transform its child in complex ways.

align_positioned Widgets in this package: AlignPositioned AnimatedAlignPositioned AnimChain Why are these widgets an indispensable tool? When your des

Dec 12, 2022

The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin.

The flutter_otp_text_field package for flutter is a TextField widget that allows you to display different style pin.

flutter_otp_text_field flutter_otp_text_field The flutter_otp_text_field package for flutter is a TextField widget that allows you to display differen

Nov 8, 2022

A flutter package for the OTP Field widget.

A flutter package for the OTP Field widget.

OTP Text Field A flutter package to create a OTP Text Field widget in your application. Stay tuned for the latest updates: 📱 Screenshots ⚙️ Installat

Oct 30, 2022

A flutter package to control rebuilds of a widget based on updates of a Listenable

A flutter package to control rebuilds of a widget based on updates of a Listenable. What is Grab? Grab is similar to ValueListenablebuiler or Animated

Dec 3, 2022

Flutter package which helps you to implement Ticket Widget in your app.

Flutter package which helps you to implement Ticket Widget in your app.

✨ Ticket Widget Flutter package which helps you to implement Ticket Widget in your app. The source code is 100% Dart, and it is an updated null safe v

Dec 30, 2022

Flutter Carousel Pro - A Flutter Carousel widget

Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

Dec 7, 2020

🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Oct 8, 2022
Owner
WenJingRui
Clouds wait for wind , while I pursue the dream
WenJingRui
A new Flutter package project for simple a awesome dialogs

awesome_dialog A new Flutter package project for simple and awesome dialogs Usage To use this package, add awesome_dialog as a dependency in your pubs

Marcos Rodriguez Toranzo 286 Jan 6, 2023
An Extension library for Flutter Widgets.

widget_extensions An Extension library for Flutter Widgets. Getting Started This Lib helps by providing utility functions for Flutter Widgets. These M

null 7 May 11, 2021
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
A flutter carousel widget, support infinite scroll, and custom child widget.

carousel_slider A carousel slider widget. Features Infinite scroll Custom child widgets Auto play Supported platforms Flutter Android Flutter iOS Flut

Bart T 1 Nov 25, 2021
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

WenJingRui 8 Oct 16, 2022
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Eduardo Muñoz 48 Dec 1, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Sameer Singh 6 Nov 25, 2022