Flutter Showcase

A great app UI is one that minimizes the friction between a user and app functionality. A way to reduce that friction is to highlight and showcase the parts of your app. This is helpful when a user launches your app for the first time. With the help of the Showcase and ShowCaseWidget widget, we can showcase the feature in the Flutter app.

The showcase will highlight the most important features of our app. When the user taps on the screen, the widgets we have as part of the showcase will be presented in a predefined order. With the help of the ShowCaseView library, we can easily showcase the app functionality.

You may also check our Flutter app development services.

Steps For Integrating Showcase In App

To Implement showcase in our flutter app, we will have to follow some steps –

Step 1: First start by adding the package dependency to our pubspec.yaml file.

At the time of writing this blog, the version is 1.1.5, you can check the latest version here.

Step 2: Before we implement the showcase for individual widgets, we need to wrap our page that will display the showcase with a ShowCaseWidget.

Step3: Now finally we set up our showcase widget, There are a few things we should note about the Showcase widget configuration.The key, description and child parameters are required parameters.

key: It is a unique GlobalKey to identify features showcased.

description: It is used to display a string about the showcased feature.

child: It is a widget on which we want to perform a showcase.

Full Code:

main.dart

import 'package:flutter/material.dart';
import 'package:showcase_demo/dataModel.dart';
import 'package:showcase_demo/orderItem.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',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ShowCaseWidget(
          builder: Builder(builder: (context) => const OrderList()),
        ),
      ),
    );
  }
}

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

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

