Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adding optional animation for drawing the lines #66

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Adding optional animation for drawing the lines #66

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5487520
Added optional animation for drawing the chart lines.
joaortk Dec 13, 2019
fe7b791
Fixing code style
joaortk Dec 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions lib/src/bezier_chart_widget.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ class BezierChart extends StatefulWidget {
///Notify if the `BezierChartScale` changed, it only works with date scales.
final ValueChanged<BezierChartScale> onScaleChanged;

///If set, the lines are drawn with animation. Defaults to FALSE
final bool animateAppear;

BezierChart({
Key key,
this.config,
Expand All @@ -96,6 +99,7 @@ class BezierChart extends StatefulWidget {
@required this.bezierChartScale,
@required this.series,
this.onScaleChanged,
this.animateAppear = false
}) : assert(
(bezierChartScale == BezierChartScale.CUSTOM &&
xAxisCustomValues != null &&
Expand Down Expand Up @@ -147,11 +151,14 @@ class BezierChart extends StatefulWidget {

@visibleForTesting
class BezierChartState extends State<BezierChart>
with SingleTickerProviderStateMixin {
with TickerProviderStateMixin {
AnimationController _animationController;
Animation _appearAnimation;
ScrollController _scrollController;
GlobalKey _keyScroll = GlobalKey();

double _appearFraction = 0.0;

///Track the current position when dragging the indicator
Offset _verticalIndicatorPosition;
bool _displayIndicator = false;
Expand Down Expand Up @@ -753,6 +760,21 @@ class BezierChartState extends State<BezierChart>
milliseconds: 300,
),
);

if(widget.animateAppear) {
var controller = AnimationController(
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you change to final instead of var here? controller won't be modified

duration: Duration(milliseconds: 2000), vsync: this);

_appearAnimation = Tween(begin: 0.0, end: 1.0).animate(controller)
..addListener(() {
setState(() {
_appearFraction = _appearAnimation.value;
});
});

controller.forward();
}

_buildXDataPoints();
_computeSeries();
WidgetsBinding.instance.addPostFrameCallback(_onLayoutDone);
Expand Down Expand Up @@ -843,6 +865,7 @@ class BezierChartState extends State<BezierChart>
curve: Curves.elasticOut,
),
),
appearFraction: widget.animateAppear ? _appearFraction : 1.0,
xAxisDataPoints: _xAxisDataPoints,
onDataPointSnap: _onDataPointSnap,
maxWidth: MediaQuery.of(context).size.width,
Expand Down Expand Up @@ -986,6 +1009,7 @@ class _BezierChartPainter extends CustomPainter {
final double radiusDotIndicatorItems = 3.5;
final bool showIndicator;
final Animation animation;
final double appearFraction;
final ValueChanged<double> onDataPointSnap;
final BezierChartScale bezierChartScale;
final double maxWidth;
Expand All @@ -1007,6 +1031,7 @@ class _BezierChartPainter extends CustomPainter {
this.showIndicator,
this.xAxisDataPoints,
this.animation,
this.appearFraction,
this.bezierChartScale,
this.onDataPointSnap,
this.maxWidth,
Expand Down Expand Up @@ -1255,7 +1280,9 @@ class _BezierChartPainter extends CustomPainter {

//only draw the footer for the first line because it is the same for all the lines
if (!footerDrawed) footerDrawed = true;

if (appearFraction < 1.0) {
canvas.clipRect(Rect.fromLTWH(0, 0, size.width * appearFraction, size.height));
}
canvas.drawPath(path, paintLine);
if (config.showDataPoints) {
//draw data points
Expand Down Expand Up @@ -1604,6 +1631,7 @@ class _BezierChartPainter extends CustomPainter {
class _AxisValue {
final double x;
final double y;

const _AxisValue({
this.x,
this.y,
Expand Down