Tag Archive flatteredWithFlutter

ShapeBorder Clipper in Flutter

aseemwangoo No Comments

My app, my shape, my rules…

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

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

_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…

Animation Controller…

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

SingleTickerProviderState

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

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

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 :

For complete source code, please visit

https://github.com/AseemWangoo/flutter_programs/blob/master/ShapeBorderClipper%20.dart

P.S…………………….