miltone
miltone

Reputation: 4731

AspectRatio with PieChart from fl_chart package

I would like to use PieChart (from fl_chart package) with AspectRatio widget for responsive/adaptative UI.

I already done same thing with LineChart and AspectRatio and it run like a charm.

But for PieChart I can't do that. I try :

On this container piece of code

Expanded(
  child: Row(children: [
    Expanded(child: Container(width: 648, color: MyColors.mainBackground, child: BalanceYearChart(year: currentYear, month: currentMonth))),
    Expanded(child: Container(width: 648, color: MyColors.mainBackground, child: PieCategoryChart(year: currentYear, month: currentMonth))),
    Expanded(child: Container(width: 648, color: MyColors.mainBackground, child:   LineSoldeChart(year: currentYear, month: currentMonth, lastMonth: 12))),
   ]),
  ),

Only PieChart not run with AspectRatio but BalanceYearChart and LineSoldeChart Widget run like a charm

Sample code of the PieChart

  return Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
    Row(mainAxisSize: MainAxisSize.min, children: [
      makeTransactionsIcon(),
      const SizedBox(width: 38),
      const Text('Ratio', style: TextStyle(color: Colors.white, fontSize: 22)),
      const SizedBox(width: 4),
      const Text('expenses',
          style: TextStyle(color: Color(0xff77839a), fontSize: 16)),
    ]),
    SizedBox(
        width: 300,
        height: 35,
        child: Padding(
            padding: const EdgeInsets.only(right: 120, top: 15),
            child: Text(
              valueDisplay == 0 ? '' : '$valueDisplay€',
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: MyColors.getColor(colorDisplay), fontSize: 18),
            ))),
    SizedBox(
      width: 100,
      height: 330,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          const SizedBox(height: 1),
          Expanded(
            child: PieChart(
              PieChartData(
                pieTouchData: PieTouchData(
                  touchCallback: (FlTouchEvent event, pieTouchResponse) {
                    setState(() {
                      if (!event.isInterestedForInteractions ||
                          pieTouchResponse == null ||
                          pieTouchResponse.touchedSection == null) {
                        touchedIndex = -1;
                        return;
                      }
                      touchedIndex =
                          pieTouchResponse.touchedSection!.touchedSectionIndex;

                      if (touchedIndex != -1) {
                        valueDisplay =
                            data.values.elementAt(touchedIndex)['sum'].round();
                        colorDisplay = data.values
                            .elementAt(touchedIndex)['categoryColor'];
                      } else {
                        valueDisplay = 0;
                      }
                    });
                  },
                ),
                borderData: FlBorderData(show: true),
                sectionsSpace: 5,
                centerSpaceRadius: 75,
                sections: showingSections(data),
              ),
            ),
          ),
          Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: widgetsLegend),
          const SizedBox(width: 10),
        ],
      ),
    ),
  ]);

Example of the AspectRatio run correctly with LineSoldeChart

  return AspectRatio(
    aspectRatio: 1.23,
    child: Stack(
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const SizedBox(height: 37),
            Text(
              isShowingMainData ? 'Main Balance' : 'Month measure',
              style: const TextStyle(
                  color: Color(0xFF50E4FF),
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 2),
              textAlign: TextAlign.center,
            ),
            const SizedBox(height: 37),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.only(right: 16, left: 6),
                child: _LineChart(
                    isShowingMainData: isShowingMainData,
                    data: data,
                    month: widget.month,
                    lastMonth: widget.lastMonth,
                    year: widget.year),
              ),
            ),
            const SizedBox(height: 10),
          ],
        ),
        IconButton(
          icon: Icon(Icons.refresh,
              color: Colors.white.withOpacity(isShowingMainData ? 1.0 : 0.5)),
          onPressed: () {
            setState(() {
              isShowingMainData = !isShowingMainData;
            });
          },
        )
      ],
    ),
  );

In this context, why my PieChart not run with AspectRatio widget whereas 2 others widget run correctly ?

Upvotes: 0

Views: 41

Answers (0)

Related Questions