Flutter - Custom Clipper - GeeksforGeeks

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.
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 – 
getclip(): We define here how we want to clip-path.shouldReclip(): It returns bool value whether we want to reclip the widget or not.
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 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: 
Blogathon-2021
Blogathon
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create a Table With Multiple Foreign Keys in SQL?
How to Import JSON Data into SQL Server?
Stratified Sampling in Pandas
How to Install Tkinter in Windows?
Python program to convert XML to Dictionary
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar