How To Easily Implement Flutter Container Shape Circle

Flutter container shape circle

In this Flutter post, we will be implementing Flutter container shape circle using an easy Flutter example. I will be practically explaining everything step by step so you can easily implement Flutter container shape circle in your own Flutter apps.

So let’s not keep you waiting and jump right into our Flutter container shape circle implementation.

What is Flutter Container Shape Circle?

Flutter container shape circle as the name suggests, it is the process of making the shape of Flutter container widget circular. We will first see what the default shape of Flutter container is and then we will be implementing Flutter container shape circle with the help of an easy but proper Flutter example.

Default Flutter Container Shape

The shape of the Flutter container widget depends on its height and width constructors or the child widget that is given it it.

For demonstration, we have given our Flutter container a height and width of value 250. We also have given it a color with a child Flutter text widget. See the below code:

Container(
        height: 250,
        width: 250,
        color: Colors.green,
        alignment: Alignment.center,
        child: Text(
          'Default Flutter Container',
          style: TextStyle(color: Colors.white, fontSize: 17),
        ),
      )
Flutter container default shape
As you can see that the shape of the container is square. Giving it a less height or width will make it rectangular.
Let’s now see how to make Flutter container shape circle.

Implementing Flutter Container Shape Circle

We have to use the decoration constructor of the Flutter container widget and pass it box decoration. Now by passing BoxShape.circle to the shape constructor of the box decoration, we can easily set Flutter container shape circle. See the below code:

decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.green,
        )
Flutter container shape circle
The shape of Flutter container is now completely circular as seen in the above image.
So, by following this guide, you can easily set Flutter container shape circle in your own Flutter apps. Ask without any hesitation if you still have any questions regarding the implementation of Flutter container shape border.
The complete Flutter source code of the above implemented Flutter container shape circle is available in the below section.

Flutter Container Shape Circle Implementation Source Code

Flutter container shape circle

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      body: Center(
          child: Container(
        height: 250,
        width: 250,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.green,
        ),
        alignment: Alignment.center,
        child: Text(
          'Flutter Container Shape Circle',
          style: TextStyle(color: Colors.white, fontSize: 17),
        ),
      )),
    ));
  }
}

Conclusion

In conclusion, hope you now have grasp a detailed practical  knowledge of how to set Flutter container shape circle. Your valuable feedback will be well appreciated. Thank you for reading.

Leave a Comment

Your email address will not be published.