Flutter newcomer guidance plugin onboarding_overlay

Old iron remember to forward, Brother Mao will present more Flutter good articles~~~~

WeChat group ducafecat

b Station https://space.bilibili.com/404904528

original

https://medium.com/flutterdevs/explore-onboarding-overlay-in-flutter-5ed882e123ac

refer to

https://pub.flutter-io.cn/packages/onboarding_overlay

text

Flutter is an open source user interface software development software development kit. Flutter is an open source project, maintained by Google. Currently, in March 2021. Google has released another new version of Flutter 2. Flutter as a software development kit application is very good, but when building a large application, there will be some problems or bugs in the code that need to be debugged.

Flutter provides a variety of debugging tools, such as timeline checker, memory and performance checker, etc. These tools simplify the debugging process for developers. The different tools for debugging Flutter applications are listed below.

Hello friends, I will talk about exploring on board flutter coverage on my new blog. We will also implement a demonstration of exploring Onboarding overlay widgets and use them in your Flutter application. So let's get started.

Flutter

Flutter is Google's user interface toolkit, which can help you build beautiful native composite applications for mobile, web, and desktop with a code base in record time. This means that you can use one programming language and one code base to create two different applications (iOS and Android).

Onboarding Overlay

According to the custom design guide, the Onboarding Overlay Package animation package implements the Onboarding overlay. Here, we can use any widget in the Onboarding overlay, and we use it to introduce users to a feature they don’t know. Onboarding overlay is a flexible Onboarding widget that can be started and stopped through any number of steps and any starting point.

https://pub.flutter-io.cn/packages/onboarding_overlay

Implementation

You need to implement it in your code separately:

Step 1: Add dependencies.

Add dependencies to the pubspec.yaml file.

dependencies:
  onboarding_overlay: ^2.1.0

Step 2: Import the package:

import 'package:onboarding_overlay/onboarding_overlay.dart';

Step 3: Run the flutter package in the root directory of the application.

Implementation

In libfolder create a file called in onboarding_overlay_demo.dart new dart file.

First, we must define the GlobalKey and its internals. Its names are onBoardingKey and scaffoldKey.

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

Now we will use the Onboarding Widget, where we will use the Steps attribute, where we have used some different types of attributes, such as title, titleTextColor, labelBoxPadding, labelBoxDecoration, bodyText, etc., we have used the following code, which can be found in the reference help Understand.

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

In this article, I have explained how to explore on-board coverage in Flutter. You can modify and experiment according to your own. This brief introduction is from our Flutter exploration on-board coverage demonstration.

https://ducafecat.tech/

https://github.com/ducafecat