Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Flutter – Custom Clipper

  • Last Updated : 21 Sep, 2021

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 curve 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 curve bottom shape appbar using a custom clipper.

Step 1: custom_shape.dart file

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;
  }
  
}

Explanation: 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-path.
  2. shouldReclip(): It returns bool value whether we want to reclip the widget or not.

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

Step 2: main.dart file

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(),
    );
  }
}

Explanation: 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 clip path. Clip path has a property called clipper. In the clipper property, we have passed the Custom shape class so that it can get accessed to custom_shape.dart file and give us the desired shape.

Output: 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!