The original
https://medium.com/litslink/flutter-interactive-user-guidanc-e-or-how-to-make-a-hole-in-layout-d72bf6eb27f9
code
https://github.com/alex-melnyk/flutter_user_guidance
The body of the
Everybody is good! I want to show you an interesting feature of Flutter. We can build interactive user instructions using blending colors.
This simple trick allows you to build interesting user guides into your app, rather than just a picture. It can really interact with animation and so on.
layout
First, to build coverage, you need to wrap the Scaffold widget for the target page into the Stack widget and keep the Scaffold widget as the first item.
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Stack(
children: [
Scaffold(
appBar: AppBar(
title: Text('Flutter User Guidance Example'),
centerTitle: false.
actions: [
IconButton(
icon: Icon(Icons.slideshow),
onPressed: () => _userGuidanceController.show(),
),
].
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:'.
),
Text(
'$_counter'.
style: theme.textTheme.headline4,
),
].
),
),
floatingActionButton: FloatingActionButton(
onPressed: _handleFABPressed,
tooltip: 'Increment'.
child: Icon(Icons.add),
),
),
].
);
}
Copy the codeFor the second place, create an overlay that covers the entire scaffold, using a transparent dark/light background. Root ColorFiltered has mixed mode “Source Out” and the internal Container has “Destination out” behind the scenes, which allows us to clip widgets to clip them in the Root ColorFiltered widget.
Positioned.fill(
child: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black87,
BlendMode.srcOut,
),
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut,
),
),
),
Center(
child: Container(
width: 150.
height: 150.
color: Colors.white,
),
),
].
),
),
),
Copy the codeFor example, in this example, we have a container, size 150×150, color white, need to mix the color, shouldn’t be completely transparent, otherwise you won’t see it. Therefore, colors are needed to blend to understand what areas are cut out.
User Guide
Of course, you need to add some words or elements to guide the user through the guide. In this case, you can put the widget on the filtered root ColorFiltered in the same Stack.
Align(
alignment: Alignment.bottomLeft,
child: Material(
color: Colors.transparent,
child: Container(
margin: EdgeInsets.only(
left: 16.
bottom: 38.
),
padding: EdgeInsets.symmetric(
horizontal: 16.
vertical: 8.
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Text(
'Hello Interactive User Guidance! \n'
'Tap on + button to increase the number... '
),
),
),
),
Copy the codeRemember that the Stack widget comes from scaffolding and does not have any Material support, so wrapping it with a Material widget is sufficient.
Here’s a complete example, if you do all these steps right, you’ll see the same picture.
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Stack(
children: [
Scaffold(
appBar: AppBar(
title: Text('Flutter User Guidance Example'),
centerTitle: false.
actions: [
IconButton(
icon: Icon(Icons.slideshow),
onPressed: () => _userGuidanceController.show(),
),
].
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:'.
),
Text(
'$_counter'.
style: theme.textTheme.headline4,
),
].
),
),
floatingActionButton: FloatingActionButton(
onPressed: _handleFABPressed,
tooltip: 'Increment'.
child: Icon(Icons.add),
),
),
Positioned.fill(
child: ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black87,
BlendMode.srcOut,
),
child: Stack(
children: [
Positioned.fill(
child: Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut,
),
),
),
Align(
alignment: Alignment.bottomRight,
child: Container(
margin: EdgeInsets.only(
right: 9.
bottom: 27.
),
width: 70.
height: 70.
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
].
),
),
),
Align(
alignment: Alignment.bottomLeft,
child: Material(
color: Colors.transparent,
child: Container(
margin: EdgeInsets.only(
left: 16.
bottom: 38.
),
padding: EdgeInsets.symmetric(
horizontal: 16.
vertical: 8.
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Text(
'Hello Interactive User Guidance! \n'
'Tap on + button to increase the number... '
),
),
),
),
].
);
}
Copy the codeAnimations and steps
I prepared a simple example of switching from rectangle to circle and moving from one guide to another through the animation clip area. Just check out my warehouse and get the experience.
The full project source code can be found on GitHub.
https://github.com/alex-melnyk/flutter_user_guidance
The elder brother of the © cat
https://ducafecat.tech/
https://github.com/ducafecat
The issue of
Open source
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
News client
https://github.com/ducafecat/flutter_learn_news
Strapi manual translation
https://getstrapi.cn
Wechat discussion group Ducafecat
A series of collections
Dart programming language basics
https://space.bilibili.com/404904528/channel/detail?cid=111585
Start Flutter with zero basics
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter combat news client from scratch
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter component development
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter component development
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578