Hi, we are AppUnite, we take care of the businesses from a tech perspective. We build products and teams around them enabling our clients to bring the difference to the world.

We believe in knowledge sharing and software as a tool to improve companies and peoples’ lives. We take lessons from our daily challenges and share that experience and knowledge to help you build better products. 

Let’s talk about products, businesses, and software development!

These days mobile apps tutorials are kinda frequent. There are few unique takes on that, but I'll focus on the one that highlights certain parts of the screen. I could go in-depth on how to do that with flutter, but instead, I have created a package that does that for you.

In this article, I'm going to go through the [flutter tutorial](https://pub.dev/packages/flutter_tutorial) package and showcase the most interesting features.

I have prepared an example app that doesn't have any functionality but the final effect is more eye-catching.

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/simulator_screenshot_5_FE_0_DE_3_B_9251_4_D9_E_B1_AB_C02609_BAD_0_FF_49038ee06b.png" width="50%" />

<Gist gist="mhnowak/0905e9d3ff7effb3426cc296dd003980" />

## Highlighting a widget

Let's first decide on what elements we'd like to highlight. Let’s start with something simple such as, for example, the widget that selects fonts.

First, we need to create a global key and assign it to the widget.

<Gist gist="mhnowak/1c3e16778d644e7a67940aa2fc930bfd" />

Then we just need to start the tutorial and pass TutorialEntry with a key.

<Gist gist="mhnowak/21d0935cc84b98205156603dc8eef386" />

## Changing background-color

You can also adjust the final opacity after animation, by default it's set to 0.5.

<Gist gist="mhnowak/ddd0e56288a67e5a7ae17cd0af93d08c" />

## Adding text tips 

Usually, in tutorials, we don't want to just highlight items. Tutorials are typically made to guide us through the part of the app that's not that obvious.

<Gist gist="mhnowak/f838af76c43cbf0d9e4046d347e972d4" />

Which altogether gives such an effect:

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/flutter_tutorial_2_17bb8791e6.png" width="50%" />

<Gist gist="mhnowak/cc1438aa88f9cc0055a1f30316cf9597" />

## Changing the size of the highlight

Let's add some more highlight items to our flutter tutorial and let's start with the large text in the middle of the screen. Well, if we pass the key, it'll highlight the whole area, but we probably would want something smaller that shows only the text part, but don't worry! You don't need to change your UI code. We can easily adjust the highlighted item size.

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/flutter_tutorial_3_4c62ed967a.png" width="50%" />

If we create a tutorial entry from RRect value, we can adjust the highlight section to whatever shape we want, we can make it smaller, bigger, round the edges, etc. The code below makes the highlight section smaller.

<Gist gist="mhnowak/3c45695044b867c01e621fbba5f94276" />

But if we want to make it even fancier, we can round the edges like that:

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/flutter_tutorial_4_b8beaa760a.png" width="50%" />

<Gist gist="mhnowak/ab314e828f3ec6751c127f6672bb5870" />

## Using different texts on different pages

You could notice that I've hidden the description text in the previous example. Well, first of all, because we've set it to be in the middle of the screen and it's kind of in the middle of our highlight item. Second of all, because the description doesn't match what's highlighted. Right?

So let's get down to work and start by creating a list that'll contain objects with text and alignment.

<Gist gist="mhnowak/ade04fee67c6851fcf5aa819e6fc5c61" />

Then we can adjust the builder to a currently selected item.

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/flutter_tutorial_5_6738cdfa7c.png" width="50%" />

<Gist gist="mhnowak/91d890eb501351f78cce0c07bccdbe24" />

## Highlighting multiple items
There isn't much to highlight multiple items, you just need to create multiple keys.

<Gist gist="mhnowak/4f2a21c63852952479524535ce99e9c1" />

Don't worry about the animations, they'll run smoothly between entries.

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/flutter_tutorial_6_e8b7571485.gif" width="50%" />

## Using buttons to navigate

Well, sometimes we'd like to have a physical button like "Next tip" to navigate us to the next entry instead of just tapping at the screen. First, let's change `onPressedBehavior` and add a button to the dialog builder. Then we can simply use the `next` method from function arguments.

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/flutter_tutorial_7_1fce1275f9.png" width="50%" />

<Gist gist="mhnowak/84360144d42ef7554b0c5941e6775d9c" />

The same can be done with the previous callback to navigate back.

## Adding animations within the dialog

I think you'll agree with me that since there are no animations within the dialog, this seems kinda stiff. So let's add some simple transition animations, but first, let's move all that dialog logic to a separate class as it's getting big and rather hard to read.
Let's first create animation controllers and wrap the widget that we want to animate in them.

<Gist gist="mhnowak/4831c1cdd69aedc9a80a6a198595dce5" />

<Gist gist="mhnowak/7e4669b3ed77a4816daa93627dcdc699" />

Let's now run the animations, once in initState and then when the button is pressed.

<Gist gist="mhnowak/08fd94236911655c62cb0da350a827d0" />

And that's it, let's see what it looks like!

<img className="no-default-styles" src="https://strapi-appunite.s3.eu-central-1.amazonaws.com/fluttter_tutorial_1_9b13e41b94.gif" width="50%" />

## Starting tutorial in initState
If we want to start the tutorial right away after we load the screen, there's a little catch. Because the widget hasn't finished building yet, we cannot get the reference to the objects from keys. So instead of calling it right away, just schedule it inside SchedulerBinding or add postFrameCallback.

<Gist gist="mhnowak/fa0777a7c3040b60e129a2919c275573" />

## Thanks for reading
If you have any questions or feature requests regarding the package, please feel free to file an issue at the [package's repository](https://github.com/appunite/flutter_tutorial). Full source code for this example can be found [here](https://github.com/appunite/flutter_tutorial/blob/master/example/lib/main.dart).

large_Flutter tutorials.png

medium_Flutter tutorials.png

small_Flutter tutorials.png

thumbnail_Flutter tutorials.png

Flutter tutorials.png

https://strapi-appunite.s3.eu-central-1.amazonaws.com/covers-with-text/922dafac-675e-47ba-ae4d-e4e44cdc448e.png

A step-by-step guide on how to create smooth flutter tutorials

How to create smooth flutter tutorials | AppUnite Blog

How to create smooth flutter tutorials 

Welcome to the second part of my article. [The first part] (https://appunite.com/blog/how-to-improve-technical-skills-as-a-mobile-app-tester) described various steps of learning to mock application data in code during manual testing. This part will cover the first two points from my previous article in more details - learning to use a terminal, getting to know commands, Git workflow and the related tool - GitLab. The content in this article is universal because both things are used when testing any mobile platform.

## Step 1 - using terminal + commands
### Command-line

The first basic step is to learn how to use the tools needed to build the project, since not all of them have a graphical interface. To do this, it's a good idea to start by learning the command line.

MacOS comes with a program called terminal. Using it can be clumsy and uncomfortable for beginners. However, there is an alternative in the form of iTerm, which is an equivalent of the macOS terminal. It has built-in auto-complete functionality, tooltips and is easily configurable, allowing you to add plugins to make your work easier. 

Both tools - terminal and iTerm - allow you to interact with system tools that are necessary to build a project, as well as manage the code repository. This tool provides a text interface for entering commands and so the first key step is to become familiar with Git commands. 

### Terminal and Git commands

The commands that you should learn at first and will use most of the time are:

Terminals:

- `pwd` -  show current location
- `ls` - show files in current location
- `cd <folder_name>` - navigate to the folder with the specified name
- `open <file_name>` - open file
- `cd ..` - go back to the previous folder (lower level)
- `mkdir <folder_name>` - create a folder

Gits:

- `git clone <url>` - cloning a repository to a folder 
- `git fetch` - updating the repository with the server
- `git pull` - downloading the latest changes from the current branch
- `git status` - status of the current branch, shows the changes made
- `git stash` - withdraw the current changes and save them to the working directory
- `git stash pop` - recovering changes from a draft version
- `git clean -fd` - deleting current changes irreversibly
- `git checkout <branch_name>` - change of branch (change will not succeed if there are currently any changes)

Here is a simple and practical task to introduce the “world” of the terminal: opening any file on the desktop using the terminal.

Type the commands in the console:

1. `pwd`
2. `ls`
3. `cd <folder_name>` -  in this case the folder name can be “Desktop”
4. again, it's worth typing "ls" to see what files are on the desktop
5. `open <file_name>` -  if the filename contains spaces, you must use them instead \, so you type e.g. open home\ home.jpg

Result: the photo on the desktop opens

When using iTerm, you can use the prompts. After typing any command, e.g. “cd” and then selecting tab, the following prompts are displayed. Navigating through the prompts to select them uses tab and confirms with enter.

An alternative to using a Git terminal, is to use a tool such as Sourcetree, but for some projects, command-line skills will be necessary.

## Step 2 - getting to know the rules and the Git repository
### Git rules

The next step that comes naturally is learning the rules of Git. You can visualize it by comparing the versioning process during one sprint with, for example, the stages of creating floors while building a block of flats. 

<img src="https://appunite-blog.s3.eu-central-1.amazonaws.com/images/70728d75/f0c4/aG9tZTIuanBn" />

1. Work on the building starts on the ground floor. When developing an application, the first step is to push the changes made to the code to a branch called **FEATURE** or **FEAT**. By this name, you know that it is a version in which work on a particular feature is in progress. Once it is finished, it is pushed to the develop branch where it is ready for testing.

2. The second stage of work in the block shown is the 1st floor, where the last improvements are made. It can be compared to pushing changes to a branch called **FIX**. Then you know that the branch is working on a fix for a feature or bug. After the fix is done, the version lands on the develop branch and is ready for testing.

3. The next phase of work is the 2nd floor, which is finished and turned in for review. In the software development process, the place where the version with a set of features and fixes is ready for staging tests is the **DEVELOP** branch. When it is tested and the test results are positive, it goes to the branch release and is ready for testing on the production environment.

4. In the picture, the third floor is ready and approved by investors. In the process of releasing versions of the application, this stage will mirror the version on production that is on the **RELEASE** branch. When a given version containing all the features and fixes passes the acceptance tests it is ready to be released to the store (the so-called Release Candidate). However, during testing, you may find that adjustments need to be made. Then the fixes are pushed to the release branch, and it is then merged to develop. The final (tested) version is merged onto the master so it can be released to the store. 

5. People use the fourth floor just like they use an app downloaded from the store. The version that is in the store is on the **MASTER** branch.

6. The last floor refers to any repairs during use. When an app is in the store and you find that there is a critical bug that prevents you from using it, you need to fix it as soon as possible. Corrections to this version are pushed to the **HOTFIX** branch. After testing, a version from this branch usually goes straight to the store and later is released on the master branch for consistency.

### Managing a Git repository

There are several platforms used to host a Git repository. In this article, GitLab will be used as an example. It allows us to see a lot of useful information for the tester. Such as: development progress and version numbers, which contain features and fixes that are especially necessary to build the version locally so that it can be tested before releasing it on the test environment. In the pictures below the places where this information is located are marked and described.

<img src="https://appunite-blog.s3.eu-central-1.amazonaws.com/images/3bb8de49/bb06/MS5wbmc=" />

<img src="https://appunite-blog.s3.eu-central-1.amazonaws.com/images/c293ea47/e7f0/Mi5wbmc=" />

<img src="https://appunite-blog.s3.eu-central-1.amazonaws.com/images/8b134273/e114/My5wbmc=" />

## Summary:

And now I can warmly invite you to part 3 of the article, especially if you are interested in the iOS platform. It will include practical examples of how knowledge of Git and the command line can make mobile app testing more efficient, and how to navigate and test in Xcode.


large_mikey-wu-r0Do56ntkBs-unsplash-2.jpg

medium_mikey-wu-r0Do56ntkBs-unsplash-2.jpg

small_mikey-wu-r0Do56ntkBs-unsplash-2.jpg

thumbnail_mikey-wu-r0Do56ntkBs-unsplash-2.jpg

mikey-wu-r0Do56ntkBs-unsplash-2.jpg

https://strapi-appunite.s3.eu-central-1.amazonaws.com/covers-with-text/85a670e7-d595-4eb5-af80-905436a8561d.png

Learn how to use terminal commands and Git workflow on a real example.

Łukasz Niemier

Open sourcing Imager - yet another image processing service