Sometimes, the user interface of a mobile app can be complex. We may need to add custom shapes for design purposes. In this Flutter example, Let’s see how to create a round shape in flutter easily.
You can create a circle in flutter easily using Container, BoxDecoration, and BoxShape widgets as given below.
Container(
width: 300.0,
height: 300.0,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),)Following is the complete Flutter circle shape example.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'Flutter Circle Example',
),
),
body: Center(
child: Container(
width: 300.0,
height: 300.0,
decoration: const BoxDecoration(
color: Colors.blue,
shape: BoxShape.circle,
),
),
),
);
}
}
The output is given below.
I hope this simple flutter tutorial will be helpful for you.
