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

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Then, Second Showcase we will add an app bar title with the key, description, and child. In a child, we will add the text “Flutter Showcase Demo”. In a description, we will add the string “This is a demo app title”.

title: Showcase(
    key: _second,
    description: 'This is a demo app title',
    child: const Text('Flutter Showcase Demo')),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Now, we will add a third Showcase on an action widget. In this widget, We will add a key was _third, the description was “Press to see notification” and, child.

actions: [
  Showcase(
      key: _third,
      description: 'Press to see notification',
      child: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.notifications_active)))
],

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Next, we will add a fourth Showcase on a body part. In the body, we will add the Column widget. In this widget, we will add crossAxisAlignment and mainAxisAlignment as the center. Its child, we will add the Showcase method. In this method, we will add key was _fourth, the description was “FlutterDevs specializes in creating cost-effective and efficient applications”, and child. In a child, new will add an image.

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Center(
      child: Showcase(
          key: _fourth,
          description:
              'FlutterDevs specializes in creating cost-effective and efficient applications',
          child: Image.asset(
            "assets/logo.png",
            height: 400,
            width: 350,
          )),
    ),
  ],
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

We will create a floatingActionButton equal to the Showcase widget. In this widget, we will add a key that was _fifth, the title was “Add Image’”, the description was “Click here to add new Image”.

floatingActionButton: Showcase(
  key: _fifth,
  title: 'Add Image',
  description: 'Click here to add new Image',
  shapeBorder: const CircleBorder(),
  child: FloatingActionButton(
    backgroundColor: Colors.cyan,
    onPressed: () {},
    child: const Icon(
      Icons.image,
    ),
  ),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:showcaseview/showcaseview.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class ShowcaseDemo extends StatefulWidget {
  const ShowcaseDemo({Key? key}) : super(key: key);

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

class _ShowcaseDemoState extends State<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();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: const <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.cyan,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        leading: Showcase(
          key: _first,
          description: 'Press here to open drawer',
          child: IconButton(
            onPressed: () {
              _scaffoldKey.currentState!.openDrawer();
            },
            icon: const Icon(Icons.menu),
          ),
        ),
        actions: [
          Showcase(
              key: _third,
              description: 'Press to see notification',
              child: IconButton(
                  onPressed: () {},
                  icon: const Icon(Icons.notifications_active)))
        ],
        title: Showcase(
            key: _second,
            description: 'This is a demo app title',
            child: const Text('Flutter Showcase Demo')),
        centerTitle: true,
        automaticallyImplyLeading: false,
        backgroundColor: Colors.cyan,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Center(
            child: Showcase(
                key: _fourth,
                description:
                    'FlutterDevs specializes in creating cost-effective and efficient applications',
                child: Image.asset(
                  "assets/logo.png",
                  height: 400,
                  width: 350,
                )),
          ),
        ],
      ),
      floatingActionButton: Showcase(
        key: _fifth,
        title: 'Add Image',
        description: 'Click here to add new Image',
        shapeBorder: const CircleBorder(),
        child: FloatingActionButton(
          backgroundColor: Colors.cyan,
          onPressed: () {},
          child: const Icon(
            Icons.image,
          ),
        ),
      ),
    );
  }
}

Conclusion:

In the article, I have explained the Showcase basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Showcase On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Implementing Showcase in your flutter projects. We will show you what the Introduction is. Make a demo program for working Showcase using the showcaseview package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

Related: SMS Using Twilio In Flutter

Related: Using SharedPreferences in Flutter

Need expert help building your Flutter app? Talk to FlutterExperts for architecture, development, and consulting support.