In any good app, images are one of the key essentials. Image handling has always been a tricky part for developers. Developers always want some sort and easy method to handle the shape and size of the image. Flutter has come up with a very quick fix for this issue we face with a very handy Widget.

In this blog, I’ll be taking you through the overview, usage, and implementation of a widely popular widget known as ClipOval.

Table Of Contents:

What is ClipOval?

Constructor

Properties

Code implementation

Code Files

Conclusion

What is ClipOval?:

ClipOval is a widget that can be used to wrap any image into circular or oval form. It does not matter whether the image is square, rectangular, or any other shape. The size and location of a clip oval can be customized using child class.

The ClipOval widget does have some standard rules which it follows while its application on images for an eg a square image will be converted into a circular image, an image having any dimensions longer than the counterpart will be elongated into that direction. However, the shape will remain oval.

Constructor:

We need to use the below constructor to use the ClipOval widget in our code.

const ClipOval({Key? key, this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget? child})
: assert(clipBehavior != null),
super(key: key, child: child);

Properties:

• > Child-This property is used to define the parent builder widget under which it is being passed.
• > ClipBehaviour– It controls the clipping behavior of the ClipOval widget on which it has been passed to. It must not be set to null or clip. none. There is further three behavior that can be passed under this property.

➤ Clip.hardEdge

➤ Clip.antiAlias

➤ Clip.antiAliasWithSaveLayer

• > CustomClipper<Rect>? Clipper– If it has been passed as non-null then it determines which clip should be used. It is used to create custom-shaped clipped images. We can pass dimensions as per our requirements.

Code Implementation:

Create a new dart file called main.dart inside the lib folder.

After which we will create a class inside the main.dart file.First, we will try to implement the ClipOval widget in its default form that means we won’t be using the custom clipper.

class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Devs'),
backgroundColor: Colors.blue,
),
body: Center(
child: ClipOval(
child: Image.network(
'https://images.unsplash.com/photo-1561731216-c3a4d99437d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80',
fit: BoxFit.fill),
),
),
backgroundColor: Colors.lightBlue[50],
);
}
}

Here we are simply creating a new class and then passing the image in the scaffold widget. To get the desired oval shape we have wrapped the image in ClipOval.

Now we will try the same image using a custom clipper in the below code. For doing this we will create a custom clipper method in a whole new class. We will extend the class to Customclipper<Rect>.

class MyClip extends CustomClipper<Rect>

To make sure that our clipper works as per our requirement we will pass two methods getClip and shouldReclip.

class MyClip extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTWH(50, 0, 300, 300);
}

bool shouldReclip(oldClipper) {
return false;
}
}

The getClip method takes the size of the child and returns to Rect into which flutter will draw the oval. Also, you can place this Rect anywhere and give it any size as per your requirement regardless of the child’s size.

The second method is just a cross-check for flutter to check whether there is any need to clip the image again or not. It takes the boolean value as a return argument. Normally we should return it as false as we have already met the requirement in the getClip method we created.

Code Files:

import 'package:flutter/material.dart';

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

class DemoApp extends StatelessWidget {
// This widget is
//the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ClipOval',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: DemoPage(),
debugShowCheckedModeBanner: false,
);
}
}

class DemoPage extends StatefulWidget {
@override
_DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Devs'),
backgroundColor: Colors.blue,
),
body: Center(
child: ClipOval(
child: Image.network(
'https://images.unsplash.com/photo-1561731216-c3a4d99437d5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80',
fit: BoxFit.fill),
clipper: MyClip(),
),
),
backgroundColor: Colors.lightBlue[50],
);
}
}

class MyClip extends CustomClipper<Rect> {
Rect getClip(Size size) {
return Rect.fromLTRB(0, 100, 100, 100);
}

bool shouldReclip(oldClipper) {
return false;
}
}

Conclusion:

In the end, clipOval is a widget that can be quite handy while dealing with images. We don’t have to go through the inner structures of the code and worry about shape and size. Rather we can directly import this widget and acquire our desired dimensions.

Thanks for reading the entire article. It was just a small overview of the clipOval widget its functionality and implementation. I hope the time you spent reading this article turns out to be productive. You can try implementing and modifying this code as per your needs. Feel free to reach out to me for any suggestions or corrections where I can improve.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

The convex Bottom bar is an app bar sketch in such a way that there is a convex shape to it. It can make the UI look great and also refine the way a user interacts with the Interface. In this article, we will build a simple app with one of the simplest forms of Convex bottom bar In Flutter

Table Of Contents:

Introduction

Add Dependency

How to Use

Features

Properties

Implementation

Conclusion

GitHub Link

Introduction:

Hello everyone, today we are discussing a very important topic of flutter UI which is the bottom navigation bar. In this article, we learn about Convex Bottom Bar. Convex Bottom Bar is a package of flutter. The convex Bottom bar is an app bar sketch in such a way that there is a convex shape to it. It can make the UI look great and also refine the way a user interacts with the Interface. In this article, we will build a simple app with one of the simplest forms of Convex bottom bar.

