How to know when user has tapped the back button or back navigation arrow in Flutter

A common Android UI pattern for edit screens is to ask the user to confirm that they want to discard their changes when they tap the back button or back navigation arrow. So, how do you catch this user event in Flutter?

Well, after a fair amount of trial and error, the solution turned out to be quite simple, using a WillPopScope.

Continue reading “How to know when user has tapped the back button or back navigation arrow in Flutter”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

How to implement swipe to dismiss in a list in Flutter

A fairly common UI action for lists in native apps is “swipe to dismiss”. That is, the user can swipe left, or right, and a leave-behind UI element indicates what will happen if the user continues on with swiping. Typically, the leave-behind element is a delete icon.

Flutter comes with a UI widget called Dismissible – as the name suggests, it enables us to implement this pattern. This code tutorial will show you how.

Continue reading “How to implement swipe to dismiss in a list in Flutter”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

Flutter UI code tutorial: mastering Row and Column

Learning a new UI engine is always tricky. Thankfully, the Flutter team has highlighted the basic widgets. For this code tutorial, we will focus on Row and Column, which lay out a list of child widgets in the horizontal and vertical direction respectively.

First off, my favourite thing about them is that, even though you may mistake them for Android SDK’s LinearLayout at first, they are actually far more flexible, yet easy to understand.

To figure out how Row and Column work, we will start from 3 different mock-ups and lay them out using them. We will do this as part of an app with 3 screens (one screen per example).

For each example, we will have a rough sketch of what we want, with notes to describe how each part of the layout behaves. Why rough hand drawn sketches and not fancy mock ups done in Photoshop? Because I want to show you a simple process that you can apply to your own mock ups. Oh, and also because pen and paper is a very useful tool (see Tip 3 of 4 tips to boost your software development career).

A few basic rules to remember

The documentation is rich in explanations about how Flutter lays things out, but, when you’re starting out, this is a bit daunting. So, I’ve extracted a few basic Flutter UI rules that will allow you to build many layouts.
Continue reading “Flutter UI code tutorial: mastering Row and Column”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

How to startActivityForResult in Flutter?

Most Android apps make use of startActivityForResult at one point or another. But, how do you do this in Flutter?

The official doc

The very helpful Flutter For Android Developers page on the official Flutter website demonstrates a way to do it using Navigator.of(context).pushNamed.

However, in the official doc about Navigation, using MaterialPageRoute is recommended for Material Design apps. So, how do you combine the two?

Adapting the official doc to using MaterialPageRoute

My first attempt provided a crash, as below.

Turned out it was due to using new MaterialPageRoute<Null>, which I had copied from the Navigation page. The solution: replace Null with dynamic.
Continue reading “How to startActivityForResult in Flutter?”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

How to write an integration test in Flutter

We all know that no app is maintainable without tests. Indeed, strength of a framework is a function of how easy integration tests are to write and maintain. And I don’t say this lightly – I wrote Android integration tests for a 4.3 rated app with more than one million downloads before Espresso came along!

Flutter offers 3 types of tests: unit, widget, and integration tests. For this code tutorial, I will focus on integration tests – usually the most difficult to write, yet the most rewarding to have.
Continue reading “How to write an integration test in Flutter”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

How to implement a GestureDetector in Flutter?

Flutter does provide common widgets handling tap, such as IconButton. But sometimes, you need to detect gestures on a custom view: here comes GestureDetector!

How to add a GestureDetector

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Continue reading “How to implement a GestureDetector in Flutter?”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

How to scroll to a position in Flutter ListView?

Flutter ListView is very easy to use, and very versatile. As an Android developer used to creating Adapters for my RecyclerViews, I appreciate the simplicity of Flutter. However, one often used functionality is lacking, and it is smoothScrollToPosition(int position).

There is currently an open github issue  requesting this very feature.

In the meanwhile, for lists where all items have the same height, there is a trick you can use.
Continue reading “How to scroll to a position in Flutter ListView?”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net

How to parse JSON in Dart / Flutter

JSON is a cornerstone in most Android apps, but how do you parse JSON in Dart and Flutter?

As mentioned in my “4 tips to boost your software development career” post, I’ve been experimenting with Flutter recently. Dart, the language used by Flutter, comes with a good library to parse JSON (dart:convert) but after having used gson for years in my Android apps, I had to relearn how to parse JSON.

If you Google gson for Dart , you will also find a library called dson. However, for this code tutorial, I’m focusing on using dart:convert.

To follow the code tutorial, create a new app as follows.

If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.

Continue reading “How to parse JSON in Dart / Flutter”

Android app developer with 8 years experience, ranging from start ups to large tech (Google) and non tech (British Airways) companies. Currently freelancing and doing code reviews. LinkedIn natalie ( at ) cogitas (dot) net