charts_flutter PanAndZoomBehavior is not working in a Scrollview

Question

If we implement any chart ( whether it be a Linechart or Barchart from chart_flutter ) and in behaviours we have added charts.PanAndZoomBehavior(), pan and zoom behaviour is working fine when it is added in a screen without a scrollview

Here is the scenario Widget hierarchy as SingleChildScrollView -> charts.LineChart In gesture arena only SingleChildScrollView gesture is winning, Pan and zoom Behaviour is not working google/charts google/charts#677 This article is helpful https://medium.com/koahealth/combining-multiple-gesturedetectors-in-flutter-26d899d008b2 Does any one know what can be a better approach for this

Answer 1

I believe that is because you need to wrap the Chart Widget that is inside some other widget that has physics (property) in it.. The charts itself doesn't have any physics defined. It's managed using states model references.. I had this problem a long time ago too.. Here's my recommendation (with very amateurish knowledge on flutter):

• First, I would wrap my charts within a card widget.
• Second, I would avoid using SingleChildScrollView. Unless you are absolutely certain what widget you are building under that parent and they each have Intrinsic sizes defined within the child widgets. I would highly recommend using CustomScrollView -> And add a simple SliverChildBuilderDelegate. That lazily builds your charts (now wrapped in a card/container/column.. anything you chose).. That way you don't have to worry about sizes and scrolling. And any children that you add gets lazily built when they scroll into viewport..