overlay_mask

Description:

overlay mask

overlay_mask #
A package that can provide the overlay mask on top of the another widget. You can set one visible/touchable area on the overlay mask, this area will not be masked and it still can pass the event to the lower widget. You can also set the hint dialog on the overlay mask as an instruction for users.
The package can be used both statically or dynamically. The common usage for this package is the onboarding page.
Usage #
There are two examples for the usage of this package. In example project, I demonstrate how to use it statically. In example2, I show the way to use it dynamically with provider and consumer.
Installation
Add the package to pubspec.yaml
dependencies:
overlay_mask: ^0.0.1
copied to clipboard
Import it to your project
import 'package:overlay_mask/overlay_mask.dart';
copied to clipboard
The attributes we can set in the OverlayMaskConfig are listed below:
The most important part is the visibleWidgetConfig, that is the only area that you can touch to trigger the lower widget.
OverlayMaskConfig(this.visibleWidgetConfig,
{this.hintText,
this.hintArrowDirection = HintArrowDirection.down,
this.hintTextAlign = HintTextAlign.center,
this.hintColor = Colors.deepPurple,
this.hintTextStyle,
this.maskColor = Colors.black26,
this.visibleColor = Colors.transparent,
this.visibleBorder});
copied to clipboard
Static Example
Set the OverlayMaskConfig
config = OverlayMaskConfig(widgetConfig,
hintText: hintText,
hintColor: Colors.amber,
hintTextStyle: TextStyle(fontSize: 20, color: Colors.white),
visibleColor: Colors.green.withOpacity(0.5),
hintArrowDirection: HintArrowDirection.left,
hintTextAlign: HintTextAlign.right,
visibleBorder: Border.all(color: Colors.red.shade700, width: 2));
copied to clipboard
Add the stack widget and put the OverlayMaskWidget on top of the widget that you want to mask.
return Scaffold(
// Just add the OverlayMaskWidget in the top of the stack
body: Stack(children: [
Container(
color: Colors.white,
child: Container(
alignment: Alignment.center,
child: FlatButton(
key: btnKey,
child: Text('Click'),
onPressed: () {
print('Click!');
},
))),
OverlayMaskWidget(config)
]));
copied to clipboard
The demo look like this:

Dynamic Example
It is an example for dynamically change the overlay mask. It is a common usage for onboarding intruction.
First, make your own singelton ChangeNotifier class that extend OverlayMaskConfigNotifier class. You can add other attribute to control the changes.
class OnBoardingConfigNotifier extends OverlayMaskConfigNotifier {
static final OnBoardingConfigNotifier _onBoardingConfig =
OnBoardingConfigNotifier._internal();

factory OnBoardingConfigNotifier() {
return _onBoardingConfig;
}

OnBoardingConfigNotifier._internal();
}
copied to clipboard
Then, add the provider
void main() {
runApp(MultiProvider(providers: [
// Add the provider of self-created notifier class
ChangeNotifierProvider(create: (context) => OnBoardingConfigNotifier()),
], child: HomePage()));
}
copied to clipboard
Next, add the stack, and wrap the OverlayMaskWidget with consumer and put it on top of the MaterialApp.
class HomePage extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
// Just add the OverlayMaskWidget in the top of the stack to keep it on top of every page
return MaterialApp(
title: 'Overlay Mask Dynamic Demo',
debugShowCheckedModeBanner: false,
home: Stack(
children: [
MaterialApp(
title: 'Overlay Mask Dynamic Demo',
debugShowCheckedModeBanner: false,
home: MyHomePage(),
),
// Add the consumer to receive and apply the changes of Singleton OverlayMaskConfig
Consumer<OnBoardingConfigNotifier>(builder: (context, notifier, child) {
// return Container(child:Text('123'));
return OverlayMaskWidget(notifier.getMaskConfig);
})
],
));
}
}

copied to clipboard
Last, just change the config at your desired moment and it works.
// Use the PostFrameCallback to get the exact position and size of certain widget
WidgetsBinding.instance.addPostFrameCallback((_) {
if (config == null &&
btnKey != null &&
btnKey.currentContext != null &&
btnKey.currentContext.findRenderObject() != null) {
RenderBox renderBox = btnKey.currentContext.findRenderObject();
Offset position = renderBox.localToGlobal(Offset.zero);

// Set widget config
WidgetConfig widgetConfig = WidgetConfig(
Size(renderBox.size.width, renderBox.size.height),
Offset(position.dx, position.dy));

// Set the hint text
String hintText = 'hint';

OnBoardingConfigNotifier().setMaskConfig(OverlayMaskConfig(widgetConfig,
hintText: hintText,
hintColor: Colors.amber,
hintTextStyle: TextStyle(fontSize: 20, color: Colors.white),
visibleColor: Colors.green.withOpacity(0.5),
hintArrowDirection: HintArrowDirection.left,
hintTextAlign: HintTextAlign.right,
visibleBorder: Border.all(color: Colors.red.shade700, width: 2)));
}
});
copied to clipboard
The demo look like this:



See More #
You can get the source code in github