107  comments


A great app UI is one that minimizes the friction between a user and its functionality. An excellent way to reduce that friction is to highlight and showcase the parts of your app which are integral to its usability. This is particularly handy when a user launches your app for the first time or when you update the app with some new features.

Showcaseview is a customizable and simple to implement package you can use to show your users around the most important features of your Flutter app.

The Finished App

The finished app will look and behave like the one in the video below. When you run the app, the showcase will start instantly on the home page. It can also be started by tapping the info button in the app bar. 

The showcase will highlight the most important features of our app. As the user taps on the screen, the widgets we have as part of the showcase will be presented in predefined order. This type of behavior also extends to the settings page which will have its own showcase.

When the showcase highlights the settings button in the home page, we will be able to tap on that button and be taken to the settings page where the second showcase will start. Once the showcase on the settings page ends, we can go back to the home page and continue the previous showcase from where we left off. 


Getting Started

In this tutorial we are going to get to the nitty-gritty of the showcaseview package. We will get into all of the setup details, explore different customization options, learn to set up multi-page showcase functionality and more. Since we want to put our main focus on implementing the package, we are going to start with a base app UI. You can grab the starter project from the link below if you would like to follow along.

Let’s first start by adding the package dependency to our pubspec.yaml file. At the time of writing this tutorial the version is 1.1.0, it is migrated to null-safety, so you are all set to use it with the latest version of Flutter.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  showcaseview: ^1.1.0

Starter project overview

The starter project we will be working with is a UI for a water intake tracking app. The app consists of a HomePage and a SettingsPage.

 The HomePage displays an AppBar with a leading help button and a settings action button that takes you to the SettingsPage. The body has a Column containing CupsNumberDisplay and CupsGoal widgets. Additionally, this page contains a FloatingActionButton in the bottom right corner.

The SettingsPage is simpler, featuring only a Column with a SettingsControls widget and some text. Since we are focusing solely on showcasing our UI elements, the functionality of the app is limited to routing from the HomePage to the SettingsPage.

ShowCaseWidget

Before we implement the showcase for individual widgets, we need to wrap our page that will display the showcase with a ShowCaseWidget. We must set the required builder parameter, which will contain the Builder widget returning our HomePage. Let’s go to the main.dart file and implement that now in the home parameter of the MaterialApp.

main.dart

return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Water Tracker',
      home: ShowCaseWidget(
        builder: Builder(
          builder: (context) => const HomePage(),
        ),
      ),
    );

ShowCaseWidget optional parameters

ShowCaseWidget contains several optional parameters. Most notably you can provide callback functions to the onStart, onFinish and onComplete parameters.

The onStart function will execute on the start of your showcase and the onFinish will execute when all the showcase ends. onComplete will run every time you move on from one widget in your showcase to the next.

There is also the autoPlay parameter that can be set to true if you want to go through showcase automatically, without the user tapping on the screen. We won’t be configuring the above-mentioned parameters in this tutorial, but it is worth it to familiarize yourself with them.

Creating Global Keys

For the ShowCaseWidget to know which widgets we want to be showcased, we need to create a key for every one of those widgets. In our app, there are three widgets we want to bring to the attention of our users when they reach the HomePage. Let’s now create three GlobalKey objects right above the build method of our _HomePageState.

home_page.dart

class _HomePageState extends State<HomePage> {
  final _key1 = GlobalKey();
  final _key2 = GlobalKey();
  final _key3 = GlobalKey();
...

Showcase Widgets

It’s finally time to set up our widgets! The Showcase widget, not to be confused with the ShowCaseWidget wraps around every widget you want to be included in your showcase. Let’s start by adding one around our settings icon in the AppBar.

home_page.dart


actions: [
  IconButton(
    onPressed: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (_) => SettingsPage(),
        ),
      );
    },
    icon: Showcase(
      key: _key1,
      description: 'Change your water intake goal settings',
      shapeBorder: const CircleBorder(),
      showcaseBackgroundColor: Colors.indigo,
      descTextStyle: const TextStyle(
        fontWeight: FontWeight.w500,
        color: Colors.white,
        fontSize: 16,
      ),
      overlayPadding: const EdgeInsets.all(8),
      contentPadding: const EdgeInsets.all(20),
      child: const Icon(Icons.settings),
    ),
  ),
],
 ...

There are a few things we should note about the Showcase widget configuration. The key, description and child parameters are required, so we must provide them as we do here. We use our previously initialized _key1 here because we want this to be the first widget that is displayed in the showcase. For styling, we are providing values to shapeBorder (shape highlighting the child), showcaseBackgroundColor (background color of the tooltip), descTextStyle and setting the padding for the overlay and the tooltip content.

