RefreshIndicator comes to help!

Image for post
Image for post

It’s an useful behavior on the mobile app that when we scroll to the top of a vertical scroll view, and overscroll, a refresh indicator will drop down, then the new data updates after we release the control. Flutter provides a handy widget called RefreshIndicator for this purpose.

As the official documentation says, RefreshIndicator is a widget that supports the Material “swipe to refresh” idiom. Today, we’re going to learn how to implement it in our ScrollView.

Table of Contents

  1. Implement RefreshIndicator in ListView.
  2. Implement RefreshIndicator in CustomScrollView.
  3. Cupertino style of refresh indicator in iOS.
  4. Known issues with WebView.

Implement RefreshIndicator in ListView

Let’s try to display 100 random numbers which are generated from Random().nextInt() at the beginning. After pulling to refresh, a new list of random numbers will be regenerated and display on the screen. …

How to make a spread-out and shrink-in ripple page transition?

Image for post
Image for post

Hello guys, today I’m going to introduce another fantastic animation. When users tap the FAB(FloatingActionButton), we navigate them from page A to page B with an animation. Not like traditional fade-in/fade-out or slide-in/slide-out one. It provides a more interesting and intuitive behavior that lets users know there is a transition between two pages via tapping the FAB button. Okay, let’s get started~

Table of Contents

  1. Default page transition
  2. Replace the MaterialPageRoute with a custom fade-in/fade-out PageRouteBuilder
  3. Get the FAB button position/size to mock a ripple widget on it after tapping the FAB
  4. Create a spreading-out ripple effect when entering page B
  5. Create a shrinking-in ripple effect when leaving page…

How to implement a fantastic shimmer effect like Facebook?

Image for post
Image for post

When launching apps, we usually see a loading view while the app is fetching the data from the local database or the server. It is quite easy to implement a loading indicator with Flutter, just use ProgressIndicator.

How to achieve fast nested scrolling effects with Slivers?

Image for post
Image for post

Today we’re going to talk about how to Slivers. Let’s say we want to display a list view or grid view on the screen, we can easily take advantage of ListView or GridView. But what if we want to show them both on the same page and scroll the screen as one page? Slivers comes to save our lives!

Table of Contents

  1. What are Slivers?
  2. Know about CustomScrollView and Slivers
  3. Basic Slivers introduction

1. What are Slivers?

A sliver is a portion of a scrollable area. You can use slivers to achieve custom scrolling effects.

Like the official document says, a Sliver is one of the portions showing in a scrollable area, which should be CustomScrollView. All the scrollable views in Flutter use Slivers, such as ListView or GridView. Because Slivers are lazily build their views when the widgets come into the viewport, it is really useful to show a great number of children without worrying about memory issues. Moreover, we can easily make lots of fantastic scrolling effects by using the Slivers provided by Flutter. …

How to wait for your async tasks before building widgets?

Image for post
Image for post
image from

Today I’m going to have a quick sharing for FutureBuilder. Before we get started, I recommend you watch the video from Google.

We all know that Flutter provides Future, async, await keywords to let us handle the asynchronous tasks.

Basically, we’ll implement it like this:

The fetchData() will wait for 1 second and return the value. Step2() waits for it and then do the following tasks. The output will be like:

I/flutter (13420): Step 1, fetch data
I/flutter (13420): Step 2, hasData: true

This works because we add async, await to step2(). Let’s try another case:

We call step2() without await keyword in step3(), and then it won’t wait for step2(), which doesn’t meet our…

How to choose which Flutter animation is right for you?

Image for post
Image for post

Adding some animations to the app makes it more smooth, and improves the user experience. However, it sometimes confuses us that which approach should we take to achieve the animation. Today, we’re going to figure out the right way for us. In this post, you’ll see a series of questions that will help you determine what kind of solution should be used.

Basically, this post refers to this video from the Flutter team. Before we get started, I strongly recommend you to watch this amazing video.

Table of contents

  1. Drawing-based animations or Code-based…

Image for post
Image for post

I am writing the Flutter app recently. Sometimes we need to provide values from parent widget to child widget, and the official solution is to use InheritedWidget. If we define the parent widget as an InheritedWidget, the child widgets under it could obtain the nearest instance of a particular type of inherited widget from a build context by using BuildContext.dependOnInheritedWidgetOfExactType.

Although the solution above sounds nearly perfect, it takes us lots of time to write boilerplate code. In order to make it better, the Provider, an incredible library, comes to save us.

How to test our coroutines in a correct way?

Image for post
Image for post

We all know unit tests are important and necessary, and we also know we don’t really like to write it 😝. There are plenty of reasons that prevent us from writing good unit tests. The most likely situation I refuse to write it is that it often costs me double to triple time than to develop the main feature. After developing Android apps for 5~6 years, I found the main reasons resulting in that could be classified into two reasons:

  1. There is a high coupling in my code.
  2. I don’t really know how to write unit tests of my production code. …

The simplest way to realize what’s Channel and how to use it.

Image for post
Image for post

I’ve introduced the Kotlin Coroutines basics and Suspending functions in the previous posts. Today, we’re going to learn something about Channel.

As we’ve learned in the Kotlin Coroutines in Android — Basics, Deferred transfers a single value between coroutines. Channel could be considered to provide a stream of values between coroutines.

Table of Contents

  1. Channel basics
  2. Channel.send() and Channel.receive()
  3. Channel.offer() and Channel.poll()
  4. SendChannel.close()
  5. ReceiveChannel.cancel(cause: CancellationException? = null)
  6. Channel capacity policy
    (1) Rendezvous channel
    (2) Buffered channel
    (3) Unlimited channel
    (4) Conflated channel

1. Channel basics

According to the official docs, we could know Channel is very similar to BlockingQueue. The biggest differences are that Channel will suspend coroutine instead of blocking it, and Channel can be closed when no more elements need to be added. …

The power of Suspending Functions and how to implement it to your projects.

Image for post
Image for post
Pictures from Google I/O`19

Before we start, I strongly recommend you watch the introduction of Coroutines Suspending Functions in Google I/O`19.

Understand Kotlin Coroutines on Android, Google I/O`19

They use great images and animations that could help you to know how the Suspending Function works.

In the previous post, we learn about the basic concepts of Kotlin Coroutines.
Please read it if you still have no idea what is Kotlin Coroutines.

I only explained that Suspending Functions allow us to suspend and wait until the function resumes. We didn’t go deeper since there is much to say for it and it worth another post. …


Evan Fang

An Android/Flutter engineer at Line Corporation.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store