乐趣区

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

jiezi

原文

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…

退出移动版