Creating the second Showcase widget

Before we get to see what this all looks like in action, let’s add one more Showcase widget to our code. Go ahead and place it around the Column located in the body of our HomePage. For this one, we will also add a title.

home_page.dart


body: Center(
  child: SingleChildScrollView(
    child: Showcase(
      key: _key2,
      title: 'Total & Goal Water Intake',
      description: 'Track your total and goal water intake',
      showArrow: false,
      overlayPadding: const EdgeInsets.all(8),
      showcaseBackgroundColor: Colors.indigo,
      textColor: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          CupsNumberDisplay(
            size: 200,
          ),
          const SizedBox(
            height: 60,
          ),
          CupsGoal(),
        ],
      ),
    ),
  ),
),
 ...

Starting the Showcase

Our ShowCaseWidget and two of the Showcase widgets are fully configured, but when we run the app, nothing happens. That is because we need to tell the ShowCaseWidget when to start the showcase. Let’s explore two of the possible ways this can be done - by tapping the info button in the AppBar and on page build.

You can also set up a way to start the showcase only when a user runs your app for the first time. One way to do this is by using the shared_preferences package to store a value that you can check for to see if the user has used your app before. This way you can conditionally start your showcase. 

Starting the showcase on button tap

Go on over to the info IconButton in the AppBar and add the following code to the button’s onPressed parameter.

home_page.dart


return Scaffold(
  appBar: AppBar(
    leading: IconButton(
      onPressed: () => setState(() {
        ShowCaseWidget.of(context)!.startShowCase([
          _key1,
          _key2,
          _key3,
        ]);
      }),
      icon: const Icon(
        Icons.help_rounded,
      ),
    ),
 ...

Here we are setting the state and calling the startShowCase method on our previously configured ShowCaseWidget. We need to pass in a List of previously created global keys to the startShowCase method. The keys need to be in the order that the corresponding widgets should show up during the showcase. We are providing all three of our keys here even though we only set up two widget. The third widget will be configured later on in this tutorial.

Starting the showcase on page build

For the showcase to start on page build, we will need to call the startShowCase method inside of the initState of the HomePage. Note, however, that calling this method just the way we did in the button would produce an error. To prevent this from happening, we need to place this method call inside a callback function and provide it to WidgetsBinding.instance!.addPostFrameCallback(). This will ensure that everything is executed correctly during the build. Now, if you run the app, our beautiful showcase will start as soon as the page builds. Tap through it until the showcase is finished. Then you can tap on the help button, and it will start all over again.

home_page.dart


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

Showcase.withWidget - Create Fully Custom Showcases

The showcaseview package makes it really easy to create Showcase widgets, which display an elegant tooltip next to your target widget. We can also replace the tooltip with our very own, custom widget by using the Showcase.withWidget constructor. Let’s do just that for our FloatingActionButton which will be our final widget in the showcase for the HomePage.

home_page.dart


floatingActionButton: Showcase.withWidget(
  key: _key3,
  height: 50,
  width: 50,
  container: Icon(
    Icons.local_drink,
    size: 50,
    color: Colors.blue[200],
  ),
  shapeBorder: const CircleBorder(),
  overlayPadding: const EdgeInsets.all(8),
  child: FloatingActionButton(
    onPressed: () {},
    backgroundColor: Colors.indigo[900],
    child: const Icon(Icons.add),
  ),
),
...

Showcase.withWidget has a container parameter that accepts a Widget. For our project we are adding a simple icon, but you can get more creative. We are also required to add height and width properties that will affect how the container widget is displayed.

onTargetClick

Let’s dive into some additional capabilities of the Showcase widget. Presently, if our showcase is running and the active widget is tapped, nothing happens. This behavior can be modified by configuring the onTargetClick parameter. When the settings button is tapped, we want to be taken to the SettingsPage, even if the showcase is currently running.  

When using onTargetClick we are required to set the disposeOnTap parameter on the Showcase widget. It accepts a boolean value that determines whether the current showcase is disposed or continues when the target widget is tapped. Since we want to be navigated to the SettingsPage when the widget is tapped, we will set disposeOnTap to true. If set to false, in this scenario, the showcase will continue even on the new route and that is definitely not something we want. Let’s go ahead and implement all of this now.

home_page.dart


...
icon: Showcase(
  key: _key1,
  description: 'Change your water intake goal settings',
  disposeOnTap: true,
  onTargetClick: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => SettingsPage(),
      ),
    );
  },
