Skip to content

Commit

Permalink
Flutter Charts removed and Custom Pie Chart Added
Browse files Browse the repository at this point in the history
ketanchoyal committed Sep 25, 2019

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 11fd139 commit b0155fa
Showing 6 changed files with 210 additions and 90 deletions.
9 changes: 9 additions & 0 deletions lib/Core/Services/Api.dart
Original file line number Diff line number Diff line change
@@ -4,6 +4,14 @@ import 'package:http/http.dart' as http;
import 'package:instaknown/Core/Services/UrlHelper.dart';
import 'package:instaknown/Core/models/Result.dart';

const res = {
"Name": "Selena Gomez",
"Picture":
"https://instagram.fnag1-2.fna.fbcdn.net/vp/9c318cc8cc41e4812748ab373c60f016/5DFDDF3A/t51.2885-19/s320x320/52780205_395221154575465_269834356913078272_n.jpg?_nc_ht=instagram.fnag1-2.fna.fbcdn.net",
"Type": "Success",
"Value": {"Negative": 3.0, "Neutral": 79.0, "Overall": 27.0, "Positive": 17.0}
};

class Api {
// String _url = 'http://7755efc4.ngrok.io/requestjson';

@@ -39,6 +47,7 @@ class Api {
return result;
} else {
return Result();
// return Result.fromJson(res);
}
}

201 changes: 163 additions & 38 deletions lib/UI/Pages/PieChartPage.dart
Original file line number Diff line number Diff line change
@@ -1,27 +1,31 @@
import 'dart:math';
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
import 'package:instaknown/UI/Resources/Constants.dart' as R;

