xqwzts / flutter_circular_chart Goto Github PK
View Code? Open in Web Editor NEWAnimated radial and pie charts for Flutter
License: MIT License
Animated radial and pie charts for Flutter
License: MIT License
Please upgrade to null safety ASAP
Pie charts cannot display multiple stacks, add an assertion in CircularChart
to check that stacks.length == 1 if chartType is Pie
.
I have no idea how to create final GlobalKey _chartKey; It is not clearly mentioned in the document. I am new to Dart + Flutter
Without even passing this object my chart is rendered properly. What am I missing then?
Basically, the circular charts were fine when they were in a static widget. But when I put them in a statefull widget (listview), and scrolled (triggering a redraw) crazy stuff started happening. One of the segments turned straight, and the whole widget just started flickering.
here's my code
import 'dart:math';
import 'package:moves/screencomponents/my_flutter_app_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_sparkline/flutter_sparkline.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
import 'browse/browse.dart';
class StockDetails extends StatefulWidget {
@override
_StockDetailsState createState() => _StockDetailsState();
}
class _StockDetailsState extends State<StockDetails> {
final GlobalKey<AnimatedCircularChartState> _chartKey1 =
GlobalKey<AnimatedCircularChartState>();
final GlobalKey<AnimatedCircularChartState> _chartKey2 =
GlobalKey<AnimatedCircularChartState>();
List<double> mockData = [1.0, 6.0, 4.0, 3.0, 8.0, 6.0, 4.0, 6.0, 3.0];
List<CircularStackEntry> data1 = <CircularStackEntry>[
CircularStackEntry(
<CircularSegmentEntry>[
CircularSegmentEntry(22.0, Colors.red[200], rankKey: 'Q1'),
CircularSegmentEntry(88.0, Colors.grey[300], rankKey: 'Q2'),
],
rankKey: 'Quarterly Profits1',
),
];
List<CircularStackEntry> data2 = <CircularStackEntry>[
CircularStackEntry(
<CircularSegmentEntry>[
CircularSegmentEntry(22.0, Colors.green[200], rankKey: 'Q3'),
CircularSegmentEntry(88.0, Colors.grey[300], rankKey: 'Q4'),
],
rankKey: 'Quarterly Profits2',
),
];
TextStyle titleTextStyle() {
return TextStyle(
fontSize: 19.0,
fontWeight: FontWeight.w500,
letterSpacing: 1.5,
color: Colors.black,
wordSpacing: 0.5,
);
}
TextStyle middleTextStyle() {
return TextStyle(
fontSize: 14.5,
fontWeight: FontWeight.w400,
letterSpacing: 1.0,
color: Colors.black,
wordSpacing: 0.5,
);
}
Widget timePeriod(String timeInterval) {
return Padding(
padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0.0),
child: Container(
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.white,
borderRadius: BorderRadius.circular(15.0),
border: Border.all()),
height: 20.0,
width: 35.0,
child: Center(
child: Text(
timeInterval,
style: middleTextStyle(),
),
),
),
);
}
Widget infoCard() {
return Padding(
padding: EdgeInsets.fromLTRB(MediaQuery.of(context).size.width * 0.0364,
0.0, MediaQuery.of(context).size.width * 0.0364, 0.0),
child: Card(
elevation: 10.0,
child: Container(
height: MediaQuery.of(context).size.width * 0.1458,
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Expanded(
child: Padding(
padding: EdgeInsets.fromLTRB(
MediaQuery.of(context).size.width * 0.024,
MediaQuery.of(context).size.height * 0.00645,
0.0,
0.0),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
"3.1M Bet Against Apple Inc.",
style: titleTextStyle(),
),
Text(
"12/4/2018 04:00PM",
style: middleTextStyle(),
),
],
),
),
),
Container(
color: Colors.transparent,
height: MediaQuery.of(context).size.height * .0774,
width: MediaQuery.of(context).size.width * .12153,
alignment: Alignment(
0.0, MediaQuery.of(context).size.height * -0.00451),
child: IconButton(
icon: Icon(Icons.bookmark),
color: Colors.black,
onPressed: () {
print(MediaQuery.of(context).size.width);
},
),
),
],
),
),
));
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [const Color(0xFFffffff), const Color(0xFFdfe9f3)])),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Padding(
padding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
child: Column(
children: <Widget>[
Text(
"Apple Inc.",
style: titleTextStyle(),
),
Text(
"NYSE - APPL",
style: middleTextStyle(),
)
],
),
),
leading: IconButton(
onPressed: () {
print("leading pressed");
},
icon: Icon(
Icons.arrow_back,
color: Colors.black,
),
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.remove_red_eye),
color: Colors.black,
onPressed: () {
print("watch pressed!");
},
)
],
),
body: ListView(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(
MediaQuery.of(context).size.width * 0.11,
MediaQuery.of(context).size.height * .038,
MediaQuery.of(context).size.width * 0.11,
0.0),
child: Container(
height: MediaQuery.of(context).size.height * 0.257,
width: double.infinity,
decoration:
BoxDecoration(border: Border.all(), color: Colors.white),
child: Stack(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0.0, 50.0, 0.0, 0.0),
child: Sparkline(
lineColor: Colors.black,
data: mockData,
fillMode: FillMode.below,
fillGradient: new LinearGradient(
begin: Alignment(0.0, -1.4),
end: Alignment(0.0, 1.0),
colors: [Colors.green, Colors.white],
),
),
),
Padding(
padding: EdgeInsets.fromLTRB(10.0, 10.0, 0.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
r"$120.53",
style: TextStyle(
fontSize: 35.0,
fontWeight: FontWeight.w600,
letterSpacing: 1.5,
color: Colors.black,
wordSpacing: 0.5),
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Icon(
MyFlutterApp.asset_1,
color: Colors.green,
size: 14.0,
),
),
Padding(
padding:
EdgeInsets.fromLTRB(15.0, 15.0, 0.0, 0.0),
child: Text(
"0.09%",
style: middleTextStyle(),
),
),
],
),
),
Container(
alignment: Alignment(0.0, 1.1),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
child: Text(
"more info",
style: middleTextStyle(),
),
),
IconButton(
//TODO: render inkwell ontop.
icon: Icon(Icons.keyboard_arrow_down),
onPressed: () {
print("More info pressed");
//todo: i'm going to basically turn this container into an expanded box. reference lib/screencomponents/expandedcard.dart
},
),
],
),
),
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
timePeriod("1D"),
timePeriod("1W"),
timePeriod("1M"),
timePeriod("3M"),
timePeriod("1Y"),
timePeriod("5Y"),
],
),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Text("% short"),
AnimatedCircularChart(
holeRadius: 30.0,
key: _chartKey1,
size: Size(150.0, 150.0),
initialChartData: data1,
chartType: CircularChartType.Radial,
edgeStyle: SegmentEdgeStyle.flat,
),
],
),
Column(
children: <Widget>[
Text("% for"),
AnimatedCircularChart(
holeRadius: 30.0,
key: _chartKey2,
size: Size(150.0, 150.0),
initialChartData: data2,
chartType: CircularChartType.Radial,
edgeStyle: SegmentEdgeStyle.flat,
),
],
),
],
),
), //row
Column(
children: <Widget>[
Text("Strange Trades"),
],
),
],
),
));
}
}
There are no params for that. And all I do for now it hard code the stroke width...
void _paintChart(Canvas canvas, Size size, CircularChart chart) {
final Paint segmentPaint = new Paint()
..style = chart.chartType == CircularChartType.Radial
? PaintingStyle.stroke
: PaintingStyle.fill
..strokeCap = chart.edgeStyle == SegmentEdgeStyle.round
? StrokeCap.round
: StrokeCap.butt;
for (final CircularChartStack stack in chart.stacks) {
for (final segment in stack.segments) {
segmentPaint.color = segment.color;
segmentPaint.strokeWidth = 3;//stack.width;
canvas.drawArc(
new Rect.fromCircle(
center: new Offset(size.width / 2, size.height / 2),
radius: stack.radius,
),
stack.startAngle * _kRadiansPerDegree,
segment.sweepAngle * _kRadiansPerDegree,
chart.chartType == CircularChartType.Pie,
segmentPaint,
);
}
}
}
For now, this only support a hole label in the center of radial chart.
I'm compiling my project with the latest flutter version 3.22.0.
I got the following compile error:
../../.pub-cache/hosted/pub.dev/awesome_circular_chart-1.0.0/lib/src/animated_circular_chart.dart:221:60: Error: The getter 'bodyText1' isn't defined for the class 'TextTheme'.
- 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../Documents/workspace/flutter/packages/flutter/lib/src/material/text_theme.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'bodyText1'.
widget.labelStyle ?? Theme.of(context).textTheme.bodyText1;
^^^^^^^^^
Target kernel_snapshot failed: Exception
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:compileFlutterBuildRelease'.
> Process 'command '/workspace/flutter/bin/flutter'' finished with non-zero exit value 1
* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
* Get more help at https://help.gradle.org
BUILD FAILED in 8s
Is this a known issue?
Option to use StrokeCap.round
as the stroke cap style.
When upgrading the library to flutter 0.6.0, the library fails to solve versions:
The current Dart SDK version is 2.1.0-dev.0.0.flutter-be6309690f.
Because flutter_circular_chart 0.0.3 requires SDK version >=1.19.0 <2.0.0 and no versions of flutter_circular_chart match >0.0.3 <0.1.0, flutter_circular_chart ^0.0.3 is forbidden.
So, because flutter_example depends on flutter_circular_chart ^0.0.3, version solving failed.
pub get failed (1)
Filename:
.../AppData/Roaming/Pub/Cache/hosted/pub.dartlang.org/flutter_circular_chart-0.1.0/lib/src/animated_circular_chart.dart
The below line is giving error while building app:
line 121, 122:
final AnimatedCircularChartState result = context
.ancestorStateOfType(const TypeMatcher());
ERROR:
_The method 'ancestorStateOfType' isn't defined for the class 'BuildContext'.
FAILURE: Build failed with an exception.
Where:
Script 'C:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 991
What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
Process 'command 'C:\flutter\bin\flutter.bat'' finished with non-zero exit value 1
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Get more help at https://help.gradle.org
BUILD FAILED in 20s
Running Gradle task 'assembleDebug'...
Running Gradle task 'assembleDebug'... Done 21.9s
Exception: Gradle task assembleDebug failed with exit code 1_
Currently have percentage
as the rankKey for multiple segments, make each segment have a unique rankKey.
Calculate the positioning of the label based on the holeRadius
and center it in the chart.
All public APIs need proper documentation:
CircularSegmentEntry
and CircularStackEntry
CircularChart
AnimatedCircularChart
rankKey
As shown here: flutter/flutter#14008
the flutter:
section in pubspec.yaml
leads to an error when building. Removing it should fix this.
I see the last version was uploaded on Aug 30, 2018
Basically if you use \n and create a new line it will not be centered instead if will be aligned to the left like the default text. Would be really great if it would be possible to center the label
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.