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.
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”
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).
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”
Most Android apps make use of startActivityForResult at one point or another. But, how do you do this in Flutter?
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?
My first attempt provided a crash, as below.
|
1 2 3 4 5 |
I/flutter (23315): ??? EXCEPTION CAUGHT BY GESTURE ???????????????????????????????????????????????????????????????????? I/flutter (23315): The following assertion was thrown while handling a gesture: I/flutter (23315): type '_InternalLinkedHashMap' is not a subtype of type 'Null' of 'result' where I/flutter (23315): _InternalLinkedHashMap is from dart:collection I/flutter (23315): Null is from dart:core |
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?”
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”
Flutter does provide common widgets handling tap, such as IconButton. But sometimes, you need to detect gestures on a custom view: here comes GestureDetector!
To follow the code tutorial, create a new app as follows.
|
1 |
flutter create gesturedetectorexample |
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?”
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 ratings and reviews: we love them, and we fear them. At times, it can feel that users only bother with them to complain. Sure, we like to hear about the issues in our apps so we can improve them, but a little love would be nice too!
There is a simple trick to increase your Android app ratings, but it needs to be deployed with care.
Overall, the foremost requirement to get higher ratings is to have a good app. If your app doesn’t do what users expect it to do, improve your app rather than obsess about your ratings.
So, before reading on, ask yourself: are you proud of your app?
Continue reading “How to increase your Android app ratings”
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.
|
1 |
flutter create parsejsonexample |
If you’re unsure how to set up a Flutter app, check out Getting started with Flutter official tutorial.
Software development is a fast-changing field. But, you, personally, do you write code now that you wouldn’t have written a year ago? If not, you may be missing out on a lot of career opportunities (as well as a lot of fun).
I’m NOT suggesting you do the tips below in your spare time. I don’t believe in the myth of “You need to have x personal coding projects to show your software development skills”. Indeed, I have a young family and I restrict my working hours (Sounds crazy? Read Why the CEO of Basecamp only allows employees to work 32 hours a week). You should try the tips below while working as you normally do.
We all have tasks we don’t like doing. We know them, our colleagues know them, our employers know them (or soon will), and they are holding us back. Most often than not, it’s just a silly reluctance: yes, we may never love doing them, but there is no reason to let them stop us from progressing in our career.
Continue reading “4 tips to boost your software development career”