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)
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
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.
For using Animation Controller, you first need to have SingleTickerProviderStateMixin in your widget as
Now in the builder part, we included PhysicalShape Widget.
This comprises of : clipper and child.
Now here comes the main intriguing part, the 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.)
_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…………………….