DEV Community

Cover image for Flutter Overlay loader
Shah Poran
Shah Poran

Posted on

Flutter Overlay loader

Build Passing Pub Version Pub Likes Pub Points Pub Popularity GitHub forks GitHub stars GitHub issues GitHub followers Twitter GitHub license

flutter_overlay_loader

A simple Flutter package for managing loader when
fetching remote data or any long running async task. Flutter overlay loader is easy to use.
You can show loader using only write two lines of code.

Overlay loader without overlaying Appbar

drawing drawing

Overlay Loader without overlaying BottomAppBar and also overlaying AppBar

drawing

Getting Started

Installing

dependencies:
  flutter_overlay_loader: ^1.0.8
Enter fullscreen mode Exit fullscreen mode

Import

import 'package:flutter_overlay_loader/flutter_overlay_loader.dart';
Enter fullscreen mode Exit fullscreen mode

How To Use

When start network call then call this line of code..

Loader.show(context,progressIndicator:LinearProgressIndicator());
Enter fullscreen mode Exit fullscreen mode

After finished network call then call :

Loader.hide();
Enter fullscreen mode Exit fullscreen mode

You can customize this loader..

Loader.show(context,
  isSafeAreaOverlay: false,
  isBottomBarOverlay: false,
  overlayFromBottom: 80,
  overlayColor: Colors.black26,
  progressIndicator: CircularProgressIndicator(backgroundColor: Colors.red),
  themeData: Theme.of(context)
    .copyWith(colorScheme: ColorScheme.fromSwatch().copyWith(secondary: Colors.green))
);
Enter fullscreen mode Exit fullscreen mode

You can also check loader is showing or not using the property :


 and you can
prevent back pressed like this snippet:



```dart
WillPopScope(
  child: //TODO , 
  onWillPop:()async => !Loader.isShown
)
Enter fullscreen mode Exit fullscreen mode

Finally dispose call hide method on dispose method :

@override
void dispose() {
  Loader.hide();

  super.dispose();
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)