anywhere_overlay

Description:

anywhere overlay

AnywhereOverlay #
anywhere_overlay is a Flutter package that provides a simple and flexible way to show overlays anywhere in your app's UI.
Getting Started #
To use this package, add anywhere_overlay as a dependency in your pubspec.yaml file.
dependencies:
anywhere_overlay: ^latestVersion
copied to clipboard
Import #
import 'package:anywhere_overlay/anywhere_overlay.dart';
copied to clipboard
Usage #
in your MaterialApp/CupertinoApp initialize AnywhereOverlay :
MaterialApp(
home: const Scaffold(
body: Center(
child: Text('Hello World!'),
),
),
// Add This Line To Initialize AnyWhereOverlay
builder: AnyWhereOverlay.init(),
)
copied to clipboard
Show OverLay #
whenever you want to show the overlay call AnyWhereOverlay.show(Widget child) method
class HomeWidget extends StatelessWidget {
const HomeWidget({
super.key,
});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
// Method To show Overlay
AnyWhereOverlay.show(
child: Container(
height: 100,
width: 100,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.5),
borderRadius: BorderRadius.circular(12),
),
child: const CircularProgressIndicator(strokeWidth: 2),
),
);
},
child: const Text("Show Overlay"),
),
),
);
}
}
copied to clipboard
Dismiss OverLay #
whenever you want to dismiss the overlay call AnyWhereOverlay.dismiss() Method
class HomeWidget extends StatelessWidget {
const HomeWidget({
super.key,
});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
// Method To show Overlay
AnyWhereOverlay.show(
child: Container(
height: 100,
width: 100,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.5),
borderRadius: BorderRadius.circular(12),
),
child: const CircularProgressIndicator(strokeWidth: 2),
),
);

Future.delayed(
const Duration(seconds: 2),
() {
// Method To Hide Overlay
AnyWhereOverlay.dismiss();
},
);
},
child: const Text("Show Overlay"),
),
),
);
}
}
copied to clipboard
Styling #
Package Offers Three Configurations

animationDuration: Duration Of Opacity Animation While Showing Or Dismissing The Overlay, Default: 200 milliseconds.
overlayBgColor: Color of Overlay Background, Default: Colors.black.withOpacity(.70).
alignment: Alignment for The Top/Child Widget, Default: Alignment.center

To configure There are Three Ways, #


While Calling init method
void main() {
runApp(const MainApp());
}

class MainApp extends StatelessWidget {
const MainApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: const Scaffold(
body: Center(
child: Text('Hello World!'),
),
),
// Styling During initialization
builder: AnyWhereOverlay.init(
alignment: Alignment.bottomCenter,
animationDuration: const Duration(seconds: 1),
overlayBgColor: Colors.blue.withOpacity(.7),
),
);
}
}
copied to clipboard


Using AnyWhereOverlay.configure() Method
class HomeWidget extends StatelessWidget {
const HomeWidget({
super.key,
});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
// Configuring Overlay Settings Using Configure Method
AnyWhereOverlay.configure(
alignment: Alignment.bottomCenter,
animationDuration: const Duration(milliseconds: 500),
overlayBgColor: Colors.black.withOpacity(.5),
);

// Method To show Overlay
AnyWhereOverlay.show(
child: Container(
height: 100,
width: 100,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.5),
borderRadius: BorderRadius.circular(12),
),
child: const CircularProgressIndicator(strokeWidth: 2),
),
);

Future.delayed(
const Duration(seconds: 2),
() {
// Method To Hide Overlay
AnyWhereOverlay.dismiss();
},
);
},
child: const Text("Show Overlay"),
),
),
);
}
}
copied to clipboard


Using instance
class HomeWidget extends StatelessWidget {
const HomeWidget({
super.key,
});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
// Configuring Overlay Settings Using Instance
final AnyWhereOverlay instance = AnyWhereOverlay.instance;
instance.overlayBgColor = Colors.red.withOpacity(.5);
instance.animationDuration = const Duration(seconds: 1);
instance.alignment = Alignment.topCenter;

// Method To show Overlay
AnyWhereOverlay.show(
child: Container(
height: 100,
width: 100,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.5),
borderRadius: BorderRadius.circular(12),
),
child: const CircularProgressIndicator(strokeWidth: 2),
),
);

Future.delayed(
const Duration(seconds: 2),
() {
// Method To Hide Overlay
AnyWhereOverlay.dismiss();
},
);
},
child: const Text("Show Overlay"),
),
),
);
}
}
copied to clipboard



instance.overlayBgColor, instance.animationDuration, instance.alignment All are static Fields changing by any method will result the change globally

Additional Arguments #
1. barrierDismissible in show method (default false) #
if set to true, user can dismiss the overlay by tapping the Outside the top widget
AnyWhereOverlay.show(
barrierDismissible: true,
child: Container(
height: 100,
width: 100,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white.withOpacity(.5),
borderRadius: BorderRadius.circular(12),
),
child: const CircularProgressIndicator(strokeWidth: 2),
),
)
copied to clipboard

barrierDismissible arguments is not static, one must set this explicitly every time

2. builder in dismiss init method (default null) #
there may be times when you need to use custom builder in material app, no need to worry, you can pass builder in init method, Packages. Package will wrap builder's child with Overlay entry, and you can still use your builder
Implementation in code (init method)
static TransitionBuilder init({TransitionBuilder? builder}) {
return (context, child) => builder != null
? builder(
context,
AnywhereOverlayWrapper(child: child),
)
: AnywhereOverlayWrapper(child: child);
}
copied to clipboard