Providing a list TabItems widgets you can explain the icons and their title shown in the appbar. The list should contain only an odd number of TabItems to run the widget without fallacy causing. If you want to show images alternatively of icons you can provide images for the icon variable in each TabItem widget. If you want to generate a single Icon bottom appbar you can use the ConvexButton.fab widget. It produces you with fewer parameters and a quick and nice-looking one-icon-appbar.

Add Dependency:

In your project go to the pubspec. yaml and add the dependencies under the dependencies: add the latest version of convex_bottom_bar.

dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
convex_bottom_bar: ^3.0.0

we use convax_bottom_bar for a better bootom_bar UI.

How to Use:

Generally, ConvexAppBar can work with scaffold by setup its bottomNavigationBar.The convexAppBar has two constructors, the convexAppBar() will use the levant style to simplify the tab creation. Add this to your package’s pubspec.yaml file, use the latest version.

Scaffold(
body: bottomNavigationBar: ConvexAppBar();
);

Features:

• Provide various internal styles.
• capability to change the theme of AppBar.
• Provide builder API to modify a new style.
• include the badge on the tab menu.
• graceful transition animation.
• Provide hook API to override some of the interior styles.
• RTL reinforce.

Properties:

There are some properties of Convex_Bottom_Bar are:

• fixed (subhead icon stays in the center)
• fixedCircle (same but with a white circle on all sides the fixed icon)
• react (superscripted icon replace on tapping another icon)
• reactCircle (same but with a white circle throughout the superscripted icon)
• textIn (the selected Ion appear his corresponding title)
• titled (the non-selected icons are single showing their title)
• flip (the tapped icon shows a flip animation)
• custom (to customize premeditated parameters using the ConvexBottomAppBar builder)
• height (grabbing the appbar)
• top (grabbing the superscripted icon)
• curveSize (stretching the curve of the superscripted icon)
• color (setting the color of the icon)
• backgroundColor (setting the appbar background color)
• gradient (setting the appbar background color using a gradient widget)
• activeColor (setting the circle color)

Implementation:

In the Convex_Bottom_Bar demo, First, we create a stateful class with the name MyHomePage() in this class we create a variable selectedpage type of integer pass with the value zero. and define a list with the name _pageNo, in which we pass all the pages which we want to add in bootom_navigation_bar.

int selectedpage =0;
final _pageNo = [Home() , Favorite() , CartPage() , ProfilePage()];

In BuildContext(), we define Scaffold. In the appbar, we define the name and center tile.

appBar: AppBar(
centerTitle: true,
title: Text('Convex Bottom Bar'),
),

After that in the body first, we pass the _pageNo with the value of selectedPage. and use the property of scaffold we use bottomNavigationBar. In this, we create ConvexAppBar() and pass Items, initialActiveIndex and onTap. in Items, we pass all the screens which we want to show in our application. And in initialActiveIndexwe pass the variable selectedpage which we already define and in onTap we pass index and define setState() in the setState we pass selectedpage equal to index.

bottomNavigationBar: ConvexAppBar(
items: [
TabItem(icon: Icons.home, title: 'Home'),
TabItem(icon: Icons.favorite, title: 'Favorite'),
TabItem(icon: Icons.shopping_cart, title: 'Cart'),
TabItem(icon: Icons.person, title: 'Profile'),
],
initialActiveIndex: selectedpage,
onTap: (int index){
setState(() {
selectedpage = index;
});
},
),

For index we create different pages, Home(), Favorite(), CartPage(), ProfilePage(). In the Home class we define a text with a background color.

Home Screen:

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);

@override
_HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Home Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),),
),
);
}
}

Favorite Screen:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Favorite extends StatefulWidget {
const Favorite({Key? key}) : super(key: key);

@override
_FavoriteState createState() => _FavoriteState();
}

class _FavoriteState extends State<Favorite> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.greenAccent,
body: Center(
child: Text('Favorite Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
)),
);
}
}

CartPage Screen:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CartPage extends StatefulWidget {
const CartPage({Key? key}) : super(key: key);

@override
_CartPageState createState() => _CartPageState();
}

class _CartPageState extends State<CartPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink.shade100,
body: Center(
child: Text('Cart Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),)),
);
}
}

ProfilePage Screen:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ProfilePage extends StatefulWidget {
const ProfilePage({Key? key}) : super(key: key);

@override
_ProfilePageState createState() => _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.yellow,
body: Center(
child: Text('Profile Page',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),)),
); }
}

When we run the application, we ought to get the screen’s output like the underneath screen video.

Conclusion:

In this article, we have been through What is Convex Bottom Bar along with how to implement it in a Flutter. You can use the package according to your requirement.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

GitHub Link:

Find the source codeof the Convex Bottom Bar:

GitHub – flutter-devs/convex_bottom_bar_demo
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com

From Our Parent Company Aeologic

Aeologic Technologies is a leading AI-driven digital transformation company in India, helping businesses unlock growth with AI automation, IoT solutions, and custom web & mobile app development. We also specialize in AIDC solutions and technical manpower augmentation, offering end-to-end support from strategy and design to deployment and optimization.

Trusted across industries like manufacturing, healthcare, logistics, BFSI, and smart cities, Aeologic combines innovation with deep industry expertise to deliver future-ready solutions.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.