共计 3953 个字符，预计需要花费 10 分钟才能阅读完成。
原文
https://medium.com/litslink/f…
代码
https://github.com/alex-melny…
注释
大家好！我想给你看一个乏味的 Flutter 特色。咱们能够建设交互式的用户领导应用 blending 混合色彩。
这个简略的技巧能够让你在应用程序中建设乏味的用户指南，而不仅仅是一张图片。它能够真正与动画等互动。
布局
首先，要构建笼罩，您须要将指标页面的 Scaffold 小部件包装到 Stack 小部件中，并将 Scaffold 小部件作为第一个我的项目保留。
@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),
),
),
],
);
}对于第二个中央，创立一个笼罩整个脚手架的笼罩图，应用一点通明的深 / 浅背景。Root ColorFiltered 具备混合模式“source out”，外部 Container 在后盾具备“destination out”，这容许咱们剪切小部件以在 root ColorFiltered 小部件中剪切它们。
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,
),
),
],
),
),
),例如，在这个例子中，咱们有一个容器，大小为 150×150，色彩为红色，须要混合的色彩，不应该是齐全通明的，否则你不会看到它。因而，色彩是须要混合，以理解什么地区剪进去。
使用者指引
当然，您须要增加一些单词或元素来疏导用户浏览指南。在这种状况下，您能够将小部件放在同一个 Stack 中通过过滤的 root ColorFiltered 上。
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...'
),
),
),
),请记住，Stack 小部件来自 Scaffold 并且没有任何 Material 反对，所以用一个 Material 小部件包装它就足够了。
这里有一个残缺的例子，如果你把所有这些步骤都做对了，你会看到同样的图片。
@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...'
),
),
),
),
],
);
}动画和步骤
我筹备了一个简略的例子，通过动画剪辑区域从矩形切换到圆形并挪动，从一个领导切换到另一个。只有查看我的仓库，就能取得这种体验。
残缺的我的项目源代码能够在 GitHub 上找到。
https://github.com/alex-melny…
© 猫哥
https://ducafecat.tech/
https://github.com/ducafecat
往期
开源
GetX Quick Start
https://github.com/ducafecat/…
新闻客户端
https://github.com/ducafecat/…
strapi 手册译文
https://getstrapi.cn
微信探讨群 ducafecat
系列汇合
Dart 编程语言根底
https://space.bilibili.com/40…
Flutter 零根底入门
https://space.bilibili.com/40…
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/40…
Flutter 组件开发
https://space.bilibili.com/40…
Flutter 组件开发
https://space.bilibili.com/40…
Flutter Bloc
https://space.bilibili.com/40…
Flutter Getx4
https://space.bilibili.com/40…
Docker Yapi
https://space.bilibili.com/40…
