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), ), )
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 Implementation Source Code
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.
