乐趣区

关于flutter:Flutter-新人指导插件-onboardingoverlay

jiezi

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

https://medium.com/flutterdev…

参考

  • https://pub.flutter-io.cn/pac…

注释

Flutter 是一个开源的用户界面软件开发软件开发工具包。Flutter 是一个开源我的项目，由 Google 负责保护。目前，在 2021 年 3 月。谷歌曾经公布了另一个新版本的 Flutter 2。作为一个软件开发工具包应用程序的 Flutter 是很好的，然而当构建一个大的应用程序时，在代码中会有一些问题或者 bug 须要调试。

Flutter 提供了多种调试工具，如时间轴查看器、内存和性能查看器等。这些工具简化了开发者的调试过程，上面列出了调试 Flutter 应用程序的不同工具。

你好敌人，我将议论我的新博客上摸索上板扑笼罩。咱们还将实现一个摸索 Onboarding 笼罩小部件演示，并应用它们在您的 Flutter 应用程序。那么让咱们开始吧。

Flutter

Flutter 是谷歌的用户界面工具包，它能够帮忙你在创纪录的工夫内用一个代码库为挪动、网络和桌面构建丑陋的本地组合应用程序。这意味着你能够应用一种编程语言和一个代码库来创立两个不同的应用程序 (iOS 和 Android)。

Onboarding Overlay

依照自定义的设计指南，Onboarding Overlay Package 动画包实现了 Onboarding 笼罩，在这里，咱们能够应用任何 Onboarding 笼罩中的小部件，咱们应用它向用户介绍一个他们不晓得的性能。Onboarding overlay 是一个灵便的 Onboarding 小部件，能够通过任意数量的步骤和任意起始点启动和进行。

https://pub.flutter-io.cn/pac…

Implementation

你须要别离在你的代码中实现它:

  • 第一步: 增加依赖项。

将依赖项增加到 pubspec.yaml 文件。

dependencies:
  onboarding_overlay: ^2.1.0
  • 步骤 2: 导入包:
import 'package:onboarding_overlay/onboarding_overlay.dart';
  • 第三步: 在应用程序的根目录中运行 flutter 软件包。

Implementation

在 libfolder 中创立一个名为 onboarding_overlay_demo.dart 的新 dart 文件。

首先，咱们必须定义 GlobalKey 和它的外部，它的名字是 onBoardingKey 和 scaffoldKey。

final GlobalKey<OnboardingState> onboardingKey = GlobalKey<OnboardingState>();
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();

当初咱们将应用 Onboarding Widget，其中咱们将应用 Steps 属性，其中咱们曾经应用了一些不同类型的属性，如题目，titleTextColor，labelBoxPadding，labelBoxDecoration，bodyText 等，咱们曾经应用了上面的代码，能够在参考的帮忙下了解。

OnboardingStep(focusNode: focusNodes[0],
  title: 'Tap anywhere to continue Tap anywhere to continue',
  titleTextColor: Colors.black,
  bodyText: 'Tap anywhere to continue Tap anywhere to continue',
  labelBoxPadding: const EdgeInsets.all(16.0),
  labelBoxDecoration: BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: const BorderRadius.all(Radius.circular(8.0)),
      color: const Color(0xFF00E1FF),
      border: Border.all(color: const Color(0xFF1E05FB),
        width: 1.0,
        style: BorderStyle.solid,
      )),
  arrowPosition: ArrowPosition.bottomCenter,
  hasArrow: true,
  hasLabelBox: true,
  fullscreen: true,
),

Code File

import 'package:flutter/material.dart';
import 'package:onboarding_overlay/onboarding_overlay.dart';class OnBoardingOverlayDemo extends StatefulWidget {
  const OnBoardingOverlayDemo({
    Key? key,
    required this.focusNodes,
  }) : super(key: key);

  final List<FocusNode> focusNodes;

  @override
  _OnBoardingOverlayDemoState createState() => _OnBoardingOverlayDemoState();
}

class _OnBoardingOverlayDemoState extends State<OnBoardingOverlayDemo> {
  late int _counter;

  @override
  void initState() {super.initState();
    _counter = 0;
  }

  @override
  void dispose() {super.dispose();
  }

  void _increment(BuildContext context) {setState(() {
      _counter++;
      Onboarding.of(context)!.show();});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(focusNode: widget.focusNodes[4],
          icon: const Icon(Icons.menu),
          onPressed: () {},
        ),
        title: Focus(focusNode: widget.focusNodes[3],
          child: const Text('Title'),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Focus(focusNode: widget.focusNodes[0],
              child: const Text('You have pushed the button this many times:'),
            ),
            Focus(focusNode: widget.focusNodes[2],
              child: Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(focusNode: widget.focusNodes[1],
        onPressed: () {_increment(context);
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Conclusion

在这篇文章中，我曾经解释了在 Flutter 摸索在板上笼罩，你能够依据本人的批改和试验，这个小介绍是从咱们这边的 Flutter 摸索在板上笼罩演示。

© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/…

新闻客户端

https://github.com/ducafecat/…

strapi 手册译文

https://getstrapi.cn

微信探讨群 ducafecat

系列汇合

译文

https://ducafecat.tech/catego…

开源我的项目

https://ducafecat.tech/catego…

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 Bloc

https://space.bilibili.com/40…

Flutter Getx4

https://space.bilibili.com/40…

Docker Yapi

https://space.bilibili.com/40…

退出移动版