Welcome to faaft | Welcome My Forum

[Hoca]

A terrific app UI is one which minimizes the friction between a consumer and its performance. A wonderful approach to cut back that friction is to spotlight and showcase the components of your app that are integral to its usability. That is notably useful when a consumer launches your app for the primary time or while you replace the app with some new options.


Showcaseview is a customizable and easy to implement bundle you should use to point out your customers round an important options of your Flutter app.

The Completed App​

The completed app will look and behave just like the one within the video under. While you run the app, the showcase will begin immediately on the house web page. It can be began by tapping the data button within the app bar.

The showcase will spotlight an important options of our app. Because the consumer faucets on the display screen, the widgets now we have as a part of the showcase can be offered in predefined order. This sort of conduct additionally extends to the settings web page which may have its personal showcase.

When the showcase highlights the settings button within the dwelling web page, we can faucet on that button and be taken to the settings web page the place the second showcase will begin. As soon as the showcase on the settings web page ends, we will return to the house web page and proceed the earlier showcase from the place we left off.

Getting Began​

On this tutorial we’re going to get to the nitty-gritty of the showcaseview package. We’ll get into all the setup particulars, discover totally different customization choices, study to arrange multi-page showcase performance and extra. Since we wish to put our essential give attention to implementing the bundle, we’re going to begin with a base app UI. You may seize the starter challenge from the hyperlink under if you need to comply with alongside.

Let’s first begin by including the bundle dependency to our pubspec.yaml file. On the time of scripting this tutorial the model is 1.1.0, it’s migrated to null-safety, so you might be all set to make use of it with the newest model of Flutter.

dependencies:
  flutter:
    sdk: flutter
  showcaseview: ^1.1.0

Starter challenge overview​

The starter challenge we can be working with is a UI for a water consumption monitoring app. The app consists of a HomePage and a SettingsPage.

The HomePage shows an AppBar with a number one assist button and a settings motion button that takes you to the SettingsPage. The physique has a Column containing CupsNumberDisplay and CupsGoal widgets. Moreover, this web page comprises a FloatingActionButton within the backside proper nook.

The SettingsPage is easier, that includes solely a Column with a SettingsControls widget and a few textual content. Since we’re focusing solely on showcasing our UI components, the performance of the app is restricted to routing from the HomePage to the SettingsPage.

ShowCaseWidget​

Earlier than we implement the showcase for particular person widgets, we have to wrap our web page that may show the showcase with a ShowCaseWidget. We should set the required builder parameter, which can include the Builder widget returning our HomePage. Let’s go to the essential.dart file and implement that now within the dwelling parameter of the MaterialApp.

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

ShowCaseWidget optionally available parameters​

ShowCaseWidget comprises a number of optionally available parameters. Most notably you’ll be able to present callback capabilities to the onStart, onFinish and onComplete parameters.

The onStart perform will execute on the begin of your showcase and the onFinish will execute when all of the showcase ends. onComplete will run each time you progress on from one widget in your showcase to the following.

There may be additionally the autoPlay parameter that may be set to true if you wish to undergo showcase mechanically, with out the consumer tapping on the display screen. We received’t be configuring the above-mentioned parameters on this tutorial, however it’s price it to familiarize your self with them.

Creating International Keys​

For the ShowCaseWidget to know which widgets we wish to be showcased, we have to create a key for each one of these widgets. In our app, there are three widgets we wish to deliver to the eye of our customers after they attain the HomePage. Let’s now create three GlobalKey objects proper above the construct technique of our _HomePageState.

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

Showcase Widgets​

It’s lastly time to arrange our widgets! The Showcase widget, to not be confused with the ShowCaseWidget wraps round each widget you wish to be included in your showcase. Let’s begin by including one round our settings icon within the AppBar.

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 some things we must always word in regards to the Showcase widget configuration. The key, description and baby parameters are required, so we should present them as we do right here. We use our beforehand initialized _key1 right here as a result of we wish this to be the first widget that’s displayed within the showcase. For styling, we’re offering values to shapeBorder (form highlighting the kid), showcaseBackgroundColor (background shade of the tooltip), descTextStyle and setting the padding for the overlay and the tooltip content material.

Creating the second Showcase widget​

Earlier than we get to see what this all seems like in motion, let’s add yet one more Showcase widget to our code. Go forward and place it across the Column situated within the physique of our HomePage. For this one, we may also add a title.

physique: Middle(
  baby: SingleChildScrollView(
    baby: Showcase(
      key: _key2,
      title: 'Complete & Purpose Water Consumption',
      description: 'Observe your whole and objective water consumption',
      showArrow: false,
      overlayPadding: const EdgeInsets.all(8),
      showcaseBackgroundColor: Colours.indigo,
      textColor: Colours.white,
      baby: Column(
        mainAxisAlignment: MainAxisAlignment.middle,
        kids: [
          CupsNumberDisplay(
            size: 200,
          ),
          const SizedBox(
            height: 60,
          ),
          CupsGoal(),
        ],
      ),
    ),
  ),
),
 ...

Beginning the Showcase​

Our ShowCaseWidget and two of the Showcase widgets are totally configured, however after we run the app, nothing occurs. That’s as a result of we have to inform the ShowCaseWidget when to begin the showcase. Let’s discover two of the attainable methods this may be accomplished – by tapping the data button within the AppBar and on web page construct.

You too can arrange a approach to begin the showcase solely when a consumer runs your app for the primary time. A technique to do that is by utilizing the shared_preferences bundle to retailer a worth you can test for to see if the consumer has used your app earlier than. This fashion you’ll be able to conditionally begin your showcase.​

