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:

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.

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
              ),
           ),
        ),
     );
  }

}

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

No any Comments on this Article


Please Wait...