Search code examples
flutterdartcardfl-chart

How to display children with in a card widget, and one of the child is fl bar chart?


This is the error that appeared on my terminal when I run the flutter run command. How can I have two children inside a card without overflowing or extending its size to infinity??

The following RenderObject was being processed when the exception was fired: RenderBarChart#947f3 relayoutBoundary=up24
NEEDS-LAYOUT NEEDS-PAINT:
  creator: BarChartLeaf ← Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ←
    BarChart ← BarChartWidget ← RepaintBoundary ← IndexedSemantics ←
    NotificationListener<KeepAliveNotification> ← KeepAlive ← AutomaticKeepAlive ← ⋯
  parentData: <none> (can use size)
  constraints: BoxConstraints(w=376.0, 0.0<=h<=Infinity)
  size: Size(376.0, Infinity)
This RenderObject has no descendants.

//Code

Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(15),
      child: Card(
        shadowColor: Colors.red,
        elevation: 20,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        color: Color(0xff240046),
        child: ListView(
          shrinkWrap: true,
          children: [
            BarChartWidget(),
            Text("Demo"),
          ],
        ),
      ),
    );

I also tried SingleChildScrollView too, but not works

Here is the code I used to build the flutter chart.

Widget build(BuildContext context) {
    return BarChart(BarChartData(
        axisTitleData: FlAxisTitleData(
          show: true,
          leftTitle: AxisTitle(
            titleText: "Interest Rate",
            showTitle: true,
            textStyle: TextStyle(fontSize: 15, color: Colors.white),
          ),
          bottomTitle: AxisTitle(
            titleText: "Banks",
            showTitle: true,
            textStyle: TextStyle(fontSize: 15, color: Colors.white),
          ),
        ),
        titlesData: FlTitlesData(
          bottomTitles: BarTitles.getBottomTitles(),
          leftTitles: BarTitles.getLeftTitles(),
        ),
        gridData: FlGridData(checkToShowHorizontalLine: (value) {
          return value % BarData.interval == 0;
        }, getDrawingHorizontalLine: (value) {
          return FlLine(
            color: Colors.white,
            strokeWidth: 0.5,
          );
        }),
        minY: 0,
        maxY: 10,
        groupsSpace: 5,
        barGroups: BarData.barData.map((data) {
          return BarChartGroupData(x: data.id, barRods: [
            BarChartRodData(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(5),
                topRight: Radius.circular(5),
              ),
              y: data.y,
              width: 20,
              colors: [data.color],
            ),
          ]);
        }).toList()));
  }

Solution

  • It would have been better to see you BarChartWidget() class.

    Why not Wrap with an Expanded() widget and see.

    ListView(
      children: [
        Expanded(
          child: Column( 
            children: [
              BarChartWidget(),
              Text("Demo"),
           ],
          ),
        ),
      ],
    ),
    
    

    OR

    SingleChildScrollView(
      child: 
        Expanded(
          child: Column( 
            children: [
              BarChartWidget(),
              Text("Demo"),
           ],
          ),
        ),
    ),
    

    This is the reason you are getting the error: ‘Vertical viewport was given unbounded height’