Fl_chart: Chart triggers Scrolling
Describe the bug
First of all: Thank you very much for this great package!
I have the following problem and unfortunately I couldn't solve it.
When moving the ToolTip on the chart, the vertical scroll position also changes. Is there any way to prevent this behavior? You can see the problem on the gif - the white spot is my finger position.
The automatic scrolling behavior gives a really strange user experience.
To Reproduce
Code to reproduce
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
SliverToBoxAdapter _buildChart() {
return SliverToBoxAdapter(
child: Container(
padding: EdgeInsets.all(16),
height: 200,
width: 200,
child: LineChart(
LineChartData(
lineBarsData: [
LineChartBarData(
spots: spots,
isCurved: true,
barWidth: 3,
dotData: FlDotData(show: false),
preventCurveOverShooting: true,
curveSmoothness: 5,
),
],
gridData: FlGridData(show: false),
titlesData: FlTitlesData(show: false),
borderData: FlBorderData(show: false),
),
),
),
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Test')),
body: CustomScrollView(
physics: ClampingScrollPhysics(),
slivers: [
SliverToBoxAdapter(
child: SizedBox(height: 500),
),
_buildChart(),
SliverToBoxAdapter(
child: SizedBox(height: 500),
),
],
),
),
);
}
}
List<FlSpot> spots = [
FlSpot(1.0, 1.0),
FlSpot(2.0, 2.0),
FlSpot(3.0, 2.0),
FlSpot(4.0, 2.0),
FlSpot(5.0, 2.0),
FlSpot(6.0, 3.0),
FlSpot(7.0, 6.0),
FlSpot(8.0, 13.0),
FlSpot(9.0, 15.0),
FlSpot(10.0, 25.0),
FlSpot(11.0, 27.0),
FlSpot(12.0, 30.0),
FlSpot(13.0, 35.0),
FlSpot(14.0, 42.0),
FlSpot(15.0, 48.0),
FlSpot(16.0, 53.0),
FlSpot(17.0, 72.0),
FlSpot(18.0, 72.0),
FlSpot(19.0, 81.0),
FlSpot(20.0, 98.0),
FlSpot(21.0, 107.0),
FlSpot(22.0, 111.0),
FlSpot(23.0, 123.0),
FlSpot(24.0, 129.0),
FlSpot(25.0, 131.0),
FlSpot(26.0, 146.0),
FlSpot(27.0, 155.0),
FlSpot(28.0, 164.0),
FlSpot(29.0, 172.0),
FlSpot(30.0, 185.0),
FlSpot(31.0, 189.0),
FlSpot(32.0, 191.0),
FlSpot(33.0, 195.0),
FlSpot(34.0, 197.0),
FlSpot(35.0, 206.0),
FlSpot(36.0, 211.0),
FlSpot(37.0, 222.0),
FlSpot(38.0, 233.0),
FlSpot(39.0, 233.0),
FlSpot(40.0, 240.0),
FlSpot(41.0, 244.0),
FlSpot(42.0, 250.0),
FlSpot(43.0, 254.0),
FlSpot(44.0, 257.0),
FlSpot(45.0, 259.0),
FlSpot(46.0, 259.0),
FlSpot(47.0, 263.0),
FlSpot(48.0, 264.0),
FlSpot(49.0, 268.0),
FlSpot(50.0, 270.0),
FlSpot(51.0, 272.0),
FlSpot(52.0, 272.0),
FlSpot(53.0, 272.0),
FlSpot(54.0, 273.0),
FlSpot(55.0, 275.0),
FlSpot(56.0, 277.0),
FlSpot(57.0, 278.0),
FlSpot(58.0, 281.0),
FlSpot(59.0, 282.0),
FlSpot(60.0, 283.0),
FlSpot(61.0, 283.0),
FlSpot(62.0, 283.0),
FlSpot(63.0, 283.0),
FlSpot(64.0, 284.0),
FlSpot(65.0, 284.0),
FlSpot(66.0, 284.0),
FlSpot(67.0, 284.0),
FlSpot(68.0, 284.0),
FlSpot(69.0, 288.0),
FlSpot(70.0, 288.0),
FlSpot(71.0, 288.0),
FlSpot(72.0, 288.0),
FlSpot(73.0, 288.0),
FlSpot(74.0, 288.0),
FlSpot(75.0, 289.0),
FlSpot(76.0, 289.0),
FlSpot(77.0, 289.0),
FlSpot(78.0, 289.0),
FlSpot(79.0, 290.0),
FlSpot(80.0, 290.0),
FlSpot(81.0, 291.0),
FlSpot(82.0, 291.0),
FlSpot(83.0, 291.0),
FlSpot(84.0, 291.0),
FlSpot(85.0, 291.0),
FlSpot(86.0, 293.0),
FlSpot(87.0, 293.0),
FlSpot(88.0, 293.0),
FlSpot(89.0, 293.0),
FlSpot(90.0, 297.0),
FlSpot(91.0, 298.0),
FlSpot(92.0, 299.0),
FlSpot(93.0, 300.0),
FlSpot(94.0, 301.0),
FlSpot(95.0, 301.0),
FlSpot(96.0, 301.0),
FlSpot(97.0, 303.0),
FlSpot(98.0, 303.0),
FlSpot(99.0, 303.0),
FlSpot(100.0, 303.0),
FlSpot(101.0, 303.0),
FlSpot(102.0, 303.0),
FlSpot(103.0, 303.0),
FlSpot(104.0, 303.0),
FlSpot(105.0, 304.0),
FlSpot(106.0, 304.0),
FlSpot(107.0, 305.0),
FlSpot(108.0, 305.0),
FlSpot(109.0, 305.0),
FlSpot(110.0, 305.0),
FlSpot(111.0, 305.0),
FlSpot(112.0, 305.0),
FlSpot(113.0, 305.0),
FlSpot(114.0, 305.0),
FlSpot(115.0, 305.0),
FlSpot(116.0, 305.0),
FlSpot(117.0, 305.0),
FlSpot(118.0, 305.0),
FlSpot(119.0, 305.0),
FlSpot(120.0, 305.0),
FlSpot(121.0, 305.0),
FlSpot(122.0, 305.0),
FlSpot(123.0, 305.0),
FlSpot(124.0, 305.0),
FlSpot(125.0, 305.0),
FlSpot(126.0, 305.0),
FlSpot(127.0, 305.0),
FlSpot(128.0, 305.0),
FlSpot(129.0, 305.0),
FlSpot(130.0, 305.0),
FlSpot(131.0, 305.0),
FlSpot(132.0, 305.0),
FlSpot(133.0, 308.0),
FlSpot(134.0, 308.0),
FlSpot(135.0, 312.0),
FlSpot(136.0, 314.0),
FlSpot(137.0, 314.0),
FlSpot(138.0, 314.0),
FlSpot(139.0, 314.0),
FlSpot(140.0, 314.0),
FlSpot(141.0, 314.0),
FlSpot(142.0, 314.0),
FlSpot(143.0, 314.0),
FlSpot(144.0, 315.0),
FlSpot(145.0, 315.0),
FlSpot(146.0, 315.0),
FlSpot(147.0, 315.0),
FlSpot(148.0, 315.0),
FlSpot(149.0, 315.0),
FlSpot(150.0, 316.0),
FlSpot(151.0, 316.0),
FlSpot(152.0, 321.0),
FlSpot(153.0, 323.0),
FlSpot(154.0, 324.0),
FlSpot(155.0, 326.0),
FlSpot(156.0, 330.0),
FlSpot(157.0, 331.0),
FlSpot(158.0, 335.0),
FlSpot(159.0, 336.0),
FlSpot(160.0, 338.0),
FlSpot(161.0, 340.0),
FlSpot(162.0, 342.0),
FlSpot(163.0, 345.0),
FlSpot(164.0, 348.0),
FlSpot(165.0, 351.0),
FlSpot(166.0, 353.0),
FlSpot(167.0, 356.0),
FlSpot(168.0, 363.0),
FlSpot(169.0, 364.0),
FlSpot(170.0, 366.0),
FlSpot(171.0, 368.0),
FlSpot(172.0, 369.0),
FlSpot(173.0, 370.0),
FlSpot(174.0, 372.0),
FlSpot(175.0, 379.0),
FlSpot(176.0, 384.0),
FlSpot(177.0, 390.0),
FlSpot(178.0, 393.0),
FlSpot(179.0, 394.0),
FlSpot(180.0, 394.0),
FlSpot(181.0, 397.0),
FlSpot(182.0, 398.0),
FlSpot(183.0, 401.0),
FlSpot(184.0, 403.0),
FlSpot(185.0, 404.0),
FlSpot(186.0, 404.0),
FlSpot(187.0, 406.0),
FlSpot(188.0, 407.0),
FlSpot(189.0, 413.0),
FlSpot(190.0, 414.0),
FlSpot(191.0, 414.0),
FlSpot(192.0, 415.0),
FlSpot(193.0, 415.0),
FlSpot(194.0, 415.0),
FlSpot(195.0, 416.0),
FlSpot(196.0, 417.0),
FlSpot(197.0, 418.0),
FlSpot(198.0, 419.0),
FlSpot(199.0, 420.0),
FlSpot(200.0, 427.0),
FlSpot(201.0, 428.0),
FlSpot(202.0, 429.0),
FlSpot(203.0, 431.0),
FlSpot(204.0, 431.0),
FlSpot(205.0, 434.0),
FlSpot(206.0, 435.0),
FlSpot(207.0, 435.0),
FlSpot(208.0, 437.0),
FlSpot(209.0, 438.0),
FlSpot(210.0, 438.0),
FlSpot(211.0, 439.0),
FlSpot(212.0, 439.0),
FlSpot(213.0, 442.0),
FlSpot(214.0, 448.0),
FlSpot(215.0, 449.0),
FlSpot(216.0, 454.0),
FlSpot(217.0, 463.0),
FlSpot(218.0, 472.0),
FlSpot(219.0, 484.0),
FlSpot(220.0, 492.0),
FlSpot(221.0, 499.0),
FlSpot(222.0, 504.0),
FlSpot(223.0, 508.0),
FlSpot(224.0, 532.0),
FlSpot(225.0, 543.0),
FlSpot(226.0, 559.0),
FlSpot(227.0, 565.0),
FlSpot(228.0, 583.0),
FlSpot(229.0, 586.0),
FlSpot(230.0, 602.0),
FlSpot(231.0, 632.0),
FlSpot(232.0, 652.0),
FlSpot(233.0, 677.0),
FlSpot(234.0, 694.0),
FlSpot(235.0, 710.0),
FlSpot(236.0, 724.0),
FlSpot(237.0, 743.0),
FlSpot(238.0, 769.0),
FlSpot(239.0, 798.0),
FlSpot(240.0, 831.0),
FlSpot(241.0, 866.0),
FlSpot(242.0, 888.0),
FlSpot(243.0, 916.0),
FlSpot(244.0, 935.0),
FlSpot(245.0, 961.0),
FlSpot(246.0, 1004.0),
FlSpot(247.0, 1038.0),
FlSpot(248.0, 1070.0),
FlSpot(249.0, 1088.0),
FlSpot(250.0, 1112.0),
FlSpot(251.0, 1140.0),
FlSpot(252.0, 1181.0),
FlSpot(253.0, 1241.0),
FlSpot(254.0, 1270.0),
FlSpot(255.0, 1312.0),
FlSpot(256.0, 1348.0),
FlSpot(257.0, 1368.0),
FlSpot(258.0, 1393.0),
FlSpot(259.0, 1443.0),
FlSpot(260.0, 1493.0),
FlSpot(261.0, 1538.0),
FlSpot(262.0, 1596.0),
FlSpot(263.0, 1607.0),
FlSpot(264.0, 1621.0),
FlSpot(265.0, 1635.0),
FlSpot(266.0, 1679.0),
FlSpot(267.0, 1703.0),
FlSpot(268.0, 1722.0),
FlSpot(269.0, 1746.0),
FlSpot(270.0, 1779.0),
FlSpot(271.0, 1790.0),
FlSpot(272.0, 1816.0),
FlSpot(273.0, 1859.0),
FlSpot(274.0, 1918.0),
FlSpot(275.0, 1952.0),
FlSpot(276.0, 1980.0),
FlSpot(277.0, 2003.0),
FlSpot(278.0, 2011.0),
FlSpot(279.0, 2037.0),
FlSpot(280.0, 2091.0),
FlSpot(281.0, 2132.0),
FlSpot(282.0, 2176.0),
FlSpot(283.0, 2196.0),
FlSpot(284.0, 2219.0),
FlSpot(285.0, 2234.0),
FlSpot(286.0, 2290.0),
FlSpot(287.0, 2342.0),
FlSpot(288.0, 2386.0),
FlSpot(289.0, 2405.0),
FlSpot(290.0, 2407.0),
FlSpot(291.0, 2421.0),
FlSpot(292.0, 2451.0),
FlSpot(293.0, 2492.0),
FlSpot(294.0, 2565.0),
FlSpot(295.0, 2597.0),
FlSpot(296.0, 2620.0),
FlSpot(297.0, 2626.0),
FlSpot(298.0, 2647.0),
FlSpot(299.0, 2656.0),
FlSpot(300.0, 2693.0),
FlSpot(301.0, 2744.0),
FlSpot(302.0, 2771.0),
FlSpot(303.0, 2804.0),
FlSpot(304.0, 2822.0),
FlSpot(305.0, 2831.0),
FlSpot(306.0, 2845.0),
FlSpot(307.0, 2880.0),
FlSpot(308.0, 2913.0),
FlSpot(309.0, 2936.0),
FlSpot(310.0, 2955.0),
FlSpot(311.0, 2985.0),
FlSpot(312.0, 2994.0),
FlSpot(313.0, 3007.0),
FlSpot(314.0, 3026.0),
FlSpot(315.0, 3042.0),
FlSpot(316.0, 3065.0),
FlSpot(317.0, 3085.0),
FlSpot(318.0, 3105.0),
FlSpot(319.0, 3122.0),
FlSpot(320.0, 3127.0),
FlSpot(321.0, 3162.0),
FlSpot(322.0, 3188.0),
FlSpot(323.0, 3200.0),
FlSpot(324.0, 3204.0),
FlSpot(325.0, 3217.0),
FlSpot(326.0, 3223.0),
FlSpot(327.0, 3224.0),
FlSpot(328.0, 3234.0),
FlSpot(329.0, 3243.0),
FlSpot(330.0, 3249.0),
FlSpot(331.0, 3255.0),
FlSpot(332.0, 3260.0),
FlSpot(333.0, 3261.0),
FlSpot(334.0, 3261.0),
FlSpot(335.0, 3266.0),
FlSpot(336.0, 3273.0),
FlSpot(337.0, 3276.0),
FlSpot(338.0, 3287.0),
FlSpot(339.0, 3292.0),
FlSpot(340.0, 3297.0),
FlSpot(341.0, 3297.0),
FlSpot(342.0, 3306.0),
FlSpot(343.0, 3320.0),
FlSpot(344.0, 3323.0),
FlSpot(345.0, 3328.0),
FlSpot(346.0, 3337.0),
FlSpot(347.0, 3342.0),
FlSpot(348.0, 3342.0),
FlSpot(349.0, 3349.0),
FlSpot(350.0, 3356.0),
FlSpot(351.0, 3367.0),
FlSpot(352.0, 3384.0),
FlSpot(353.0, 3390.0),
FlSpot(354.0, 3392.0),
FlSpot(355.0, 3393.0),
FlSpot(356.0, 3395.0),
FlSpot(357.0, 3400.0),
FlSpot(358.0, 3406.0),
FlSpot(359.0, 3411.0),
FlSpot(360.0, 3414.0),
FlSpot(361.0, 3415.0),
FlSpot(362.0, 3417.0),
FlSpot(363.0, 3426.0),
FlSpot(364.0, 3431.0),
FlSpot(365.0, 3433.0),
FlSpot(366.0, 3433.0),
FlSpot(367.0, 3444.0),
FlSpot(368.0, 3447.0),
FlSpot(369.0, 3447.0),
FlSpot(370.0, 3459.0),
FlSpot(371.0, 3478.0),
FlSpot(372.0, 3500.0),
FlSpot(373.0, 3524.0),
FlSpot(374.0, 3553.0),
FlSpot(375.0, 3558.0),
FlSpot(376.0, 3561.0),
FlSpot(377.0, 3591.0),
FlSpot(378.0, 3636.0),
FlSpot(379.0, 3698.0),
FlSpot(380.0, 3732.0),
FlSpot(381.0, 3759.0),
FlSpot(382.0, 3779.0),
FlSpot(383.0, 3800.0),
FlSpot(384.0, 3827.0),
FlSpot(385.0, 3871.0),
FlSpot(386.0, 3905.0),
FlSpot(387.0, 3946.0),
FlSpot(388.0, 3969.0),
FlSpot(389.0, 3981.0),
FlSpot(390.0, 3992.0),
FlSpot(391.0, 4005.0),
FlSpot(392.0, 4042.0),
FlSpot(393.0, 4094.0),
FlSpot(394.0, 4140.0),
FlSpot(395.0, 4176.0),
FlSpot(396.0, 4187.0)
];
Screenshots
Versions
- which version of the Flutter are you using? --> 2.0.4
- which version of the FlChart are you using? --> 0.35.0
florianh01
👍1
All 6 comments
FYI: ListView() instead of CustomScrollView() does not help either
florianh01
on 12 Apr 2021
For anyone else encountering this Problem, I found a workaround:
Wrapping The Chart inside a GestureDetector Widget + overriding onHorizontalDragUpdate function works surprisingly well:
GestureDetector(
onHorizontalDragUpdate: (x) {},
child: LineChart()
)
👍2
@jfmichel
Same problem, it is not good user experience, I think too.
I use this workaround:
shrinkWrap: true
but, it is perhaps not good solution for this problem, because CustomScrollView(Scrollable Widget) does not bounce(in iOS) on top or bottom in view, a little strange behavior.
Another workaround:
- Only in user interaction(touch chart line etc), use
physics: NeverScrollableScrollPhysics()
but, this is additional state control whether _in user interaction_ or _not_.
So, in summary, I think your workaround is better.
tsuruobiz
on 13 Apr 2021
Related to this issue, I am also worried about _Horizontal Scroll_ in PageView or TabBarView. When moving the tooltip on the chart, these views also changes page. it looks like conflicts two swipe actions. I think it is also strange user experience.
An example file main.dart occurs.
tsuruobiz
on 13 Apr 2021
Additional:
@jfmichel workaround onHorizontalDragUpdate: (x) {}, also works fine Horizontal Scroll in PageView.
Thanks!
tsuruobiz
on 13 Apr 2021
👍1
I think @florianh01 solution is the best at the moment (I don't have any better Idea)
We just can embed this code in the library, and give a flag outside to handle this.
Do you think it should be handled in the library? or it is fine to handle it with a trick?
imaNNeoFighT
on 15 Apr 2021
Was this page helpful?
0 / 5 - 0 ratings
Related issues
BadReese
路
6Comments
alexodus
路
3Comments
S1nPur1ty
路
4Comments
MobileMon
路
4Comments
satrio1256
路
6Comments
Most helpful comment
For anyone else encountering this Problem, I found a workaround:
Wrapping The Chart inside a GestureDetector Widget + overriding onHorizontalDragUpdate function works surprisingly well: