I am trying to display data form a Json to a single line chart in a flutter app . I have a drawer where clicking something takes you to the desired page. My problem is in chart creation and passing the data from the jason. An help is apreciated.
My code : main:
import 'package:flutter/material.dart';
import 'Heartrate.dart';
import 'Demographics.dart';
import 'Sleep.dart';
import 'Steps.dart';
import 'package:flutter_sparkline/flutter_sparkline.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_circular_chart/flutter_circular_chart.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Dashboard'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var data = [0.0, 1.0, 1.5, 2.0, 0.0];
var data1 = [0.0, -2.0, 3.5, -2.0, 0.5, 0.7, 0.8, 1.0, 2.0, 3.0, 3.2];
List<CircularStackEntry> circularData = <CircularStackEntry>[
new CircularStackEntry(
<CircularSegmentEntry>[
new CircularSegmentEntry(1800.0, Color(0xffec3337), rankKey: 'Q1'),
new CircularSegmentEntry(1000.0, Color(0xff40b24b), rankKey: 'Q2'),
],
),
];
Material myTextItems(String title, Icon icon) {
return Material(
color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
title,
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: new Icon(Icons.account_box),
),
],
),
],
),
),
),
);
}
Material myTextItems1(String title, Icon icon) {
return Material(
color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
title,
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: new Icon(Icons.airline_seat_individual_suite_sharp),
),
],
),
],
),
),
),
);
}
Material myCircularItems(String title) {
return Material(
color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(8.0),
child: Text(
title,
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
),
),
),
Padding(
padding: EdgeInsets.all(8.0),
child: AnimatedCircularChart(
size: const Size(100.0, 100.0),
initialChartData: circularData,
chartType: CircularChartType.Pie,
),
),
],
),
],
),
),
),
);
}
Material mychart1Items(String title) {
return Material(
color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(1.0),
child: Text(
title,
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
),
),
),
Padding(
padding: EdgeInsets.all(1.0),
child: new Sparkline(
data: data,
lineColor: Color(0xffff6101),
pointsMode: PointsMode.all,
pointSize: 8.0,
),
),
],
),
],
),
),
),
);
}
Material mychart2Items(String title, String priceVal, String subtitle) {
return Material(
color: Colors.white,
elevation: 14.0,
borderRadius: BorderRadius.circular(24.0),
shadowColor: Color(0x802196F3),
child: Center(
child: Padding(
padding: EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: EdgeInsets.all(1.0),
child: Text(
title,
style: TextStyle(
fontSize: 20.0,
color: Colors.blueAccent,
),
),
),
Padding(
padding: EdgeInsets.all(1.0),
child: Text(
priceVal,
style: TextStyle(
fontSize: 30.0,
),
),
),
Padding(
padding: EdgeInsets.all(1.0),
child: Text(
subtitle,
style: TextStyle(
fontSize: 20.0,
color: Colors.blueGrey,
),
),
),
Padding(
padding: EdgeInsets.all(1.0),
child: new Sparkline(
data: data1,
fillMode: FillMode.below,
fillGradient: new LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Colors.amber[800], Colors.amber[200]],
),
),
),
],
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Dashboard'),
centerTitle: true,
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue
),
child: Text('Health',
style: TextStyle (
fontSize: 40)
),
),
ListTile(
leading: IconButton(
icon: Icon(Icons.home),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => MyHomePage()));
}),
title: Text('Home'),
),
ListTile(
leading: IconButton(
icon: Icon(Icons.favorite),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Heartrate()));
}),
title: Text('Heartrate'),
),
ListTile(
leading: IconButton(
icon: Icon(Icons.directions_walk),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Steps()));
}),
title: Text('Steps'),
),
ListTile(
leading: IconButton(
icon: Icon(Icons.airline_seat_individual_suite_sharp),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Sleep()));
}),
title: Text('Sleep'),
),
ListTile(
leading: IconButton(
icon: Icon(Icons.account_circle),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Demographics()));
}),
title: Text('Demographics'),
),
]
),
),
body: Container(
color: Color(0xffE5E5E5),
child: StaggeredGridView.count(
crossAxisCount: 4,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: mychart1Items("Heartrate"),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: myCircularItems("Steps"),
),
Padding(