CircleImage
The CircleImage widget is used to show a circular image from uploaded assets or the URL link. The CircleImage widget can display the different types of images such as JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP.
Adding a CircleImage to Your Project
Here's how you can add the CircleImage widget to your project:
Drag the CircleImage widget from the Base Elements tab (in the Widget Panel) or add it directly from the widget tree.
Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
Find the Path property and enter the URL for the new image.
Find the Cache checkbox below, click on it to checkmark. Enabling cache will store the image and display it even when the internet is not available.
Every CircleImage widget added to the project will show a random image from picsum.com by default.
Changing the Image Type
Here are the instructions on changing the Image type.
Add image from Unsplash
See how to add an image from Unsplash here.
Changing the Properties
The Properties Panel can be used to customize the appearance and behavior of your widget.
Add Padding
Here are the instructions on how to add padding.
Adjust the Alignment
Here are the instructions on adjusting the alignment.
Changing Image Size
You can increase or decrease the circular shape of the image using the Radius property.
To change the size of the circular shape of the image:
Select the CircleImage from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
Find the Radius property.
There are three ways to change the image size:
To set to an exact size, select PX and enter the desired values.
To set the dimensions as a % of the screen size, select % and enter the desired value.
Changing the Box Fit
Changing the Box Fit value allows you to control how the image should display inside the CircleImage widget. Various options under the Box Fit property helps you scale (grow or shrink in size) the image inside the CircleImage widget.
To change the Box Fit value:
Select CircleImage from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Image section.
Find the Box Fit dropdown, try changing it to the other values to get the perfect image.
Changing the Box Fit property for the CircleImage will only have an effect if the image has a different height and width. To try it out, you can replace the URL path for the image with https://picsum.photos/id/237/200/300.
Here are all the options that are available for the Box Fit property.
Cover: It shows the image as small as possible while still covering the entire Image widget.
Showing Image on Fullscreen
Please find the instructions on showing the CircleImage on full screen here.
Adding Action
To perform any action on click of the CircleImage, add an Action in FlutterFlow. You can find the instructions on adding the Action here.
Showing Firestore Data
To show the data retrieved from your Firestore collection and document into the CircleImage widget, ensure you:
Understand Structuring the Firebase Database.
Completed all steps in the Firebase Setup section for your project.
Retrieved Data from either collection or document.
Finally, to show data into the CircleImage widget, follow the steps here.
Show error image on failure
See how to display a custom image when an actual image fails to load.
Last updated