ShapeBorder Clipper in Flutter

Aseem Wangoo
Sep 6, 2018 · 3 min read

My app, my shape, my rules…


All in one Flutter Resource: https://flatteredwithflutter.com/shapeborder-clipper-in-flutter/

Shape Border Clipper

In the event of Google I/O 2018, there was an app described by the name Shrine. There was something unusual in this app (positive side)

Shrine App

This application had the rectangular border cut on one side. I had never seen this before, which was quite intriguing.

I decided to make a sample application with this kind of functionality.

Let’s Begin…

One of the widgets which we used is PositionedTransition.

This widget accepts an animation Rect and a child widget

In the animation Rect, we used _getPanelAnimation function

_getPanelAnimation

It takes into account the top and bottom and makes a RelativeRectTween accordingly. This relativeRectTween is an interpolation between two rectangles which makes use of the animation.

In our case, CurvedAnimation and the curve being Curves.linear ( Feel free to try out others)…..

In the child part, we have used AnimatedBuilder. It needs an

animation and a builder.

Animation Controller…

For using Animation Controller, you first need to have SingleTickerProviderStateMixin in your widget as

SingleTickerProviderState

Now in the builder part, we included PhysicalShape Widget.

This comprises of : clipper and child.

Now here comes the main intriguing part, the clipper.

Clipper

Using the ShapeBorderClipper, we tell the app to remove a particular part of the shape.

In the shape, we have mentioned BeveledRectangleBorder, ( A rectangular border with flattened or “beveled” corners.)

Cut code

_kFrontHeadingBevelRadius describes the amount of area to be cut, which in our case is denoted by Border Radius. Using the above code snippet, you can manipulate the rectangle cut.

If you want the cut from single side only, then remove the topRight sections from begin and end.

You can see the final output as below :

Shape Border Clipper

For complete source code, please visit


The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Aseem Wangoo

Written by

Founder of Flatteredwithflutter.com | Flutter, Java enthusiast | Medium writer | YouTuber | Writer at FlutterPub

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade