Flutter - ClipPath Widget
Last Updated :
24 Apr, 2025
In Flutter, the ClipPath widget is used to clip its child widget using a custom path. This means you can define a specific shape or path, and the ClipPath widget will restrict the rendering of its child to be only within that shape or along that path. In this article, we are going to implement the ClipPath widget. A sample Image is given below to get an idea about what we are going to do in this article.
-768.jpg)
Basic Syntax of ClipPath Widget
ClipPath(
clipper: YourCustomClipper(), // A CustomClipper<Path> that defines the clipping path.
child: YourChildWidget(), // The child widget that you want to clip.
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() => runApp(MyApp());
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: ClipPathExample(),
);
}
}
Step 5: Create ClipPathExample Class
In this class we are going to Implement the ClipPath widget that help to create a custom path is defined using the MyClipper class as the clipper. The MyClipper class extends CustomClipper<Path> and defines a custom path that resembles a banner. It will create a Hexagon like structure .Comments are added for better understanding.
ClipPath(
// Define a custom path to clip the child
clipper: MyClipper(),
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orange, Colors.white, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Text(
'ClipPath',
style: TextStyle(
color: const Color.fromARGB(255, 117, 95, 95),
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
),
Dart
class ClipPathExample extends StatefulWidget {
const ClipPathExample({Key? key}) : super(key: key);
@override
State<ClipPathExample> createState() => _ClipPathExampleState();
}
class _ClipPathExampleState extends State<ClipPathExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ClipPath Example'),
),
body: Center(
child: ClipPath(
// Define a custom path to clip the child
clipper: MyClipper(),
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orange, Colors.white, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Text(
'ClipPath',
style: TextStyle(
color: const Color.fromARGB(255, 117, 95, 95),
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
);
}
}
Step 6: Create MyClipper Class
The MyClipper class defines a custom path in the getClip method. This path specifies the shape that will be used to clip the child (Container).it create a hexagon like structure It also contains a method names as shouldReclip. The shouldReclip method of the MyClipper class returns false, indicating that the clipping path does not need to be recomputed.
Dart
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// Define a custom path to create a stylish clipped shape
var path = Path();
path.moveTo(0, size.height * 0.5);
path.lineTo(size.width * 0.2, 0);
path.lineTo(size.width * 0.8, 0);
path.lineTo(size.width, size.height * 0.5);
path.lineTo(size.width * 0.8, size.height);
path.lineTo(size.width * 0.2, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: ClipPathExample(),
);
}
}
class ClipPathExample extends StatefulWidget {
const ClipPathExample({Key? key}) : super(key: key);
@override
State<ClipPathExample> createState() => _ClipPathExampleState();
}
class _ClipPathExampleState extends State<ClipPathExample> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ClipPath Example'),
),
body: Center(
child: ClipPath(
// Define a custom path to clip the child
clipper: MyClipper(),
child: Container(
width: 200,
height: 200,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.orange, Colors.white, Colors.green],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Center(
child: Text(
'ClipPath',
style: TextStyle(
color: const Color.fromARGB(255, 117, 95, 95),
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
);
}
}
class MyClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// Define a custom path to create a stylish clipped shape
var path = Path();
path.moveTo(0, size.height * 0.5);
path.lineTo(size.width * 0.2, 0);
path.lineTo(size.width * 0.8, 0);
path.lineTo(size.width, size.height * 0.5);
path.lineTo(size.width * 0.8, size.height);
path.lineTo(size.width * 0.2, size.height);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false;
}
}
Output:
-768.jpg)
Similar Reads
Flutter - Chip Widget
Chip is a material design widget which comes built-in with flutter. It can simply be described as a compact element holding an icon and text, usually a rounded rectangle in the background. It can serve many purposes, like it can be simply used as a button, representing a user with a CircleAvatar and
4 min read
ClipRect Widget in Flutter
The ClipRect widget is used to clips its child using a rectangle. It associates with the Clippers family. The main use of clippers is to clip out any portion of the widget as required. It behaves similar to that of ClipRRect and is used to Clip a Rectangle portion of the child widget but without the
2 min read
ClipOval widget in Flutter
ClipOval widget clips the child widget in oval or circle shape. We can reshape the child widget by changing width and height. If width and height are equal the shape will be circular. If the width and height are given differently then the shape will be oval. Let's understand this with the help of an
2 min read
Flutter - AppBar Widget
AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give
7 min read
Flutter - Card Widget
Card is a built-in widget in Flutter which derives its design from Google's Material Design Library. The functionality of this widget on screen is, that it is a bland space or panel with round corners and a slight elevation on the lower side. It comes with many properties like color, shape, shadow c
4 min read
ClipRRect Widget in Flutter
The ClipRRect widget in flutter is used to clips its child using a rounded rectangle. It associates with the Clippers family. The main use of clippers is to clip out any portion of the widget as required. It behaves similar to that of ClipRect and is used to Clip a Rectangle portion of the child wid
2 min read
Flutter - Empty Widget
Empty widget is the flutter widget that is mainly used to notify the user about some event, Like if we are fetching the data from the API or From the database, There may be a case when API returns the null at that moment we can show the empty widget. Also If there is no user internet connection we c
4 min read
Flutter - Custom Widgets
We create Custom Widgets when we want a custom look and feel to our app, and we know that there will be a repetition of a particular widget. We can create the custom widget in a new dart file with all the codes and defining the parameters that we need in the constructor. For more on how to split wid
8 min read
Flutter - CircleAvatar Widget
CircleAvatar widget comes built-in with the flutter SDK. It is simply a circle in which we can add background color, background image, or just some text. It usually represents a user with his image or with his initials. Although we can make a similar widget from the ground up, this widget comes in h
4 min read
Flutter - Expanded Widget
Expanded widget in flutter comes in handy when we want a child widget or children widgets to take all the available space along the main-axis (for Row the main axis is horizontal & vertical for Column). Â Expanded widget can be taken as the child of Row, Column, and Flex. And in case if we don't
5 min read