How do I add a circle in Flutter?

Adding a circle in Flutter is typically achieved using the Container widget with a specific decoration.

Creating a Circular Container

The most straightforward way to create a circular shape in Flutter is by utilizing the Container widget and its decoration property. Creating a circular container in Flutter is a straightforward process.

The key is to use the decoration property of the container widget and set the shape to BoxShape.circle.

Here's a breakdown of the essential steps:

1. Use a Container Widget: This widget allows you to define areas with dimensions, padding, margins, and decorations.
2. Set the decoration Property: Assign a BoxDecoration object to the decoration property of the Container.
3. Specify the shape: Inside the BoxDecoration, set the shape property to BoxShape.circle. This tells Flutter to draw the container as a circle (or ellipse if dimensions are unequal).
4. Define Size: Provide equal width and height to the Container to ensure it's a perfect circle rather than an ellipse. If only one dimension is provided, the other will often default or match, but explicitly setting both is clearer.
5. Add Color (Optional but common): Specify a color within the BoxDecoration to fill the circle. Note: Do not set the color property directly on the Container if you are using decoration, as this will cause an error.
6. Add Content (Optional): The child property can be used to add content to the container.

Example Code

Here's a simple example of how to create a small blue circle:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Circle Example')),
        body: Center(
          child: Container(
            width: 100.0,
            height: 100.0,
            decoration: BoxDecoration(
              shape: BoxShape.circle, // This makes it a circle
              color: Colors.blue, // Fill color
            ),
          ),
        ),
      ),
    );
  }
}

In this code:

• We create a Container with width and height of 100.0.
• We use the decoration property with BoxDecoration.
• Inside BoxDecoration, we set shape: BoxShape.circle to define the circular form and color: Colors.blue to give it a blue fill.

Key Properties for Circular Containers

Understanding the properties involved helps in customizing your circle:

Property	Applies To	Description	Usage
width	Container	Sets the width of the container. Equal to height for a perfect circle.	width: 100.0
height	Container	Sets the height of the container. Equal to width for a perfect circle.	height: 100.0
decoration	Container	Paints decoration behind the child. Requires a BoxDecoration object.	decoration: BoxDecoration(...)
shape	BoxDecoration	Defines the shape of the box. Set to BoxShape.circle for a circle.	shape: BoxShape.circle
color	BoxDecoration	The color to fill the box shape with.	color: Colors.red
borderRadius	BoxDecoration	Defines rounded corners. Cannot be used when shape is BoxShape.circle. This property is relevant for creating rounded rectangles, and the borderRadius property can be used to create rounded corners, but not for perfect circles made with BoxShape.circle.	borderRadius: BorderRadius.circular(10) (for rounded corners)
child	Container	The widget below this one in the tree. Can be used to add content.	child: Icon(Icons.star)

Using BoxShape.circle is the most direct way to render a circular shape with Container.