hey24sheep/uiblock

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

https://github.com/hey24sheep/uiblock/raw/master/screenshots/example5.gif https://github.com/hey24sheep/uiblock/raw/master/screenshots/example1.gif https://github.com/hey24sheep/uiblock/raw/master/screenshots/example2.gif https://github.com/hey24sheep/uiblock/raw/master/screenshots/example3.gif https://github.com/hey24sheep/uiblock/raw/master/screenshots/example4.gif

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

Property	Type	Default	Note
context (required)	BuildContext	-
childBuilder	Function	-
customLoaderChild	Widget	-
loadingTextWidget	Widget	-
imageFilter	ImageFilter	-
backgroundColor	Color	Transparent
canDissmissOnBack	bool	false
safeAreaLeft	bool	true	Set as 'false' to disable 'Left' Safe Area
safeAreaTop	bool	true	Set as 'false' to disable 'Top' (usually status bar) Safe Area
safeAreaRight	bool	true	Set as 'false' to disable 'Right' Safe Area
safeAreaBottom	bool	true	Set as 'false' to disable 'Bottom' Safe Area
safeAreaMinimumPadding	EdgeInsets	EdgeInsets.zero
safeAreaMaintainBottomViewPadding	bool	false
isSlideTransitionDefault	bool	true	Toggle between slide or fade transition
buildBlockModalTransitions	Function	-	Use this to create custom transition other than fade/slide

Widget Properties

Property	Type	Default
builder	Function	you implement it
loadingStateFromFuture	Future Function()	your future function (APIs,etc)
loaderBuilder	Function	-
customLoaderChild	Widget	-
loadingTextWidget	Widget	-
offset	offset	-
barrierOpacity	double	0.4
barrierColor	Color	black45
canDismiss	bool	false
hideBuilderOnNullData	bool	false

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