10.8 C
New York
Tuesday, October 4, 2022

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:

ClipRRect(
          borderRadius: BorderRadius.circular(800),
          child: Image.network(
            'https://www.kindacode.com/wp-content/uploads/2022/02/turtle.webp',
            width: 400,
            height: 400,
            fit: BoxFit.cover,
          ),
),

Here’s the result on iOS and Android:

Example 2: Using CircleAvatar widget

The code:

Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(10),
        child: Center(
            child: CircleAvatar(
          radius: 300,
          backgroundImage: NetworkImage(
              'https://www.kindacode.com/wp-content/uploads/2022/02/horse.jpeg',
              scale: 1),
        )),
      ),
);

Screenshot:

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

Advertisements

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles