When this happened, I was just getting my hands dirty with Flutter, I saw in Flutter they have literally recreated all the default ui controls of Android and iOS using Dart(The language Flutter uses), This widgets are made with utmost precision and details, still the performance was par with the default ui kits, Although there are bunch of tailor made widgets available from first party but customisation was what we need to achieve as our goal, Dart was a new language for us at Mindinventory.<\/p>\n\n\n\n
It was largely unknown to many until they introduced Flutter, With Flutter the good thing is 60 FPS smooth animations are easily achievable and that is what we need, I jumped on it and decided to check the ability of Flutter by creating this Review Page widgets with Flutter. Meanwhile you can also check the animation on Dribbble<\/a> and Behance<\/a>.<\/p>\n\n\n\n One thing about Flutter that you will have love-hate relationship is Everything is a Widget, From your App to that shiney little checkbox and from Handling orientation to reacting to click events, A type of widget is what you need, What I have done is create two custom widgets in Flutter for this project, one is the Smiley with Expressions and another is the Arc menu,<\/p>\n\n\n\n Let\u2019s talk in depth about what it takes to create this masterpiece.<\/p>\n\n\n\n It was straightforward to define a class that extends CustomPainter which directly gives us access to Canvas to draw anything in it at will.<\/p>\n\n\n\n And below is how it can be added to layout.<\/p>\n\n\n\n We have to draw smiley with 4 different expressions Okay, Good, Bad and Ugh, Here expressions are made to represent what user feel when he choose particular rating, What we got to do is Animate the Eyes and Mouth according to the selected expression.<\/p>\n\n\n First thing came to my mind was SVG files and VectorDrawables I am used to in Android, sadly Flutter doesn’t support this kind of SVG Animation just yet, flutter_svg package gave some hope but It was of no use as it is not possible to animate this expressions with it, I had to dig deeper and then I found this CustomPainter class, It gives us kind of total control over what is shown on screen(as widget), and I was like hale luya that is what we need :), It holds state of rendering the expression, In this class I covered<\/p>\n\n\n\n Defining was the easy part, We defined the four states, one for each expression, Now let\u2019s check how we animate between those states.<\/p>\n\n\n\n To tween between each of this state I had defined a range which covers all the states, I defined 0 to 400 as a range, within which I defined location of each state, Essentially creating a loop as we need with the arc menu, which we will see later in this post. Here is how we tween between each of the shapes:<\/p>\n\n\n\n Here we have created our own lerp(linear interpolation) method for our ReviewState while utilising Offset.lerp and Color.lerp, this methods will tween between the two ReviewState instances, It will create intermediate values for the gradient colors and mouth curve according to the ratio we provide, quite handy isn\u2019t it? Here is how it looks after linking the slide onChanged event with our rendering:<\/p>\n\n\n\n<\/span>A Widget is what we need<\/span><\/h2>\n\n\n\n
<\/span>Rendering expressions on canvas<\/span><\/h2>\n\n\n
![\"canvas\"](\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/canvas.png\")
<\/figure><\/div>\n\n\nCreating custom painter<\/h3>\n\n\n\n
class SmilePainter extends CustomPainter {\n @override\n void paint(Canvas canvas, Size size) {\n \u2026rendering logic\n }\n @override\n bool shouldRepaint(CustomPainter oldDelegate) { \n \u2026logic to determine if we need to repaint or not\n return true;\n }\n}<\/code>\n<\/pre>\n\n\n\nCustomPaint(\n size: Size(MediaQuery.of(context).size.width, (MediaQuery.of(context).size.width \/ 2) + 80),\n painter: SmilePainter(slideValue),\n)<\/code>\n<\/pre>\n\n\n\nHolding State of Expressions<\/h3>\n\n\n\n
![\"Expressions\"](\"https:\/\/www.mindinventory.com\/blog\/wp-content\/uploads\/2022\/10\/Expressions.png\")
<\/figure><\/div>\n\n\n
First I started with drawing the expressions of four states, as part of it I defined ReviewState class as follows:<\/p>\n\n\n\nclass ReviewState {\n \/\/smile end points\n Offset leftOffset;\n Offset centerOffset;\n Offset rightOffset;\n\n \/\/smile handle points\n Offset leftHandle;\n Offset rightHandle;\n\n String title;\n Color titleColor;\n\n \/\/gradient colors\n Color startColor;\n Color endColor;\n}<\/code>\n<\/pre>\n\n\n\n\n
Tweening between states<\/h3>\n\n\n\n
i. e. 0 would be BAD, 100 would be UGH, 200 would be OK, 300 would be GOOD and finally 400 would be BAD again.<\/p>\n\n\n\n
You can check this logic by uncommenting Slider in main.dart<\/p>\n\n\n\n\/\/create new state between given two states.\nstatic ReviewState lerp(ReviewState start, ReviewState end, double ratio) {\n var startColor = Color.lerp(start.startColor, end.startColor, ratio);\n var endColor = Color.lerp(start.endColor, end.endColor, ratio);\n\n return ReviewState(\n Offset.lerp(start.leftOffset,end.leftOffset, ratio),\n Offset.lerp(start.leftHandle, end.leftHandle, ratio),\n Offset.lerp(start.centerOffset, end.centerOffset, ratio),\n Offset.lerp(start.rightHandle, end.rightHandle, ratio),\n Offset.lerp(start.rightOffset, end.rightOffset, ratio),\n startColor,\n endColor,\n start.titleColor,\n start.title);\n}<\/code>\n<\/pre>\n\n\n\n