hazem saad
hazem saad

Reputation: 109

flutter fl chart responsive

i use line chart on the flutter app and wondering how to make the data responsive to any size of the screens, for example when i click on the chart to see the data of the first index of flspot, the number size is so small on tablets screen, how can i change the size of the data that represented from flspots on the chart?

detailed photos of phone and tablet screen in sequence:

[phone size] (https://i.sstatic.net/7A8Xalxe.png)

tablet size

here is my code:

LineChart(
                          LineChartData(
                            minX: 0,
                            maxX: chartData.length.toDouble() - 1,
                            minY: 0,
                            maxY: getMaxYValue(chartData) * 1.25,
                            lineBarsData: [
                              LineChartBarData(
                                shadow: Shadow(color: Colors.green, blurRadius: 20, offset: Offset(0,0)),
                                spots: chartData,
                                isCurved: widget.isCurved,
                                gradient: LinearGradient(colors: [Colors.green, Colors.green]),
                                barWidth: 3,
                                isStepLineChart: widget.isStepLine,
                                belowBarData: BarAreaData(
                                  show: true,
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    colors: [Colors.green.withOpacity(0.4), Colors.transparent],
                                  ),
                                ),
                                dotData: FlDotData(show: firstDot,
                                ),
                              ),
                            ],
                            gridData: FlGridData(
                              show: false,
                              drawHorizontalLine: true,
                              drawVerticalLine: false,
                              getDrawingVerticalLine: (value) {
                                return FlLine(
                                  color: Colors.red.shade800,
                                  strokeWidth: 0.1,
                                );
                              },
                            ),
                            titlesData: FlTitlesData(
                              leftTitles: AxisTitles(
                                sideTitles: SideTitles(showTitles: false),
                              ),
                              topTitles: AxisTitles(
                                sideTitles: SideTitles(
                                  showTitles: false,
                                ),
                              ),
                              rightTitles: AxisTitles(
                                sideTitles: SideTitles(showTitles: false),
                              ),
                              bottomTitles: AxisTitles(
                                sideTitles: SideTitles(
                                    showTitles: true,
                                    reservedSize: 45,
                                    interval: 1,
                                    getTitlesWidget: (value, meta) {
                                      String text = '';
                                      switch (value.toInt()) {
                                        case 0:
                                          if (value == 0) text = 'D1';
                                          break;
                                        case 1:
                                          if (value == 1) text = 'D2';
                                          break;
                                        case 2:
                                          if (value == 2) text = 'D3';
                                          break;
                                        case 3:
                                          if (value == 3) text = 'D4';
                                          break;
                                        case 4:
                                          if (value == 4) text = 'D5';
                                          break;
                                        case 5:
                                          if (value == 5) text = 'D6';
                                          break;
                                        case 6:
                                          if (value == 6) text = 'D7';
                                          break;
                                        default:
                                          return Container();
                                      }
                                      return Text(
                                        text,
                                        style: TextStyle(
                                          color: Colors.white,
                                          fontSize: maxWidth * 0.035,
                                        ),
                                      );
                                    }),
                              ),
                            ),
                            borderData: FlBorderData(show: false,),
                          ),
                        ),

Thank you in advance

Upvotes: 0

Views: 58

Answers (0)

Related Questions