Flutter – Round Image

Round Image in Flutter

To display a Round Image in Flutter, you can use Container with BoxDecoration, and use BoxShape.circle for shape and provide the image for image property.

Sample Code Snippet

Following is a quick code snippet that outlines the widgets and property values to display a image in the shape of a circle.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
	shape: BoxShape.circle,
	image: DecorationImage(
	  image: NetworkImage('https://googleflutter.com/sample_image.jpg'),
	  fit: BoxFit.fill
	),
  ),
),

In this tutorial, we have loaded image over network. You can also, load an image from assets.

Example

In this example, we will create a Flutter Application to display an image as a circular disc in UI.

To recreate this application, create a basic Flutter Application and replace main.dart with the following code.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("Flutter Tutorial - googleflutter.com"),
      ),
      body: Center(
          child: Column(children: <Widget>[
        Container(
          margin: EdgeInsets.all(20),
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            image: DecorationImage(
              image: NetworkImage('https://googleflutter.com/sample_image.jpg'),
              fit: BoxFit.fill
            ),
          ),
        ),
      ])),
    );
  }
}

Screenshot

Run the application on an emulator or device, and you should see an UI as shown below.

Summary

In this Flutter Tutorial, we displayed an image in round or circle shape.