Zooming with GestureDetector

by Dec 18, 2017Flutter2 comments

In the previous post, I described how to create own chart using CustomPainter. Now I will go through adding zoom effect to the diagram using GestureDetector.

Starting point

At first, let’s define our starting point. I have own StatelessWidget that contains CustomPaintwith own CustomPainter. The main widget receives a list of all entries and passes only those from last 31 days. CustomPainter gets a new list of entries and uses the main Widget’s constant number of days. What I would like to achieve is that when a user “zooms in” the X-axis (number of days) changes respectively.

If you are interested in detailed specifics, see full code.

. . .

Adding GestureDetector

The best tool to handle gestures in Flutter is (surprisingly) GestureDetector. In my case, I used two of its features: onScaleStart and onScaleUpdate. Also, I needed to changed ProgressChartto be StatefulWidget to store and change the number of days since it is not a const anymore. This is how it looks like:

How it works:

  • When zoom gesture starts I store the current number of days.
  • When zoom updates I get the scale and divide the previous number of days by it. Notice that I am changing only the current number of days, not the previous one. If I updated the starting point, the number of days would quickly go towards infinity or 0 depending on gesture.
  • I added border value so max zoom is one week.
  • At the end, I refactored ChartPainter to accept numberOfDays instead of referencing constant value.

. . .

Wrapping up

After small adjustments to bottom labels, final effect looks like this:

And that’s it! As you can see it was pretty straight forward. 🙂

If you are interested in more details, see my GitHub repository or previous post on creating charts.

If you find it interesting, have any questions or think you can do it better, please leave a comment! 🙂

Cheers! 🙂

Marcin Szałek

Founder of Fidev

Flutter enthusiast since Alpha release in 2017. Believes that sharing is caring, which lead him to start a technical blog dedicated fo Flutter in its early days. Loves to see beautiful designs become real apps and is willing to help make it happen. Enjoys sunny beaches far from home.

Join the newsletter!

Join the newsletter to keep track with latest posts and get my special Widget to animate views' entrances without any hassle for FREE!

Check out other posts!

SY Travel UI Challenge

SY Travel UI Challenge

Check out the videos explaining how I implemented awesome SY Expedition Travel animation by Anton Skvortsov! In the following videos I will show you the whole process of creating a UI challenge in Flutter.

Thanos Snap Effect in Flutter

Thanos Snap Effect in Flutter

Have you ever woken up and thought “How awesome would it be to create Thanos snap effect in Flutter”? Probably not. Well… following Google’s Easter Egg I did. 🙂 And I’ve found out that no one did it in Flutter yet so why not give it a try! In this post, I will explain how I created a Thanos snap effect coming from Avengers: Infinity War movie. Enjoy 🙂

Advanced transitions – UI Tickets Challenge

Advanced transitions – UI Tickets Challenge

As developers, we have always get into situations where the designers require some fancy transitions which look awesome on the design but are extremely difficult to implement. Being Flutter developer makes it different, makes it fun because we have tools to do it! To prove it in this post, I will continue implementing awesome Buy Tickets design by Dldp and add bottom sheet transitions!

Share This

Share This

Share this post with your friends!