Putting build methods on a diet - tips and tricks for cleaner Flutter UI code

Flutter is great - it rocks.

We have modern, fresh APIs for building complex UIs in a quite small amount of code. Stateful hot reload is great - we can be five screens deep in our navigation hierarchy, do some UI changes, press Cmd + S and the UI changes in less than a second, without losing the state.

But when it comes to creating more full-fledged apps, we will end up having a lot of UI code. With more code, comes more responsibility to keep it readable. Keeping code readable makes it more maintainable in the long term.

More …

Orchestrating multiple animations and creating a visual enter animation in Flutter

Last week, we ended up with a nice looking artist details page.

While I had played around with animations in Flutter before, there wasn’t a tutorial on how to orchestrate multiple animations together. Since that tutorial now exists, I thought this would be the perfect time to test it out.

The result of this tutorial.

Just having a quick glance at the animation APIs, I thought having something meaningful ready would take some time. Learning an entirely new animation API would probably require some getting used to, right?

I was wrong. I was able to whip up the prototype for this tutorial in one hour.

Without further ado, let’s get to animating.

More …

From Wireframes to Flutter #2 - Artist details page with a blurred background

It’s been a quite long time since the last post. Since I now figured out the ultimate way to finish articles, hopefully, I’ll be able to push some more content more often. Spoiler alert: it involves beer.

Today, we’re turning the beautiful artist profile page mockup by pramod into a real Flutter UI. For the mock data, we’re using one of my all-time favorite musicians, Andy Fraser, and a couple of the most amazing live performances he did with Free.

Here’s what the result looks like:

The result we're making in this tutorial.

Without further ado, let’s go straight into it.

More …

Separating build environments in Flutter apps, part #1 - environment-specific configuration in Dart side

When developing mobile apps professionally, we’ll need to have at least two different environments: a development and a production one. This way we can develop and test new features in the development backend, without accidentally breaking anything for the production users.

Currently, the official Flutter documentation doesn’t have any recommendations on how to do this. Like usual, a quick Google search is your friend. It turns out we can do some StackOverflow driven programming.

More …

JSON and serialization in Flutter

UPDATE: This article now lives as part of the official documentation.

It is hard to think of a mobile app that doesn’t need to communicate with a web server or easily store structured data at some point. When making network-connected apps, the chances are that we need to consume some good old JSON, sooner or later.

In this tutorial, we look into ways of using JSON with Flutter. We go over what JSON solution to use in different scenarios and why.

More …

Implementing adaptive master-detail layouts in Flutter

Usually, when developing apps for mobile phones, having too much screen real estate is not the problem. In fact, quite the contrary. Much thought has to be put into how to structure the app so that it does not feel cluttered. On tablets, it is a whole different story.

Let’s see what I am talking about through an example.

Result & source code

For the impatient, here’s what the result looks like on a mobile and tablet device:

The result of our tutorial.

The source code is available here. If you get stuck, here is the entire git diff for what it took to convert the existing app to be adaptive.

More …

Validating forms in Flutter

Coming from a native mobile development background, form validation has definitely been a pet peeve of mine. It’s not that validating forms is hard, but the thing is that it usually results in awkward looking code. Getting references to fields, finding out their values, validating them and manually displaying and hiding errors becomes cumbersome really fast.

With Flutter, form validation is much more enjoyable to work with. Let’s take a look why.

The sample app

See the sample app here.

Validating forms - the “old” Android way

To put things on perspective, let’s look at a typical form validation setup in a native Android development context.

The resulting app from our native Android sample code.

More …