Beginning the showcase on button faucet​

Go on over to the data IconButton within the AppBar and add the next code to the button’s onPressed parameter.

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

Right here we’re setting the state and calling the startShowCase technique on our beforehand configured ShowCaseWidget. We have to move in a Checklist of beforehand created international keys to the startShowCase technique. The keys have to be within the order that the corresponding widgets ought to present up in the course of the showcase. We’re offering all three of our keys right here although we solely arrange two widget. The third widget can be configured in a while on this tutorial.

Beginning the showcase on web page construct​

For the showcase to begin on web page construct, we might want to name the startShowCase technique within the initState of the HomePage. Notice, nonetheless, that calling this technique simply the way in which we did within the button would produce an error. To stop this from occurring, we have to place this technique name inside a callback perform and supply it to WidgetsBinding.occasion!.addPostFrameCallback(). It will be sure that the whole lot is executed appropriately in the course of the construct. Now, if you happen to run the app, our stunning showcase will begin as quickly because the web page builds. Faucet by way of it till the showcase is completed. Then you’ll be able to faucet on the assistance button, and it’ll begin once more.

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

Showcase.withWidget – Create Totally Customized Showcases​

The showcaseview package makes it very easy to create Showcase widgets, which show a chic tooltip subsequent to your goal widget. We are able to additionally substitute the tooltip with our very personal, customized widget by utilizing the Showcase.withWidget constructor. Let’s just do that for our FloatingActionButton which can be our remaining widget within the showcase for the HomePage.

floatingActionButton: Showcase.withWidget(
  key: _key3,
  top: 50,
  width: 50,
  container: Icon(
    Icons.local_drink,
    dimension: 50,
    shade: Colours.blue[200],
  ),
  shapeBorder: const CircleBorder(),
  overlayPadding: const EdgeInsets.all(8),
  baby: FloatingActionButton(
    onPressed: () {},
    backgroundColor: Colours.indigo[900],
    baby: const Icon(Icons.add),
  ),
),
...

Showcase.withWidget has a container parameter that accepts a Widget. For our challenge we’re including a easy icon, however you may get extra inventive. We’re additionally required so as to add top and width properties that may have an effect on how the container widget is displayed.

onTargetClick​

Let’s dive into some extra capabilities of the Showcase widget. Presently, if our showcase is operating and the lively widget is tapped, nothing occurs. This conduct will be modified by configuring the onTargetClick parameter. When the settings button is tapped, we wish to be taken to the SettingsPage, even when the showcase is at present operating.

When utilizing onTargetClick we’re required to set the disposeOnTap parameter on the Showcase widget. It accepts a boolean worth that determines whether or not the present showcase is disposed or continues when the goal widget is tapped. Since we wish to be navigated to the SettingsPage when the widget is tapped, we are going to set disposeOnTap to true. If set to false, on this state of affairs, the showcase will proceed even on the brand new route and that’s positively not one thing we wish. Let’s go forward and implement all of this now.

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

SettingsPage Showcase​

It’s time to move 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’ll solely be one Showcase on this web page, so we will additionally create the GlobalKey for it now.

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

The showcase ought to begin on web page construct, much like how it’s arrange within the HomePage, however with one distinction. To name the startShowCase technique, we have to entry it by way of the ShowCaseWidget that’s situated inside our SettingsPage construct technique. For this, we have to receive the BuildContext of that ShowCaseWidget. To entry this context we are going to create a nullable variable, myContext. We’ll populate it with the BuildContext of the ShowCaseWidget from contained in the builder perform of the Builder widget. As soon as that is accomplished, the startShowCase technique will be known as from inside initState, the identical manner as within the HomePage. Simply be certain to make use of the myContext variable rather than context.

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

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

Including the SettingsPage Showcase widget​

Time to complete up the brand new showcase by wrapping the SettingsControls widget situated within the physique of our SettingsPage with a Showcase.

physique: Column(
  mainAxisAlignment: MainAxisAlignment.middle,
  kids: [
    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,
      ),
    ),
  ],
),
...

Closing Enhancements​

Each showcases in our app are arrange and totally functioning. There are, nonetheless, just a few issues we can and ought to enhance on.


Once we faucet on the settings button in the course of the HomePage showcase, we’re routed to the SettingsPage. Nonetheless, after we return to the HomePage, the earlier showcase doesn’t proceed from the place we left off. Additionally, after we go to the SettingsPage the showcase begins whereas the routing animation is nonetheless occurring, which seems just a little odd. Let’s go forward and repair these now.

Persevering with the showcase​

We wish to proceed the HomePage showcase from the place we left off after routing again from the SettingsPage. To do that, we have to add a bit extra code to the onTargetClick perform we arrange earlier. Since Navigator.push returns a Future, we will register a callback on it utilizing .then. From this callback we are going to name startShowCase within setState, this time offering solely the keys for the remaining widgets.

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

Enhancing the routing animation​

Now there is just one factor left to do. That’s to make sure the SettingsPage showcase begins solely after the routing animation has completed.

We are able to simply do that by putting the startShowCase technique name inside a Future.delayed. By delaying the beginning of the showcase a bit the whole lot will look a lot better. Let’s just do that and add a delay Length of 400 milliseconds. After you’ve accomplished this, check it out and see how a lot better it seems!

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

Conclusion​

There you’ve it, a completely functioning showcase personalized in varied methods with the routing state of affairs lined! Take what you’ve discovered right here and apply it in your personal initiatives. The showcaseview package is definite to make your app a lot simpler for brand spanking new customers to study and navigate.