Search code examples
flutterdartsyncfusion

Using syncfusion charts, the chart is not displaying in the screen


Created a simple barchart but it will not display on the page.

Here's my code

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: ListView(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(
              left: 28,
              right: 28,
            ),
            child: BarChartWidget(),
          ),
          SizedBox(height: 22),
        ],
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';

class BarChartWidget extends StatefulWidget {
  const BarChartWidget({Key? key}) : super(key: key);

  @override
  State<BarChartWidget> createState() => _BarChartWidgetState();
}

class _BarChartWidgetState extends State<BarChartWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
      child:
          SfCartesianChart(primaryXAxis: CategoryAxis(), series: <ChartSeries>[
        // Initialize line series
        LineSeries<ChartData, String>(
            dataSource: [
              // Bind data source
              ChartData('Jan', 35),
              ChartData('Feb', 28),
              ChartData('Mar', 34),
              ChartData('Apr', 32),
              ChartData('May', 40)
            ],
            xValueMapper: (ChartData data, _) => data.x,
            yValueMapper: (ChartData data, _) => data.y)
      ]),
    )));
  }
}

class ChartData {
  ChartData(this.x, this.y);
  final String x;
  final double? y;
}

enter image description here

It should look like this

enter image description here

What did I do wrong?

What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong? What did I do wrong?


Solution

  • You have wrapped the scaffold widget inside the ListView which is the reason why you have got this exception. The Scaffold widget always must be a parent or if it is wrapped with any other widget, we must need to specify the size of the parent widget. So, we suggest you avoid wrapping the Scaffold widget inside the ListView.