Creating a circular image button with a Material splash effect in Flutter should be easy, and once you know how, it is! Hopefully, this tutorial on how to create a rounded image button in Flutter will save you the three hours I spent :)
Why do we need an entire article on how to make an image round? Well, if you’re interested in making it look nice and react to touch, read on to find out! But first, there’s quite a bit of interesting history behind rounded images. For one, they used to not exist!
Just a few years ago, people were still using square image icons. Now, we live in much more civilized times so circular image icons it is!
In the early days of Android, creating creating circular image icons was much more difficult than it should have been. It was a huge problem that consumed many hours of productivity and had many creative solutions. This is evidenced by the fact that some of the most starred Android libraries on Github are dedicated to creating rounded images.
10,000 stars — https://github.com/hdodenhof/CircleImageView
5,000 stars — https://github.com/vinc3m1/RoundedImageView
Thankfully, Flutter comes with great built in widgets that give us all the tools we need to create beautiful circular images, with touch effects and drop shadows too!
Without further ado, let’s build this beautiful image icon:
The magic here is wrapping the `InkWell` in an `Ink.image()` decoration. That gives us the nice Material ink splash we want when the user touches the image.
Using a InkWell without a Ink decoration hides the splash effect. This happens because of the properties of the InkWell widget and the order in which layout items are rendered.
An InkWell “must have a Material widget as an ancestor” because the ink effect is drawn on the material itself. This presents a problem when you have an image as the child of an InkWell because the image covers the material!
Flutter renders views in descending order so from bottom to top, you have Material > InkWell > Image. The image obscures the Material so ink effects on the material are not visible. To the user, it looks like nothing is happening.
Find out more about the Ink decoration here: https://docs.flutter.io/flutter/material/Ink-class.html
The next article will cover how to select user images and load them into the circle icon. Follow me to be notified :)
Additional references:
https://github.com/flutter/flutter/issues/3782