class _OrderListState extends State<OrderList> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  final GlobalKey _one = GlobalKey();
  final GlobalKey _two = GlobalKey();
  final GlobalKey _three = GlobalKey();
  final GlobalKey _four = GlobalKey();
  List<Items> items = [Items(
      entityId: '00000001',
      status: 'complete',
      total: '\$50.00',
      createdAt: '2022-04-25',
      billingName: 'Johny Doe',
    ), Items(
      entityId: '00000002',
      status: 'closed',
      total: '\$150.00',
      createdAt: '2022-04-25',
      billingName: 'Mathew ',
    ), Items(
      entityId: '00000003',
      status: 'processing',
      total: '\$70.00',
      createdAt: '2022-04-25',
      billingName: 'Paul',
    ), Items(
      entityId: '00000004',
      status: 'complete',
      total: '\$128.00',
      createdAt: '2022-04-25',
      billingName: 'Johny Doe',
    ),];

  @override
  void initState() {
    super.initState();
    //Start showcase view after current widget frames are drawn.
    WidgetsBinding.instance!.addPostFrameCallback(
      (_) => ShowCaseWidget.of(context)!
          .startShowCase([_one, _two, _three, _four]),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      backgroundColor: Colors.white,
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: const <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        leading: Showcase(
          key: _one,
          description: 'Tap here to open drawer',
          child: IconButton(
            onPressed: () {
              _scaffoldKey.currentState!.openDrawer();
            },
            icon: const Icon(Icons.menu),
          ),
        ),
        actions: [
          Showcase(
              key: _two,
              description: 'Tap to see notification',
              child: IconButton(
                  onPressed: () {
                    // Navigate to notification screen  //
                  },
                  icon: const Icon(Icons.notifications_active)))
        ],
        title: const Text('Showcase demo'),
      ),
      body: Column(
        children: <Widget>[
          ListView.builder(
            physics: const BouncingScrollPhysics(),
            shrinkWrap: true,
            itemCount: items.length,
            itemBuilder: (context, index) {
              if (index == 0) {
                return Showcase(
                    key: _three,
                    description:
                        'Long Press to select the Item Or Tap to see order details ',
                    child: OrderListItem(
                      order: items[index],
                    ));
              }
              return OrderListItem(
                order: items[index],
              );
            },
          )
        ],
      ),
      floatingActionButton: Showcase(
        key: _four,
        title: 'New Order',
        description: 'Click here to create new Order',
        shapeBorder: const CircleBorder(),
        child: FloatingActionButton(
          onPressed: () {
            // Navigate to new Order screen //
          },
          child: const Icon(
            Icons.add,
          ),
        ),
      ),
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

import 'package:flutter/material.dart';

import 'package:showcase_demo/dataModel.dart';

import 'package:showcase_demo/orderItem.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',

debugShowCheckedModeBanner: false,

home: Scaffold(

body: ShowCaseWidget(

builder: Builder(builder: (context) => const OrderList()),

);

}

class OrderList extends StatefulWidget {

const OrderList({Key? key}) : super(key: key);

@override

_OrderListState createState() => _OrderListState();

}

class _OrderListState extends State<OrderList> {

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

final GlobalKey _one = GlobalKey();

final GlobalKey _two = GlobalKey();

final GlobalKey _three = GlobalKey();

final GlobalKey _four = GlobalKey();

List<Items> items = [Items(

entityId: '00000001',

status: 'complete',

total: '\$50.00',

createdAt: '2022-04-25',

billingName: 'Johny Doe',

), Items(

entityId: '00000002',

status: 'closed',

total: '\$150.00',

createdAt: '2022-04-25',

billingName: 'Mathew ',

), Items(

entityId: '00000003',

status: 'processing',

total: '\$70.00',

createdAt: '2022-04-25',

billingName: 'Paul',

), Items(

entityId: '00000004',

status: 'complete',

total: '\$128.00',

createdAt: '2022-04-25',

billingName: 'Johny Doe',

),];

@override

void initState() {

super.initState();

//Start showcase view after current widget frames are drawn.

WidgetsBinding.instance!.addPostFrameCallback(

(_) => ShowCaseWidget.of(context)!

.startShowCase([_one, _two, _three, _four]),

);

}

@override

Widget build(BuildContext context) {

return Scaffold(

key: _scaffoldKey,

backgroundColor: Colors.white,

drawer: Drawer(

child: ListView(

padding: EdgeInsets.zero,

children: const <Widget>[

DrawerHeader(

decoration: BoxDecoration(

color: Colors.green,

child: Text(

'Drawer Header',

style: TextStyle(

color: Colors.white,

fontSize: 24,

ListTile(

leading: Icon(Icons.message),

title: Text('Messages'),

ListTile(

leading: Icon(Icons.account_circle),

title: Text('Profile'),

ListTile(

leading: Icon(Icons.settings),

title: Text('Settings'),

appBar: AppBar(

leading: Showcase(

key: _one,

description: 'Tap here to open drawer',

child: IconButton(

onPressed: () {

_scaffoldKey.currentState!.openDrawer();

icon: const Icon(Icons.menu),

actions: [

Showcase(

key: _two,

description: 'Tap to see notification',

child: IconButton(

onPressed: () {

// Navigate to notification screen //

icon: const Icon(Icons.notifications_active)))

title: const Text('Showcase demo'),

body: Column(

children: <Widget>[

ListView.builder(

physics: const BouncingScrollPhysics(),

shrinkWrap: true,

itemCount: items.length,

itemBuilder: (context, index) {

if (index == 0) {

return Showcase(

key: _three,

description:

'Long Press to select the Item Or Tap to see order details ',

child: OrderListItem(

order: items[index],

));

}

return OrderListItem(

order: items[index],

);

)

floatingActionButton: Showcase(

key: _four,

title: 'New Order',

description: 'Click here to create new Order',

shapeBorder: const CircleBorder(),

child: FloatingActionButton(

onPressed: () {

// Navigate to new Order screen //

child: const Icon(

Icons.add,

);

}

orderItem.dart:

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

class OrderListItem extends StatefulWidget {
  final Items? order;

  const OrderListItem(
      {Key? key, this.order,}) : super(key: key);

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

class _OrderListItemState extends State<OrderListItem> {
  @override
  void initState() {
    super.initState();
  }



  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPress: () {
        // select item //
      },
      onTap: () {
        // Navigate to order details //
      },
      child: _cardView(),
    );
  }

  Widget _cardView() {
    return Card(
      child:  Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text("#" + (widget.order?.entityId?.toString() ?? ""),
                    style: Theme.of(context).textTheme.bodyText1),
                Text(widget.order?.total?.toString() ?? '0',
                  style: Theme.of(context).textTheme.headline6,
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Container(
                      height: 8,
                      width: 8,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          color: (widget.order?.status ?? false) == "closed"
                              ? Colors.red
                              : (widget.order?.status ?? false) == "complete"
                              ? Colors.green
                              : (widget.order?.status ?? false) ==
                              "processing"
                              ? Colors.blue
                              : Colors.yellow),
                    ),

                    Text(widget.order?.status ?? "",
                        style: Theme.of(context).textTheme.bodyText2),
                  ],
                ),
                Flexible(
                  child: Text(
                    widget.order?.createdAt?.toString() ?? '',
                    style: Theme.of(context).textTheme.bodyText2,
                  ),
                ),
              ],
            ),

            Row(
              children: [
                Flexible(
                  child: Text(
                    widget.order?.billingName?.toString() ?? '',
                    style: Theme.of(context).textTheme.subtitle2,
                  )
                )
              ],
            ),
          ],
        ),
      ),
    );
  }


}

100

101

102

import 'package:flutter/material.dart';

import 'dataModel.dart';

class OrderListItem extends StatefulWidget {

final Items? order;

const OrderListItem(

{Key? key, this.order,}) : super(key: key);

@override

_OrderListItemState createState() => _OrderListItemState();

}

class _OrderListItemState extends State<OrderListItem> {

@override

void initState() {

super.initState();

}

@override

Widget build(BuildContext context) {

return GestureDetector(

onLongPress: () {

// select item //

onTap: () {

// Navigate to order details //

child: _cardView(),

);

}

Widget _cardView() {

return Card(

child: Padding(

padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8.0),

child: Column(

mainAxisSize: MainAxisSize.min,

children: [

Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

Text("#" + (widget.order?.entityId?.toString() ?? ""),

style: Theme.of(context).textTheme.bodyText1),

Text(widget.order?.total?.toString() ?? '0',

style: Theme.of(context).textTheme.headline6,

Row(

mainAxisAlignment: MainAxisAlignment.spaceBetween,

children: [

Row(

children: [

Container(

height: 8,

width: 8,

decoration: BoxDecoration(

borderRadius: BorderRadius.circular(100),

color: (widget.order?.status ?? false) == "closed"

? Colors.red

: (widget.order?.status ?? false) == "complete"

? Colors.green

: (widget.order?.status ?? false) ==

"processing"

? Colors.blue

: Colors.yellow),

Text(widget.order?.status ?? "",

style: Theme.of(context).textTheme.bodyText2),

Flexible(

child: Text(

widget.order?.createdAt?.toString() ?? '',

style: Theme.of(context).textTheme.bodyText2,

Row(

children: [

Flexible(

child: Text(

widget.order?.billingName?.toString() ?? '',

style: Theme.of(context).textTheme.subtitle2,

)

);

}

Note: In opening some screens you may face context issues.

Exception: Please provide ShowCaseView context

1	Exception: Please provide ShowCaseView context

When you face the above issue then you need to provide the correct context to the ShowCaseWidget widget.

Output:

Conclusion

In this blog, we have discussed showcasing our app features.

I hope it will help you to understand and get a brief idea about it.

Thank you for reading!! 🙏🏻

flutter Flutter Showcase

Mohit Kumar 25 April 2023

. . .

Discuss on Helpdesk

Flutter Showcase ￼

Steps For Integrating Showcase In App

Conclusion