uiblock

pub package publisher pub package GitHub Stars Platform

Buy Me A Coffee

Easiest and simplest method to block/unblock ui for your flutter apps.

One line of code to block/unblock ui and stop user from navigating during loading or processing in your flutter apps. You could use it as a widget or directly as a global service/util.

  • Fully customizable
  • Android and IOS
  • Easy and Simple
  • No other dependencies
  • Well documented
  • Production ready

Installation

With null-safety

      dependencies:
        uiblock: ^2.0.1

Without null-safety

      dependencies:
        uiblock: 1.2.0

Getting Started

Add the dependency to your project and start using uiblock everywhere:

Import the package.

import 'package:uiblock/uiblock.dart';

To block ui

 // default
 UIBlock.block(context);
 
 //OR

 // if using globalKey
 UIBlock.block(_scaffoldGlobalKey.currentContext);

To unblock ui

 // call unblock after blockui to dissmiss
 UIBlock.unblock(context);

 //OR

 // if using globalKey
 UIBlock.unblock(_scaffoldGlobalKey.currentContext);

#

Using as a widget

//toggle showLoader to block/unblock
FlatButton(
    child: Text('Load Async'),
    onPressed: () {
        setState(() {
            showLoader = !showLoader;
        });
    },
),

 // easily create custom block ui body
 Container(
    height: _height,
    child: UIBlock(
        loadingStateFromFuture: () async {
        if (showLoader) {
            // return null, to block ui
            return null;
        }
        // unblocks ui on hasData or hasError
        return Future.value(Random().nextInt(200));
        },
        barrierColor: Colors.blueGrey,
        barrierOpacity: 0.2,
        loadingTextWidget: Text('Loading data...'),
        hideBuilderOnNullData: true,
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
            return Center(child: Text('Async Data ${snapshot.data}'));
        },
    ),
 );

#

Blocking with text

UIBlock.block(
    _scaffoldGlobalKey.currentContext,
    canDissmissOnBack: true,
    loadingTextWidget: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
        'Press back to dissmiss',
        textAlign: TextAlign.center,
        style: TextStyle(
            color: Colors.white,
            fontSize: 18.0,
            fontWeight: FontWeight.w600,
        ),
        ),
    ),
);

Creating using child builder

 // easily create custom block ui body
 UIBlock.block(
     _scaffoldGlobalKey.currentContext,
    backgroundColor: Colors.green.withOpacity(0.5),
    imageFilter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
    childBuilder: (BuildContext context) {
        // return your widget here
    },
 );

 // Don't forget to call unblock after block :)

Creating custom block modal transitions (only applicable on static UIBlock.block)

// NOTE : only for on UIBlock.block as this uses Modal Barrier
// widget block is inline widget replacement with loader widget

UIBlock.block(
    //...
    // more code
    customBuildBlockModalTransitions:
        (context, animation, secondaryAnimation, child) {
        return RotationTransition(
            turns: animation,
            child: child,
        );
    },
    // ...
);

Using with data return

 // NOTE : canDissmissOnBack is alaways true
  var result = await UIBlock.blockWithData(
            _scaffoldGlobalKey.currentContext,
            loadingTextWidget: Padding(
                padding: const EdgeInsets.all(8.0),
                child: FlatButton(
                onPressed: () {
                    // unblock and return data
                    UIBlock.unblockWithData(context, "hello world");
                },
                child: Text(
                        'Press here to dissmiss with data. Back for null',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                        color: Colors.white,
                        fontSize: 18.0,
                        fontWeight: FontWeight.w600,
                        ),
                    ),
                ),
            ),
        );

    print(result);

For more details have a look at the other examples.

#

Properties

PropertyTypeDefaultNote
context (required)BuildContext-
childBuilderFunction-
customLoaderChildWidget-
loadingTextWidgetWidget-
imageFilterImageFilter-
backgroundColorColorTransparent
canDissmissOnBackboolfalse
safeAreaLeftbooltrueSet as 'false' to disable 'Left' Safe Area
safeAreaTopbooltrueSet as 'false' to disable 'Top' (usually status bar) Safe Area
safeAreaRightbooltrueSet as 'false' to disable 'Right' Safe Area
safeAreaBottombooltrueSet as 'false' to disable 'Bottom' Safe Area
safeAreaMinimumPaddingEdgeInsetsEdgeInsets.zero
safeAreaMaintainBottomViewPaddingboolfalse
isSlideTransitionDefaultbooltrueToggle between slide or fade transition
buildBlockModalTransitionsFunction-Use this to create custom transition other than fade/slide

Widget Properties

PropertyTypeDefault
builderFunctionyou implement it
loadingStateFromFutureFuture Function()your future function (APIs,etc)
loaderBuilderFunction-
customLoaderChildWidget-
loadingTextWidgetWidget-
offsetoffset-
barrierOpacitydouble0.4
barrierColorColorblack45
canDismissboolfalse
hideBuilderOnNullDataboolfalse

#

Improve

Help me by reporting bugs, submit new ideas for features or anything else that you want to share.

  • Just write an issue on GitHub. ✏️
  • And don't forget to hit the like button for this package ✌️

More

Check out my other useful packages on pub.dev

Libraries

default_uiblock_loader
uiblock
uiblock_modal