What is a custom clipper in Flutter?

What is a custom clipper in Flutter?

In flutter, we have widgets and properties that help to create custom shapes. So, in this article, we will see what is a custom clipper in Flutter.

What is a custom clipper in Flutter?

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. So, consider the below code for reference:

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 :

• getclip(): We define here how we want to clip-path.
• 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 a path.quadraticBezierTo feature and we have also passed path.lineTo with certain height and width. We do not want to reclip so we have returned true in the shouldReclip() method.

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 get accessed to custom_shape.dart file and give us the desired shape.

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is a custom clipper in Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.