easy_overlay

Description:

easy overlay

Easy Overlay #
The Easy Overlay package makes it simple to add visual feedback to your Flutter app, enhancing user experience. It offers flexible options for displaying customizable overlays and toast notifications, whether you prefer using context or not. Whether you need a CircularProgressIndicator, a custom widget, or flexible toast messages, this package provides a highly customizable solution for managing loading states and interactions.

Installation
With Context
Without Context
Customizable UI
Toast Message With Context
Toast Message Without Context

Installation #
To use Easy Overlay, add the following dependency to your pubspec.yaml file:
dependencies:
easy_overlay: ^latest
copied to clipboard
Then, import the package in your Dart code:
import 'package:easy_overlay/easy_overlay.dart';
copied to clipboard
With Context #
No extra configuration is needed to use the Easy Overlay package with context.
Example
void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Easy Overlay Example')),
body: Center(
child: ElevatedButton(
onPressed: () {
EasyOverlayCtx.show(context);
},
child: Text('Show Overlay'),
),
),
);
}
}
copied to clipboard
Uses

Show Overlay: EasyOverlayCtx.show(context);
Dismiss Overlay: EasyOverlayCtx.dismiss();

Without Context #
To use the Easy Overlay package without context, initialize EasyOverlay at the builder function of your MaterialApp or CupertinoApp.
Example
void main() {
runApp(
MaterialApp(
builder: EasyOverlay.init(),
home: MyHomePage(),
),
);
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Easy Overlay Example')),
body: Center(
child: ElevatedButton(
onPressed: () {
EasyOverlay.show();
},
child: Text('Show Overlay'),
),
),
);
}
}
copied to clipboard
Uses

Show Overlay: EasyOverlay.show();
Dismiss Overlay: EasyOverlay.dismiss();

Customizable UI #
You can customize the overlay by passing a custom widget and configuring various options.
Custom Widget

Display a custom widget by specifying it in the EasyOverlay.show() method.
By default, a CircularProgressIndicator is shown if no custom widget is provided.

EasyOverlay.show(
child: YourCustomWidget(),
);
copied to clipboard
Customization Options

barrierColor: Specify any color to customize the overlay’s background color.
barrierDismissible: Set to true or false to control whether tapping outside the overlay dismisses it.

Example
EasyOverlay.show(
//your custom widget
child: Text(
'Loading...',
style: TextStyle(color: Colors.white, fontSize: 24),
),
barrierDismissible: false,
barrierColor: Colors.black38,
);
copied to clipboard
Toast Message With Context #
Example
EasyOverlayCtx.showToast(
context,
message: "Default Toast With Context",
alignment: Alignment.bottomCenter,
decoration: ToastDecoration.origin.copyWith(
backgroundColor: Colors.cyan,
),
);
copied to clipboard
Toast Message Without Context #
Example
EasyOverlay.showToast(
child: const CustomUI(),
alignment: Alignment.topRight,
duration: const Duration(milliseconds: 1500),
animationType: AnimationType.scaleFade,
animationDuration: const Duration(milliseconds: 400),
);
copied to clipboard
Credits #
This package is created and maintained by Kyaw Thet Naing.