'trying to get create a simple bar chart from charts_flutter
I have an issue with this simple bar charts_flutter code. Although I have no errors in my code, only the x-axis gets displayed onto the screen.
I suspect it's because of the SingleChildScrollView messing with the grey container's margins, but I'm not so sure since the x-axis was able to display. Any ideas and help would be much appreciated.
Sidenote: Are there any good tutorials for charts_flutter?
This is what it's supposed to look like
Here's my code
import 'package:flutter/material.dart';
/// Bar chart example
import 'package:charts_flutter/flutter.dart' as charts;
class BarChartWidget extends StatelessWidget {
final List<charts.Series<dynamic, String>> seriesList;
final bool animate;
BarChartWidget(this.seriesList, {this.animate = false});
/// Creates a [BarChart] with sample data and no transition.
factory BarChartWidget.withSampleData() {
return BarChartWidget(
_createSampleData(),
// Disable animations for image tests.
animate: false,
);
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 300,
child: charts.BarChart(
seriesList,
animate: animate,
),
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
OrdinalSales('2014', 5),
OrdinalSales('2015', 25),
OrdinalSales('2016', 100),
OrdinalSales('2017', 75),
];
return [
charts.Series<OrdinalSales, String>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
)
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}
Grey Container where the graph should be
import 'package:flutter/material.dart';
import 'bar_chart_sample1.dart';
class BarChartPage extends StatelessWidget {
const BarChartPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: Color.fromARGB(255, 166, 166, 166),
child: SizedBox(
height: 300,
child: ListView(
children: <Widget>[
BarChartWidget([]),
],
),
),
);
}
}
Overall Page containing the Grey Container
body: TabBarView(
children: [
Column(
),
Container(
margin: EdgeInsets.only(top: 8),
child: Stack(
children: [
Obx(
),
Container(
margin: EdgeInsets.only(top: 30, bottom: 30),
height: 20,
child: DefaultTabController(
initialIndex: 0,
length: 3,
child: Scaffold(
appBar: AppBar(
title: TabBar(
indicatorColor: Colors.green,
tabs: [
Tab(
text: "About",
),
Tab(
text: "Stats",
),
Tab(
text: "Activity",
),
],
),
),
),
),
),
Container(
---> child: LineChartPage(),
),
],
),
),
Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
FaIcon(FontAwesomeIcons.personDigging),
Text("Coming soon!"),
],
),
),
],
),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|


