11 C
New York
Thursday, November 23, 2023

Flutter: Round Image Examples

This short article walks you through a few examples of creating circular images in Flutter. Without any further ado, let’s see some code.

Note: In the following examples, we will use some images from Pixabay, under the Pixabay License. Advertisements

Example 1: Using ClipRRect and Image widgets

The code:

          borderRadius: BorderRadius.circular(800),
          child: Image.network(
            width: 400,
            height: 400,
            fit: BoxFit.cover,

Here’s the result on iOS and Android:

Example 2: Using CircleAvatar widget

The code:

      appBar: AppBar(
        title: const Text('KindaCode.com'),
      body: const Padding(
        padding: EdgeInsets.all(10),
        child: Center(
            child: CircleAvatar(
          radius: 300,
          backgroundImage: NetworkImage(
              scale: 1),


The two examples in this article are simple but from here, you’re pretty good to go.


Further reading:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Related Articles

Latest Articles