How to shape Container as Circle in Flutter App

In this example, we are going to show you the easiest way to shape container as circle using circular border raius. We will use BoxDecoration() to shape container circular. see the example below:

How to make Container Circular:

Container( 
    height:200,
    width: 200,
    decoration: BoxDecoration(
      color: Colors.green,
        borderRadius: BorderRadius.circular(100) 
        //more than 50% of width makes circle
    ),
)

Here, container is square with equal height and width, and added circular border raius mroe than 50% of width of container.

Full Dart Code Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
        appBar: AppBar(
           title: Text("Circular Container"),
           backgroundColor: Colors.redAccent,
        ),
        body: Container(
          alignment: Alignment.topCenter,
          padding: EdgeInsets.all(20),
           child: Container( 
              height:200,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.green,
                 borderRadius: BorderRadius.circular(100) 
                 //more than 50% of width makes circle
              ),
           ),
        ),
     );
  }

}

Output Screenshot:

In this way, you can shape Container as circle with circular border radius in Flutter app.