0

So I cloned this project and put all the code into one file: https://github.com/JohannesMilke/fl_pie_chart_example

However, I'm getting an error, and cannot run the code with the stable Flutter version I have (2.8.1). It complains about:

The argument type 'void Function(FlTouchEvent)' can't be assigned to the parameter type 'void Function(FlTouchEvent, PieTouchResponse?)?

It's about this code and the error is in the touchCallback:

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class PieChartPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => PieChartPageState();
}

class PieChartPageState extends State {
  int? touchedIndex;

  @override
  Widget build(BuildContext context) => Card(
        child: Column(
          children: <Widget>[
            Expanded(
              child: PieChart(
                PieChartData(
                  pieTouchData: PieTouchData(
                    touchCallback: (pieTouchResponse) {
                      setState(() {
                        if (pieTouchResponse?.touchInput is FlLongPressEnd ||
                            pieTouchResponse.touchInput is FlPanEnd) {
                          touchedIndex = -1;
                        } else {
                          touchedIndex = pieTouchResponse.touchedSectionIndex;
                        }
                      });
                    },
                  ),
                  borderData: FlBorderData(show: false),
                  sectionsSpace: 0,
                  centerSpaceRadius: 80,
                  sections: getSections(touchedIndex!),
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Padding(
                  padding: const EdgeInsets.all(16),
                  child: IndicatorsWidget(),
                ),
              ],
            ),
          ],
        ),
      );
}

List<PieChartSectionData> getSections(int touchedIndex) => PieData.data
    .asMap()
    .map<int, PieChartSectionData>((index, data) {
      final isTouched = index == touchedIndex;
      final double fontSize = isTouched ? 25 : 16;
      final double radius = isTouched ? 100 : 80;

      final value = PieChartSectionData(
        color: data.color,
        value: data.percent,
        title: '${data.percent}%',
        radius: radius,
        titleStyle: TextStyle(
          fontSize: fontSize,
          fontWeight: FontWeight.bold,
          color: const Color(0xffffffff),
        ),
      );

      return MapEntry(index, value);
    })
    .values
    .toList();

// Data to feed pie chart
class PieData {
  static List<Data> data = [
    Data(name: 'Blue', percent: 20, color: const Color(0xff0293ee)),
    Data(name: 'Yellow', percent: 20, color: const Color(0xFFFFEE00)),
    Data(name: 'Orange', percent: 20, color: Colors.orange),
    Data(name: 'Green', percent: 20, color: const Color(0xff13d38e)),
    Data(name: 'Red', percent: 20, color: const Color(0xFFD81A13))
  ];
}

// Data model for this particular pie chart
class Data {
  final String? name;

  final double? percent;

  final Color? color;

  Data({this.name, this.percent, this.color});
}

class IndicatorsWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: PieData.data
            .map(
              (data) => Container(
                  padding: EdgeInsets.symmetric(vertical: 2),
                  child: buildIndicator(
                    color: data.color,
                    text: data.name,
                    // isSquare: true,
                  )),
            )
            .toList(),
      );

  // Indicators
  Widget buildIndicator({
    @required Color? color,
    @required String? text,
    bool isSquare = false,
    double size = 16,
    Color textColor = const Color(0xff505050),
  }) =>
      Row(
        children: <Widget>[
          Container(
            width: size,
            height: size,
            decoration: BoxDecoration(
              shape: isSquare ? BoxShape.rectangle : BoxShape.circle,
              color: color,
            ),
          ),
          const SizedBox(width: 8),
          Text(
            text!,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: textColor,
            ),
          )
        ],
      );
}
4

1 回答 1

0

It seems the function has a second argument which you are not using, you can assign it to underscore like this:

touchCallback: (pieTouchResponse, _) {
  setState(() {
    if (pieTouchResponse?.touchInput is FlLongPressEnd ||
        pieTouchResponse.touchInput is FlPanEnd) {
      touchedIndex = -1;
    } else {
      touchedIndex = pieTouchResponse.touchedSectionIndex;
    }
  });
},

And use the example as on the main github page:

https://github.com/imaNNeoFighT/fl_chart/blob/master/example/lib/pie_chart/samples/pie_chart_sample2.dart

于 2022-01-16T23:10:11.120 回答