Open In App

Flutter - Custom Clipper

Last Updated : 27 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

In Flutter, we have widgets and properties that help to create custom shapes. In this article, we will learn about a property called Custom Clipper, and we will also implement it to create a curved shape in our UI design.

What is a Custom Clipper?

Custom Clipper is a property that helps to clip the widget into any shape we want. It clips unused areas of the container to get the desired shape.

Now we will create a curved bottom shape appbar using a custom clipper.

Steps to Implementation Custom Clipper

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter.

Step 2: Start coding

custom_shape.dart:

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

class Customshape extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;

    var path = Path();
    path.lineTo(0, height-50);
    path.quadraticBezierTo(width/2, height, width, height-50);
    path.lineTo(width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }

}

In this file, our custom shape class extends to a custom clipper. Custom clipper uses two override methods

  1. getclip(): We define here how we want to clip the path.
  2. shouldReclip(): It returns a bool value whether we want to reclip the widget or not.

The getClip() method is used to customize the shape. To give a curved shape, we have used a path.quadraticBezierTo feature, and we have also passed path, lineTo with a certain height and width. We do not want to reclip, so we have to return true in the shouldReclip() method.

main.dart:

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

import 'custom_shape.dart';

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        toolbarHeight: 130,
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        flexibleSpace: ClipPath(
          clipper: Customshape(),
          child: Container(
            height: 250,
            width: MediaQuery.of(context).size.width,
            color: Colors.green,
            child: Center(child: Text("GeeksforGeeks",
                                      style: TextStyle(fontSize: 40,
                                                                       color: Colors.white),)),
          ),
        ),
      ),
       body: Container(),
    );
  }
}

In this main.dart file, we have created a stateful widget first. Afterward, we have used the property of an appbar called flexible space. In this flexible space property, we have a container with height, width, color, and text. We have wrapped this container with a clip path. Clip path has a property called clipper. In the clipper property, we have passed the Custom shape class so that it can access to custom_shape.dart file and give us the desired shape.

Output: 

Flutter_Custom_Clipper
Flutter - Custom Clipper

Article Tags :

Similar Reads