Showcase in Flutter

Showcase in Flutter can be used to explain or to showcase the basic features of the app.

The best example for the App which uses Showcase Widget is “Gmail”.

When we open up the app for the first time, it showcases some basic features like “Compose a Mail,”Inbox” etc.

Starting with Flutter development, you may also check our Flutter app development services

Steps for Integrating Showcase in App

To Integrate Showcase in Flutter, we will have to follow some steps –

Step – 1 –> Firstly, we will need to add the dependency in our pubspec.yaml file and run the ‘pub get’ command.

showcaseview: ^1.1.1

1	showcaseview: ^1.1.1

In order to check the updated version of the dependency showcaseview.

Step – 2 –> Now, we can start to pen down the code to implement Showcase Widget in the app

We can create the Showcase widget for every feature.

 Showcase(
              key: _one,
              description: 'Tap to see the notifications',
              child: IconButton(
                    icon: Icon(Icons.notifications), onPressed: () {})
          ),

Showcase(

key: _one,

description: 'Tap to see the notifications',

child: IconButton(

icon: Icon(Icons.notifications), onPressed: () {})

Here, we will need to always few mandatory properties such as key,description and child property.

Key – It is a unique key to identify which feature has to be showcased.

Description – It is a small content which is to be displayed to explain about the particular feature.

Child – It is a widget on which showcase is to be performed.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  BuildContext context;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:ShowCaseWidget(
        onStart: (index, key) {
          debugPrint('onStart: $index, $key');
        },
        onComplete: (index, key) {
          debugPrint('onComplete: $index, $key');
          if (index == 4)
            SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light
                .copyWith(
                statusBarIconBrightness: Brightness.dark,
                statusBarColor: Colors.white));
        },
        builder: Builder(builder: (context) => Dashboard()),
        autoPlay: false,
        autoPlayDelay: Duration(seconds: 3),
        autoPlayLockEnable: false,
      ),

        floatingActionButton: FloatingActionButton(
          onPressed: () {

          },        tooltip: 'Increment',
        child: Icon(Icons.add),
      ));
  }
}

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {
  GlobalKey _one = GlobalKey();
  GlobalKey _two = GlobalKey();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) =>
        ShowCaseWidget.of(context)
            .startShowCase([_one, _two]));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Showcase Widget in Flutter"),
        actions: [
          Showcase(key: _one,
              description: 'Tap to see the notifications',
              child: IconButton(
                  icon: Icon(Icons.notifications), onPressed: () {})),
          Showcase(key: _two,
              description: 'Tap to update the Profile',
              child: IconButton(icon: Icon(Icons.person), onPressed: () {})),

        ],
      ),
      body: GridView.extent(
        childAspectRatio: (2 / 2),
        crossAxisSpacing: 4,
        mainAxisSpacing: 4,
        padding: EdgeInsets.all(10.0),
        maxCrossAxisExtent: 200.0,
        children: List.generate(50, (index) {
          return Container(
            child: GridTile(
                child: Image.network('https://images.unsplash.com/photo-1629464565884-123b6e6f90c1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2019&q=80',fit: BoxFit.contain,)
            ),
          );
        }),
      ),
      backgroundColor: Colors.white,
    );
  }
}

100

101

102

103

104

105

106

107

108

109

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'package:showcaseview/showcaseview.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

theme: ThemeData(

primarySwatch: Colors.blue,

debugShowCheckedModeBanner: false,

home: MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

@override

_MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

BuildContext context;

@override

Widget build(BuildContext context) {

return Scaffold(

body:ShowCaseWidget(

onStart: (index, key) {

debugPrint('onStart: $index, $key');

onComplete: (index, key) {

debugPrint('onComplete: $index, $key');

if (index == 4)

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light

.copyWith(

statusBarIconBrightness: Brightness.dark,

statusBarColor: Colors.white));

builder: Builder(builder: (context) => Dashboard()),

autoPlay: false,

autoPlayDelay: Duration(seconds: 3),

autoPlayLockEnable: false,

floatingActionButton: FloatingActionButton(

onPressed: () {

}, tooltip: 'Increment',

child: Icon(Icons.add),

));

}

class Dashboard extends StatefulWidget {

@override

_DashboardState createState() => _DashboardState();

}

class _DashboardState extends State<Dashboard> {

GlobalKey _one = GlobalKey();

GlobalKey _two = GlobalKey();

@override

void initState() {

super.initState();

WidgetsBinding.instance.addPostFrameCallback((_) =>

ShowCaseWidget.of(context)

.startShowCase([_one, _two]));

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text("Showcase Widget in Flutter"),

actions: [

Showcase(key: _one,

description: 'Tap to see the notifications',

child: IconButton(

icon: Icon(Icons.notifications), onPressed: () {})),

Showcase(key: _two,

description: 'Tap to update the Profile',

child: IconButton(icon: Icon(Icons.person), onPressed: () {})),

body: GridView.extent(

childAspectRatio: (2 / 2),

crossAxisSpacing: 4,

mainAxisSpacing: 4,

padding: EdgeInsets.all(10.0),

maxCrossAxisExtent: 200.0,

children: List.generate(50, (index) {

return Container(

child: GridTile(

child: Image.network('https://images.unsplash.com/photo-1629464565884-123b6e6f90c1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2019&q=80',fit: BoxFit.contain,)

);

}),

backgroundColor: Colors.white,

);

}

Conclusion

In this blog, we have discussed Showcase in Flutter.

I hope it will help you out in understanding and get a brief idea about it.

You can also check some other interesting blogs – https://mobikul.com/blog/

Thank you for reading!!

References

https://medium.com/simform-engineering/flutter-showcaseview-package-35253106ef80

https://pub.dev/packages/showcaseview

Tanya Goel 27 April 2023

. . .

Showcase in Flutter

Steps for Integrating Showcase in App

Conclusion

References

Leave a Comment Cancel Reply

Message Sent!