Flutter widget tests: a practical example

When it comes to mobile apps, automated tests play a very important role in app maintenance. So, how do you write tests in Flutter?

As you would expect from a modern framework, Flutter offers both unit and integration tests. But it also offers something else: widget tests.

Widget tests are in between unit and integration. Like a unit test, they run on a simpler test environment (whereas integration tests run on an emulator or device). But they can actually test the UI. You can write a widget test that taps on a button.

With the Android SDK, I write UI tests with Espresso. It works well but the tests take a long time to run. It’s not a problem with CI, as we can use some good sharding libraries. But while I develop, I often run a subset on my local machine, to verify my work, and I get frustrated.

Therefore, I find the concept of widget tests very welcome. It will reduce the number of integration tests on a production app, moving some of them to widget tests.

In this code tutorial, we will create an app with a list page and a details page. On the details page, we can select/unselect an item. Its selected status is shown on the list page via a different background colour.

Then,  we will write unit and widget tests to verify the behaviour of the app.

Continue reading “Flutter widget tests: a practical example”

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

How to implement gestures across several widgets in Flutter

Flutter makes creating custom UI experiences easy. It really does. I mean it.

One example is complex gestures. How about starting a drag gesture to trigger something, and then moving the finger to control something else, and finally dropping it to confirm?

Continue reading “How to implement gestures across several widgets 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 learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

Publishing my first iOS app with Flutter

A few weeks ago, I decided to publish my first Flutter app on the Apple app store. The app had been published on Android for almost a year, but I had actually never tested it on an iPhone. Did Flutter live up to its cross platform claims?

Here are a few things to consider & watch out for, especially if you come from an Android background.

Continue reading “Publishing my first iOS app with 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 learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

Creating flavors of a Flutter app (Flutter & Android setup)

It’s quite common for a native Android app to use productFlavors to set up several apps from the same source code. So, how easy is this to implement in Flutter?

In this code tutorial, we will set up a project with 2 app flavors. Each app will display the app name (specific per flavor), the current date (shared functionality, which includes a string), a short description (specific per flavor), and two images (one specific per flavor, one shared).

Continue reading “Creating flavors of a Flutter app (Flutter & Android setup)”

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

Improve your Flutter app performance: split your widgets

setState … setState … setState … Once you code an app of medium complexity, it becomes very important to think about the performance impact of your Flutter widgets.

Thinking about app performance is about being a good app citizen. Not only the app will be smoother for the user, but also it will drain less battery. And we all know battery is still the single point of failure for smartphones!

The official Stateful Widget doc has some very helpful information on performance considerations. Here, I will focus on the first item: “Push the state to the leaves”.

In this code tutorial, we will set up a screen with a list of shopping items. Each item displays a title and a picture. Some items actually have several pictures available, so we will loop through them in the display, with the picture changing for that item every 2 seconds.

Continue reading “Improve your Flutter app performance: split your widgets”

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

5 lessons learned while working on a complex Flutter application

I’ve spent the last 3 months being the sole developer for a fairly complex Flutter app for a client. It’s been very fun and Flutter is, generally, a pleasure to code with.

It’s also been a learning experience, so I’ve compiled a list of the 5 most important lessons (for me).

Split your stateful widgets

Often, we refactor classes when a file gets big, and that’s fine. But there is another reason to split a stateful widget in Flutter. Remember that the whole widget rebuilds when your code calls setState()? So split your widgets between their static and dynamic content, separate widgets if they contain 2 visual parts that obtain their data separately etc

Example: I had a stack of images, inside a list, and some of the images contained animations. With a simple logic, all the stack code fitted in under 100 LOC in one widget. However, scrolling was a bit jerky. I improved it by creating a widget for each image, and animating those as and when required, instead of rebuilding the whole stack.

Update 29/06/18: I’ve simplified and turned the example above into a code tutorial Improve your Flutter app performance: split your widgets

Continue reading “5 lessons learned while working on a complex Flutter application”

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

How to write async code in Flutter

You may have heard that Dart is single threaded. Coming from a Java/Android background, it can be confusing. How do you handle async code? What concept replaces Android’s AsyncTask and Java’s threads? And how do you implement a callback?

The concept is called Futures. A Future completes with either a value or an error. You use a try/catch statement to catch the error. To create a Future, you use a Completer.

This all sounds very abstract, so let’s dive into an example.

In this code tutorial, we will set up a screen with 2 separate widgets. Both widgets use the same data repository as their data source. The data repository needs to make an API call to initialise its data. While it does so, the widgets show they are waiting for the data. When the data is ready, the widgets display it.

Continue reading “How to write async code 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 learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

How to overlay text and icon on an image in Flutter

When working with images, you often need to overlay text or icons on them. Perhaps to show the name of the image, or an icon to favourite it. In Android, the trusted android:background xml attribute does the trick. In iOS, you can add an UIImageView to the bottom of your view hierarchy. But, how can you do that in Flutter?

One of Flutter’s cornerstone widgets is Container. You often use it for positioning and size. And, it provides a decoration property, which is a decoration painted behind the child.

For this code tutorial, we will set up an app with 2 screens.  The first screen will display an image, with a title at the bottom, aligned left. The second will display the same, with an additional icon in the bottom right of the image.

Continue reading “How to overlay text and icon on an image 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 learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

How to create landscape layouts in Flutter

An overwhelming majority of Flutter code tutorials show phone screens in portrait mode. But what about tablets and landscape mode? Android comes with a system to specify layouts per orientation – can you do this with Flutter?

When I created my first Flutter app Crosswords to learn French, I locked it to portrait mode. This was fine for v1.0, but for v1.1, I wanted to add tablet support. This meant allowing landscape mode. To my surprise, it took only about 30 minutes. You read that right, 30 minutes! As I had already put each UI section into its own widget, it was easy to recombine them based on orientation. And retrieving orientation turned out to be easily done, once I knew where to look ( MediaQuery and MediaQueryData).

Portrait, phone
Portrait, phone
Landscape, 10" tablet
Landscape, 10″ tablet

Note: I chose to maximise crossword size, so I decided not to show the custom keyboard view across the full width of the screen, but, technically, I could have done it just as easily.

For this code tutorial, I will use a simplified version of my app UI. We will create the portrait layout, then the landscape layout.
Continue reading “How to create landscape layouts 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 learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net

How to implement a custom loading animation in Flutter

“Flutter makes it easy and fast to build beautiful mobile apps” . So let’s put this to the test by creating a custom loading animation 🙂

Of course, Flutter provides a widget for Material Design progress indicator,  but let’s create something a bit more custom. How about 4 circles of different colours, growing in size and rotating?

For this code tutorial, we’ll create an app with one screen. When it starts, it simulates loading data, and while it does, a custom animation is shown. When the data is loaded, the animation stops.

Continue reading “How to implement a custom loading animation 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 learning Flutter. LinkedIn natalie ( at ) cogitas (dot) net