Implement Showcase In Flutter

June 10, 2024June 10, 2024 Shaiq Khan Packages and Plugins

An extraordinary application UI limits the friction between user and application usefulness. A method for decreasing that grating is to feature and showcase the parts of your application. This is useful when a user launches your application interestingly. With the assistance of the Showcase and ShowCaseWidget widget, we can showcase the feature in the Flutter application.

This article will explore the Implement Showcase In Flutter. We will see how to implement a demo program. It will show a highlight of our app using the showcaseview package in your flutter applications.

showcaseview | Flutter Package
A Flutter package allows you to Showcase/Highlight your widgets step by step. Add dependency to pubspec.yaml Get the…pub.dev

Table Of Contents::

Introduction

Constructor

Parameters

Implementation

Code Implement

Code File

Conclusion

Introduction:

The showcase will feature the fundamental features of our application. At the point when the user taps on the screen, the widgets we have as a component of the feature will be introduced in a predefined request.

Demo Module::

This demo video shows how to implement the Showcase in a flutter and shows how a Showcase will work using the showcaseview package in your flutter applications. We will show a user press on the screen, then the showcase will be presented and When you run the app, the showcase will start instantly on the main page. It will be shown on your device.

Constructor:

To utilize Showcase, you need to call the constructor underneath:

const Showcase({
  required this.key,
  required this.child,
  this.title,
  required this.description,
  this.shapeBorder,
  this.overlayColor = Colors.black45,
  this.overlayOpacity = 0.75,
  this.titleTextStyle,
  this.descTextStyle,
  this.showcaseBackgroundColor = Colors.white,
  this.textColor = Colors.black,
  this.scrollLoadingWidget = const CircularProgressIndicator(
      valueColor: AlwaysStoppedAnimation(Colors.white)),
  this.showArrow = true,
  this.onTargetClick,
  this.disposeOnTap,
  this.animationDuration = const Duration(milliseconds: 2000),
  this.disableAnimation,
  this.contentPadding =
      const EdgeInsets.symmetric(vertical: 8, horizontal: 8),
  this.onToolTipClick,
  this.overlayPadding = EdgeInsets.zero,
  this.blurValue,
  this.radius,
  this.onTargetLongPress,
  this.onTargetDoubleTap,
})

All fields marked with @required must not be empty in the above Constructor.

Parameters:

There are some parameters of Showcase are:

> key: This parameter is used to unique GlobalKey to identify features showcased.
> child: This parameter is used to the widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children with that widget.
> description: This parameter displays a string about the showcased feature.
> animationDuration: This parameter is used for the duration over which to animate the parameters of this container. It represents a difference from one point in time to another.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  showcaseview: ^1.1.6

Step 2: Add the assets

Add assets to pubspec — yaml file.

assets:
  - assets/

Step 3: Import

import 'package:showcaseview/showcaseview.dart';

Step 4: Run flutter packages get in the root directory of your app.

How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

Before we implement the showcase for individual widgets, we want to wrap our page that will show the showcase with a ShowCaseWidget. We should set the required builder parameter, which will contain the Builder widget returning our ShowcaseDemo.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter ShowCase Demo',
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      body: ShowCaseWidget(
        builder: Builder(builder: (context) => const ShowcaseDemo()),
      ),
    ),
  );
}

Presently, we will make a ShowcaseDemo class in the main. dart file. The ShowCaseWidget to know which widgets we need to be showcased, we want to make a key for all of those widgets. In our application, there are five widgets we need to bring to the consideration of our users when they arrive at the ShowcaseDemo.

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
final GlobalKey _first = GlobalKey();
final GlobalKey _second = GlobalKey();
final GlobalKey _third = GlobalKey();
final GlobalKey _fourth = GlobalKey();
final GlobalKey _fifth = GlobalKey();

For the showcase to begin on page construct, we should call the startShowCase the strategy within the initState of the ShowcaseDemo.

Note, notwithstanding, that calling this technique simply the manner in which we did in the button would deliver an error. To keep this from occurring, we really want to put this strategy call inside a callback function and give it to WidgetsBinding.instance!.addPostFrameCallback(). This will guarantee that everything is executed accurately during the build.

Presently, if you run the application, our delightful showcase will begin when the page builds. Tap through it until the showcase is done.

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback(
    (_) => ShowCaseWidget.of(context)
        .startShowCase([_first, _second, _third, _fourth, _fifth]),
  );
}

In the build method, we will return Scaffold. We will add _scaffoldKey

@override
Widget build(BuildContext context) {
  return Scaffold(
    key: _scaffoldKey,
    ......
)}

First Showcase will be added on AppBar. We will add a key, description, and its child. Its child, we will add IconButton. In this button, we will add onPressed and icon.

leading: Showcase(
  key: _first,
  description: 'Press here to open drawer',
  child: IconButton(
    onPressed: () {
      _scaffoldKey.currentState!.openDrawer();
    },
    icon: const Icon(Icons.menu),
  ),
),