class GaugeChart extends StatelessWidget {
final bool animate;
final Color color;
final List<Color> colors;
final double percentage;
final bool isPrivate;

GaugeChart({
this.animate,
this.color,
this.colors,
this.percentage,
this.isPrivate = false,
});

@override
Widget build(BuildContext context) {

return Container(
height: 150,
width: 150,
// margin: EdgeInsets.all(8),
decoration: BoxDecoration(
// color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(150.0),
),
border: new Border.all(width: 4, color: colors[1].withOpacity(0.2)),
),
child: Center(
child: Stack(
children: <Widget>[
@@ -37,14 +41,14 @@ class GaugeChart extends StatelessWidget {
),
),
),
charts.PieChart(
_createSampleData(),
animate: animate,
defaultInteractions: false,
defaultRenderer: charts.ArcRendererConfig(
arcWidth: 20,
startAngle: 7.5 / 5 * pi,
arcLength: 10 / 5 * pi * percentage / 100,
CustomPaint(
painter: CurvePainter(
colors: colors,
percentage: percentage / 100,
),
child: SizedBox(
width: 150,
height: 150,
),
),
],
@@ -54,32 +58,153 @@ class GaugeChart extends StatelessWidget {
}

/// Create one series with sample hard coded data.
List<charts.Series<GaugeSegment, String>> _createSampleData() {
final data = [
new GaugeSegment(
'',
1,
charts.Color.fromHex(
code: "#" + color.value.toRadixString(16).substring(2))),
];

return [
new charts.Series<GaugeSegment, String>(
id: 'Segments',
colorFn: (GaugeSegment segment, _) => segment.color,
domainFn: (GaugeSegment segment, _) => segment.segment,
measureFn: (GaugeSegment segment, _) => segment.size,
data: data,
)
];
}
// List<charts.Series<GaugeSegment, String>> _createSampleData() {
// final data = [
// new GaugeSegment(
// '',
// 1,
// charts.Color.fromHex(
// code: "#" + color.value.toRadixString(16).substring(2))),
// ];

// return [
// new charts.Series<GaugeSegment, String>(
// id: 'Segments',
// colorFn: (GaugeSegment segment, _) => segment.color,
// domainFn: (GaugeSegment segment, _) => segment.segment,
// measureFn: (GaugeSegment segment, _) => segment.size,
// data: data,
// )
// ];
// }
}

/// Sample data type.
class GaugeSegment {
final String segment;
final int size;
final charts.Color color;
// class GaugeSegment {
// final String segment;
// final int size;
// final charts.Color color;

// GaugeSegment(this.segment, this.size, this.color);
// }

class CurvePainter extends CustomPainter {
double _angle;
final List<Color> colors;
final double percentage;

CurvePainter({
this.colors,
this.percentage: 0.3,
}) {
_angle = 360 * percentage;
}

@override
void paint(Canvas canvas, Size size) {
List<Color> colorsList = List<Color>();
if (colors != null) {
colorsList = colors;
} else {
colorsList.addAll([Colors.white, Colors.white]);
}

final shdowPaint = new Paint()
..color = Colors.black.withOpacity(0.4)
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 20;
final shdowPaintCenter = new Offset(size.width / 2, size.height / 2);
final shdowPaintRadius = min(size.width / 2, size.height / 2) - (14 / 2);
canvas.drawArc(
new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
degreeToRadians(278),
degreeToRadians(360 - (365 - _angle)),
false,
shdowPaint);

shdowPaint.color = Colors.grey.withOpacity(0.3);
shdowPaint.strokeWidth = 16;
canvas.drawArc(
new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
degreeToRadians(278),
degreeToRadians(360 - (365 - _angle)),
false,
shdowPaint);

shdowPaint.color = Colors.grey.withOpacity(0.2);
shdowPaint.strokeWidth = 20;
canvas.drawArc(
new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
degreeToRadians(278),
degreeToRadians(360 - (365 - _angle)),
false,
shdowPaint);

shdowPaint.color = Colors.grey.withOpacity(0.1);
shdowPaint.strokeWidth = 22;
canvas.drawArc(
new Rect.fromCircle(center: shdowPaintCenter, radius: shdowPaintRadius),
degreeToRadians(278),
degreeToRadians(360 - (365 - _angle)),
false,
shdowPaint);

GaugeSegment(this.segment, this.size, this.color);
final rect = new Rect.fromLTWH(0.0, 0.0, size.width, size.width);
final gradient = new SweepGradient(
startAngle: degreeToRadians(268),
endAngle: degreeToRadians(270.0 + 360),
tileMode: TileMode.repeated,
colors: colorsList,
);
final paint = new Paint()
..shader = gradient.createShader(rect)
..strokeCap = StrokeCap.round // StrokeCap.round is not recommended.
..style = PaintingStyle.stroke
..strokeWidth = 14;
final center = new Offset(size.width / 2, size.height / 2);
final radius = min(size.width / 2, size.height / 2) - (14 / 2);

canvas.drawArc(
new Rect.fromCircle(center: center, radius: radius),
degreeToRadians(278),
degreeToRadians(360 - (365 - _angle)),
false,
paint);

final gradient1 = new SweepGradient(
tileMode: TileMode.repeated,
colors: [Colors.white, Colors.white],
);

var cPaint = new Paint();
cPaint..shader = gradient1.createShader(rect);
cPaint..color = Colors.white;
cPaint..strokeWidth = 14 / 2;
canvas.save();

final centerToCircle = size.width / 2;
canvas.save();

canvas.translate(centerToCircle, centerToCircle);
canvas.rotate(degreeToRadians(_angle + 2));

canvas.save();
canvas.translate(0.0, -centerToCircle + 14 / 2);
canvas.drawCircle(new Offset(0, 0), 14 / 5, cPaint);

canvas.restore();
canvas.restore();
canvas.restore();
}

@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}

double degreeToRadians(double degree) {
var redian = (pi / 180) * degree;
return redian;
}
}
35 changes: 18 additions & 17 deletions lib/UI/Pages/PrivateAccount.dart
Original file line number Diff line number Diff line change
@@ -358,12 +358,12 @@ class _PrivateAccountState extends State<PrivateAccount> {
child: Column(
children: <Widget>[
GaugeChart(
animate: false,
isPrivate: true,
color: Colors.black,
percentage:
result.value.negative,
),
colors: [
Colors.black,
Colors.black54
],
percentage: result.value.negative,
),
Row(
mainAxisAlignment:
MainAxisAlignment.center,
@@ -395,12 +395,12 @@ class _PrivateAccountState extends State<PrivateAccount> {
child: Column(
children: <Widget>[
GaugeChart(
animate: false,
color: Colors.purple,
isPrivate: true,
percentage:
result.value.positive,
),
colors: [
Colors.purple,
Colors.purpleAccent
],
percentage: result.value.positive,
),
Row(
mainAxisAlignment:
MainAxisAlignment.center,
@@ -433,11 +433,12 @@ class _PrivateAccountState extends State<PrivateAccount> {
Column(
children: <Widget>[
GaugeChart(
animate: false,
color: Colors.lightGreen,
percentage: result.value.neutral,
isPrivate: true,
),
colors: [
Colors.lightGreen,
Colors.lightGreenAccent,
],
percentage: result.value.neutral,
),
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
25 changes: 19 additions & 6 deletions lib/UI/Pages/PublicAccount.dart
Original file line number Diff line number Diff line change
@@ -251,8 +251,11 @@ class _PublicAccountState extends State<PublicAccount> {
Column(
children: <Widget>[
GaugeChart(
animate: false,
color: Colors.black,
colors: [
Colors.black,
Colors.black54,
Colors.white,
],
percentage: result.value.negative,
),
Row(
@@ -279,8 +282,11 @@ class _PublicAccountState extends State<PublicAccount> {
Column(
children: <Widget>[
GaugeChart(
animate: false,
color: Colors.purple,
colors: [
Colors.purple,
Colors.purpleAccent,
Colors.deepPurple,
],
percentage: result.value.positive,
),
Row(
@@ -307,10 +313,17 @@ class _PublicAccountState extends State<PublicAccount> {
],
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
GaugeChart(
animate: false,
color: Colors.lightGreen,
colors: [
Colors.lightGreen,
Colors.lightGreenAccent,
Colors.greenAccent.withOpacity(0.5)
],
percentage: result.value.neutral,
),
Row(
Loading

0 comments on commit b0155fa

Please sign in to comment.