jr_extension 0.1.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 70

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

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

today you code like this

        ).withStyle(fontSize: 20, fontWeight: FontWeight.bold)
         .padding(left: 5, right: 5)

It is a very simple example,it has a lot of usages like this #

And it is very easy to underStand #

/// 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

Attention!!! Important for the best user experience #

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


You should code like this:


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


use like this

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

My other package: #


[0.1.5] - 2020.3.10 bug fixed [0.1.4] - 2020.3.8 bug fixed [0.1.3] - 2020.3.6 add onFeedBack , sliverBoxAdapter preferredSize extension [0.1.2] - 2020.3.3 update README [0.1.1] - 2020.3.2 to release


import 'package:example/pages/route_example_page.dart';
import 'package:example/pages/text_example_page.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:jr_extension/jr_extension.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      home: HomePage(),

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text('Example'),
      body: ListView(
        physics: const BouncingScrollPhysics(),
        children: <Widget>[
          _buildItem("Text使用示例", () {
            Navigator.push(context, TextExamplePage().withCupertinoRoute());
          _buildItem('路由相关示例', () {
            Navigator.push(context, RouteExamplePage().withCupertinoRoute());

  Widget _buildItem(String text, VoidCallback onTap) {
    return Row(
      children: <Widget>[
        Text(text).withStyle(fontSize: 20),

Use this package as a library

1. Depend on it

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

  jr_extension: ^0.1.5

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:jr_extension/jr_extension.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

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

  • Dart: 2.8.2
  • pana: 0.13.8-dev
  • Flutter: 1.17.1


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies