x_overlay

Description:

x overlay

If you find this package helpful, please help by giving it a 👍 on pub.dev! ↗️
Your support and encouragement motivate us to continue improving and maintaining this package.
Thank you for recognizing our work! 👏👏

Features #
Easy to support overlay
Usage #

custom overlay data


you can add custom variables with extends
/// define
class MyOverlayData extends XOverlayData {
MyOverlayData({
required this.myVariable,
});

final String myVariable;
}

/// convert
final overlayData = XOverlayData();
late MyOverlayData myOverlayData;
if (data is MyOverlayData) {
myOverlayData = data;
}
myOverlayData.myVariable;

copied to clipboard



define a object of XOverlayController
final overlayController = XOverlayController();
copied to clipboard


use XOverlayPopScope as you home parent
that will replace directly quit app with back to desktop when click back button of mobile, otherwise the page will be destroyed.
MaterialApp(
...
home: XOverlayPopScope(
child: YourHomePage(),
),
)
copied to clipboard


Nest the XOverlayPage within builder of your MaterialApp widget.

read your overlay data and return your overlay page in builder
Make sure to return the correct context in the contextQuery with navigatorKey
By default, clicking overlay page will return to the content page. so, read your overlay data and return your content page in restoreWidgetQuery

MaterialApp(
...
navigatorKey: widget.navigatorKey,
builder: (BuildContext context, Widget? child) {
return Stack(
children: [
child!,
/// add overlay page in MaterialApp.builder
XOverlayPage(
controller: overlayController,
contextQuery: () {
return widget.navigatorKey.currentState!.context;
},
restoreWidgetQuery: (
XOverlayData data,
) {
/// By default, clicking overlay page will return to the content page.
/// so, read your overlay data, and return your content page
return YourContentPage();
},
builder: (XOverlayData data) {
/// read your overlay data and return your overlay page
return YourOverlayPage();
},
),
],
);
},
)
copied to clipboard


Add XOverlayButton in your content widget, or custom a button and call controller.overlay()
XOverlayButton(
controller: widget.overlayController,
dataQuery: () {
/// Data needed to return to the overlay page
return YourOverlayData();
},
)
copied to clipboard


Examples #
Previews #