...

SettingsPage Showcase

It’s time to head over to the SettingsPage and implement the showcase for that route. First, let’s create the ShowCaseWidget, returning the Scaffold from the Builder widget. There will only be one Showcase on this page, so we can also create the GlobalKey for it now.

settings_page.dart


@override
Widget build(BuildContext context) {
  return ShowCaseWidget(
    builder: Builder(
      builder: (context) {
        return Scaffold(...

The showcase should start on page build, similar to how it is set up in the HomePage, but with one difference. To call the startShowCase method, we need to access it through the ShowCaseWidget that is located inside our SettingsPage build method. For this, we need to obtain the BuildContext of that ShowCaseWidget. To access this context we will create a nullable variable, myContext. We will populate it with the BuildContext of the ShowCaseWidget from inside the builder function of the Builder widget. Once this is done, the startShowCase method can be called from inside initState, the same way as in the HomePage. Just make sure to use the myContext variable in place of context.

settings_page.dart


class _SettingsPageState extends State<SettingsPage> {
final _key1 = GlobalKey();
BuildContext? myContext;
void initState() {
  super.initState();
  WidgetsBinding.instance!.addPostFrameCallback((_) {
    ShowCaseWidget.of(myContext!)!.startShowCase([_key1]);
  });
}

@override
Widget build(BuildContext context) {
  return ShowCaseWidget(
    builder: Builder(
      builder: (context) {
        myContext = context;
        return Scaffold(...

Adding the SettingsPage Showcase widget

Time to finish up the new showcase by wrapping the SettingsControls widget located in the body of our SettingsPage with a Showcase.

settings_page.dart


body: Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Showcase(
      key: _key1,
      title: 'Change Your Water Goal',
      description:
          'Increase or decrease the number of cups for your goal',
      showcaseBackgroundColor: Colors.indigo,
      textColor: Colors.white,
      child: SettingsControls(),
    ),
    const SizedBox(
      height: 30,
    ),
    Text(
      'Adjust your water intake goal',
      style: TextStyle(
        fontWeight: FontWeight.w500,
        color: Colors.grey[700],
        fontSize: 16,
      ),
    ),
  ],
),
...

Final Improvements

Both showcases in our app are set up and fully functioning. There are, however, a few things we can and should improve on.

When we tap on the settings button during the HomePage showcase, we are routed to the SettingsPage. However, when we go back to the HomePage, the previous showcase doesn’t continue from where we left off. Also, when we go to the SettingsPage the showcase starts while the routing animation is still happening, which looks a little odd. Let’s go ahead and fix these now.

Continuing the showcase

We want to continue the HomePage showcase from where we left off after routing back from the SettingsPage. To do this, we need to add a bit more code to the onTargetClick function we set up earlier. Since Navigator.push returns a Future, we can register a callback on it using .then. From this callback we will call startShowCase inside of setState, this time providing only the keys for the remaining widgets.

home_page.dart


...
icon: Showcase(
  key: _key1,
  description: 'Change your water intake goal settings',
  disposeOnTap: true,
  onTargetClick: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => SettingsPage(),
      ),
    ).then(
      (_) {
        setState(
          () {
            ShowCaseWidget.of(context)!.startShowCase(
              [
                _key2,
                _key3,
              ],
            );
          },
        );
      },
    );
  },
...

Improving the routing animation

Now there is only one thing left to do. That is to ensure the SettingsPage showcase starts only after the routing animation has finished.

We can easily do this by placing the startShowCase method call inside a Future.delayed. By delaying the start of the showcase a bit everything will look much better. Let’s do just that and add a delay Duration of 400 milliseconds. After you’ve done this, test it out and see how much better it looks!

settings_page.dart


class _SettingsPageState extends State<SettingsPage> {
final _key1 = GlobalKey();
BuildContext? myContext;
void initState() {
  super.initState();
  WidgetsBinding.instance!.addPostFrameCallback((_) {
    Future.delayed(const Duration(milliseconds: 400), () {
      ShowCaseWidget.of(myContext!)!.startShowCase([_key1]);
    });
  });
}

Conclusion

There you have it, a fully functioning showcase customized in various ways with the routing scenario covered! Take what you’ve learned here and apply it in your own projects. The showcaseview package is certain to make your app much easier for new users to learn and navigate.

About the author 

Ashley Novik

Ashley is a Flutter developer and tutor at Reso Coder with a passion for tech and an infinite drive to learn and teach others ?.
On her days off she enjoys exploring nature and powering through off-road trails on her mountain bike ?‍♀️.

You may also like

Flutter UI Testing with Patrol

Flutter UI Testing with Patrol
  • Fantastic beat ! I would like to apprentice while you amend your web site, how could i subscribe for a blog site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear concept

  • What i do not understood is in truth how you are not actually a lot more smartly-liked than you may be now. You are very intelligent. You realize therefore significantly in the case of this topic, produced me individually imagine it from numerous numerous angles. Its like men and women don’t seem to be fascinated until it is one thing to do with Woman gaga! Your own stuffs nice. All the time care for it up!

  • Thank you, I have just been searching for information approximately this topic for a while and yours is the best I have found out so far. However, what in regards to the bottom line? Are you certain concerning the supply?

  • I do trust all the ideas you’ve presented in your post. They are really convincing and will definitely work. Nonetheless, the posts are too short for newbies. May just you please lengthen them a bit from next time? Thank you for the post.

  • Hi, Neat post. There’s an issue together with your web site in internet explorer, may test this텶E still is the marketplace chief and a good component of people will pass over your fantastic writing due to this problem.

  • Hello, Neat post. There’s an issue together with your site in internet explorer, would check this텶E still is the marketplace chief and a large element of other folks will leave out your magnificent writing due to this problem.

  • I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the web will be much more useful than ever before.

  • Just wish to say your article is as surprising. The clearness in your post is just cool and i could assume you’re an expert on this subject. Fine with your permission allow me to grab your RSS feed to keep updated with forthcoming post. Thanks a million and please keep up the enjoyable work.

  • Magnificent beat ! I would like to apprentice while you amend your site, how can i subscribe for a blog web site? The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear idea

  • I loved even more than you will get done right here. The picture is nice, and your writing is stylish, but you seem to be rushing through it, and I think you should give it again soon. I’ll probably do that again and again if you protect this walk.

  • Modern Talking был немецким дуэтом, сформированным в 1984 году. Он стал одним из самых ярких представителей евродиско и популярен благодаря своему неповторимому звучанию. Лучшие песни включают “You’re My Heart, You’re My Soul”, “Brother Louie”, “Cheri, Cheri Lady” и “Geronimo’s Cadillac”. Их музыка оставила неизгладимый след в истории поп-музыки, захватывая слушателей своими заразительными мелодиями и запоминающимися текстами. Modern Talking продолжает быть популярным и в наши дни, оставаясь одним из символов эпохи диско. Музыка 2024 года слушать онлайн и скачать бесплатно mp3.

  • Your writing is not only informative but also incredibly inspiring. You have a knack for sparking curiosity and encouraging critical thinking. Thank you for being such a positive influence!

  • I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an impatience over that https://brazzers.pw/ you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike.

  • you are in reality a good webmaster The website loading velocity is amazing It sort of feels that youre doing any distinctive trick Also The contents are masterwork you have done a fantastic job in this topic

  • What i do not understood is in truth how you are not actually a lot more smartlyliked than you may be now You are very intelligent You realize therefore significantly in the case of this topic produced me individually imagine it from numerous numerous angles Its like men and women dont seem to be fascinated until it is one thing to do with Woman gaga Your own stuffs nice All the time care for it up

  • you are in reality a just right webmaster The site loading velocity is incredible It seems that you are doing any unique trick In addition The contents are masterwork you have performed a wonderful task on this topic

  • hiI like your writing so much share we be in contact more approximately your article on AOL I need a specialist in this area to resolve my problem Maybe that is you Looking ahead to see you

  • I am not sure where youre getting your info but good topic I needs to spend some time learning much more or understanding more Thanks for magnificent info I was looking for this information for my mission

  • Thanks I have recently been looking for info about this subject for a while and yours is the greatest I have discovered so far However what in regards to the bottom line Are you certain in regards to the supply

  • Estou navegando on-line há mais de três horas hoje, mas nunca encontrei nenhum artigo interessante como o seu. Vale bastante para mim. Na minha opinião, se todos os proprietários de sites e blogueiros criassem um bom conteúdo como você, a Internet seria muito mais útil do que sempre antes

  • Simplesmente desejo dizer que seu artigo é tão surpreendente A clareza em sua postagem é simplesmente excelente e posso presumir que você é um especialista neste assunto. Com sua permissão, deixe-me pegar seu feed para me manter atualizado com as próximas postagens. Um milhão de agradecimentos e por favor continue o trabalho gratificante

  • Your blog is a shining example of excellence in content creation. I’m continually impressed by the depth of your knowledge and the clarity of your writing. Thank you for all that you do.

  • Belo blog aqui Além disso, seu site carrega muito rápido Qual host você está usando Posso obter seu link de afiliado para seu host? Desejo que meu site carregue tão rápido quanto o seu haha

  • Batida maravilhosa, gostaria de aprender enquanto você altera seu site, como posso me inscrever em um blog? A conta me ajudou a fazer um acordo aceitável. Eu estava um pouco ciente disso, sua transmissão forneceu uma ideia clara e clara

  • certainly like your website but you need to take a look at the spelling on quite a few of your posts Many of them are rife with spelling problems and I find it very troublesome to inform the reality nevertheless I will definitely come back again

  • I just could not leave your web site before suggesting that I really enjoyed the standard information a person supply to your visitors Is gonna be again steadily in order to check up on new posts

  • obviously like your website but you need to test the spelling on quite a few of your posts Several of them are rife with spelling problems and I to find it very troublesome to inform the reality on the other hand Ill certainly come back again

  • I am not sure where youre getting your info but good topic I needs to spend some time learning much more or understanding more Thanks for magnificent info I was looking for this information for my mission

  • Hi Neat post Theres an issue together with your web site in internet explorer may test this IE still is the marketplace chief and a good component of people will pass over your fantastic writing due to this problem

  • Drip Irrigation Pipes in Iraq At Elite Pipe Factory, our drip irrigation pipes are engineered to provide efficient water delivery for agricultural applications. These pipes are designed to minimize water wastage and enhance crop yields, reflecting our commitment to advancing irrigation technology in Iraq. As a leading and reliable manufacturer, Elite Pipe Factory ensures that our drip irrigation pipes are of the highest quality, contributing to successful farming practices. Explore our drip irrigation solutions at elitepipeiraq.com.

  • شركة Bwer هي أحد الموردين الرئيسيين لموازين الشاحنات ذات الجسور في العراق، حيث تقدم مجموعة كاملة من الحلول لقياس حمولة المركبات بدقة. وتغطي خدماتها كل جانب من جوانب موازين الشاحنات، من تركيب وصيانة موازين الشاحنات إلى المعايرة والإصلاح. تقدم شركة Bwer موازين شاحنات تجارية وموازين شاحنات صناعية وأنظمة موازين جسور محورية، مصممة لتلبية متطلبات التطبيقات الثقيلة. تتضمن موازين الشاحنات الإلكترونية وموازين الشاحنات الرقمية من شركة Bwer تقنية متقدمة، مما يضمن قياسات دقيقة وموثوقة. تم تصميم موازين الشاحنات الثقيلة الخاصة بهم للبيئات الوعرة، مما يجعلها مناسبة للصناعات مثل الخدمات اللوجستية والزراعة والبناء. سواء كنت تبحث عن موازين شاحنات للبيع أو الإيجار أو التأجير، توفر شركة Bwer خيارات مرنة لتناسب احتياجاتك، بما في ذلك أجزاء موازين الشاحنات والملحقات والبرامج لتحسين الأداء. بصفتها شركة مصنعة موثوقة لموازين الشاحنات، تقدم شركة Bwer خدمات معايرة موازين الشاحنات المعتمدة، مما يضمن الامتثال لمعايير الصناعة. تشمل خدماتها فحص موازين الشاحنات والشهادات وخدمات الإصلاح، مما يدعم موثوقية أنظمة موازين الشاحنات الخاصة بك على المدى الطويل. بفضل فريق من الخبراء، تضمن شركة Bwer تركيب وصيانة موازين الشاحنات بسلاسة، مما يحافظ على سير عملياتك بسلاسة. لمزيد من المعلومات حول أسعار موازين الشاحنات، وتكاليف التركيب، أو لمعرفة المزيد عن مجموعة موازين الشاحنات ذات الجسور وغيرها من المنتجات، تفضل بزيارة موقع شركة Bwer على الإنترنت على bwerpipes.com

  • I just could not leave your web site before suggesting that I really enjoyed the standard information a person supply to your visitors Is gonna be again steadily in order to check up on new posts

  • I do not even know how I ended up here but I thought this post was great I dont know who you are but definitely youre going to a famous blogger if you arent already Cheers

  • I loved as much as you will receive carried out right here The sketch is attractive your authored material stylish nonetheless you command get got an impatience over that you wish be delivering the following unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike

  • Noodlemagazine naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.

  • I loved as much as youll receive carried out right here The sketch is attractive your authored material stylish nonetheless you command get bought an nervousness over that you wish be delivering the following unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hike

  • Mitolyn I’m often to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your web site and maintain checking for brand spanking new information.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >