Leaf: Flutter Social Media App — Part 5: Orientation, Gesture and Navigation

6 min readNov 23, 2019

Hello good people! Hope you’re having a wonderful day! Last time, I created a simple new feed with some posts in it. Today, I’m going to build on top of that.

Today I’m writing about

Orientation of mobile devices and designing UI while keeping it in mind.
Gesture Detection and how to use it to implement functionalities.
Basic navigation from one page to another and back.

Hope you’re excited! Let’s get started.

Past mistakes

I made two mistakes in the last post (That I can think of). These are:

I didn’t update the test file for home_page.dart file. I changed the widget HomePage, but didn’t update the tests for it. That’s why when running the tests Travis CI informed me of test failure.
When I designed the PostCard widget I didn’t consider the landscape orientation. I only designed it for portrait. When rotating the mobile the UI goes from decent to ugly fast.

Mistake #1: Not updating the tests

Lesson: Always update your tests when you update your code, if the testing parameters have changed.

I removed two tests which were

Test to see if there are exactly n number of texts.
Test to see if “Hello World!” text appears.

I added two tests which were

Check to see if there is exactly one ListView widget.
Check to see if there is at least one PostCard widget.

Mistake #2: Not checking orientation

Lesson: Always check user interface in both orientations when designing

Mobile Orientations

What’s the mistake?

In my last post, when designing the PostCard widget I only checked it in the portrait orientation. I forgot to look at it in the landscape orientation. As a result, the values I assigned to AspectRatio and Expanded widgets weren’t appropriate for the landscape orientation.

What’s the fix?

There are two ways to fix this problem.

I could create a complete new widget for the landscape orientation. This would be a viable option if I wanted to make a different look for landscape orientation.
I could just assign values at specific points (after checking which orientation the device is in) of the current widget to make it fit the landscape orientation. I’m going to do this. Because I want the look to be the same in both orientations.

I created a global _isLandscape() function that checks to see if the device is in landscape or not. The function uses MediaQuery to get the orientation of the device.

MediaQuery class contains many useful data about the media (device) such as size, orientation and so on.

If _isLandscape() returns true, I assign a value appropriate for the landscape orientation. Otherwise I assign a value appropriate for the portrait orientation.

Code for checking orientation

The snippet below shows how I used the function for AspectRatio widget. I checked to see if _isLandscape(context) is true. If so I assigned 6/2 to aspectRatio variable. Otherwise, I assigned 6/3 to it.

A few syntactical things to note here. You might know this from dart language overview but I’m gonna mention this here again.

condition ? statement1 : statement2 is way of writing a simple if else condition. If condition is true, statement1 is executed. Otherwise statement2 is executed.
Anything that begins with _ is local to that scope. It can’t be used or even referenced outside that scope. In this case, _isLandscape() function can’t be used outside this file even if the file is imported there. Basically, use _ to make something private to that scope.

The same thing was done for Expanded widgets further down the widget tree. I’m not going to provide the snippet for those here. Check the repository to see the changes I’ve made.

After the fix this is how the app looks like now.

New UI that takes into account the orientation of the screen.

Updating tests for PostCard widget

As I’ve changed the PostCard widget I need to update the tests for it. The updated tests can be found in my project repository.

Gesture Detection

What are gestures?

What are their usage?

Gestures are used to interact with the app in a meaningful way. We can bind a gesture to execute a specific function. For example: tapping could do one thing, while long pressing could do another thing. Gestures provide a powerful mechanism to add functionality to the user interface of an app.

Widget needed to implement gestures

Gestures can be implemented by using GestureDetector. It has options to implement many different gestures. Some other widgets exist that have some gesture mechanisms built-in like ListTile, InkWell, Button etc. Today, I’ll use GestureDetector to implement the necessary functionality.

Coding the implementation

I added GestureDetector to the top level of my PostCard widget as shown in the code snippet below:

In the onTap parameter, I’m going to write a function that’ll show a new page. In this page, the full length of the post will be shown. The page will allow the user to react to and comment on the post. For today, I’m just going to create a very basic page and navigate to it. I’ll design the page in the later part of the series.

Navigation

What is navigation?

In mobile apps, navigation means going from one page to another.

How to navigate in Flutter?

To navigate use the Navigator class. push and pushNamed functions can be used to go to a new page. Because I haven’t touched routing names yet, I’m going to use push() function.

Line 10 to 14 shows how I implemented navigation. When a navigation happens, Flutter needs to know where to go. This can be done in two ways.

A name can be assigned to a route or
A route can be created using MaterialPageRoute class.

Here, I created a route using the latter.

Wait… what is a Route?

Lemme quote the official flutter documentation

In Flutter, screens and pages are called routes.

For now knowing this much is enough. We’ll delve more into routing and advanced navigation in future posts. Saving and running the app shows that navigation works as expected.

I wrote tests for the new page. Not going to post the snippet here. Check the repository for the code.

Summary

That’s all for today. We made great progress. We learnt about the following things today:

When changing the contents of a file, make sure to update the tests as well.
Check orientation when designing the user interface components.
Use gesture to add functionality to UI components.
Navigating to a new page using Navigator API.

Important Links

Parts of the series

Support me by

Applauding and sharing this article.
Following me in GitHub and Medium.
Starring the GitHub project.
Starting a discussion regarding this project.

Thanks for reading! Hope you have a great day. Happy coding!