uiblock

pub package GitHub Stars Platform

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

Getting Started

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

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 :)

For more details have a look at the other examples.

#

Properties

PropertyTypeDefault
context (required)BuildContext-
childBuilderFunction-
customLoaderChildWidget-
loadingTextWidgetWidget-
imageFilterImageFilter-
backgroundColorColortransparent
canDissmissOnBackboolfalse

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 ✌️

Libraries

default_uiblock_loader
uiblock
uiblock_modal