Giter Site home page Giter Site logo

hasimyerlikaya / uiblock Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hey24sheep/uiblock

0.0 0.0 0.0 1.13 MB

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

Home Page: https://pub.dev/packages/uiblock

License: MIT License

Kotlin 0.65% Swift 2.12% Objective-C 0.20% Dart 97.02%

uiblock's Introduction

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

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,
        );
    },
    // ...
);

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

uiblock's People

Contributors

hey24sheep avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.