关于flutter:flutter-交互式用户指导以及如何在布局中创造一个洞

原文

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,                  ),                ),              ],            ),          ),        ),

例如，在这个例子中，咱们有一个容器，大小为 150x150，色彩为红色，须要混合的色彩，不应该是齐全通明的，否则你不会看到它。因而，色彩是须要混合，以理解什么地区剪进去。

使用者指引

当然，您须要增加一些单词或元素来疏导用户浏览指南。在这种状况下，您能够将小部件放在同一个 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