Flutter报错求助：'_PlayerAppState'未定义'WaveBasePainter'方法

我跟着YouTube上的Flutter音乐播放器速通教程制作项目，在视频2分42秒的步骤后，出现报错：

The method 'WaveBasePainter' isn't defined for the type '_PlayerAppState'

教程中无报错，但我的代码出现该问题，以下是我的代码及报错截图：

main.dart代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PlayerApp(),
    ),
  );
}

class PlayerApp extends StatefulWidget {
  const PlayerApp({super.key});

  @override
  State<PlayerApp> createState() => _PlayerAppState();
}

class _PlayerAppState extends State<PlayerApp> {
  @override
  Widget build(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Positioned(
            height: height,
            width: width,
            child: Material(
              elevation: 16,
              color: const Color(0xFFd6dde5), //Background Color
              borderRadius: BorderRadius.circular(20),
              child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 30.0,
                ),
                child: Column(
                  children: <Widget>[
                    const SizedBox(
                      height: 90,
                    ),
                    const Text(
                      'Music title',
                    ),
                    const SizedBox(
                      height: 15,
                    ),
                    const Text(
                      'Music artist',
                    ),
                    const SizedBox(
                      height: 75,
                    ),
                    buildRecordPlayer(),
                    const SizedBox(
                      height: 60,
                    ),
                    Row(
                      children: <Widget>[
                        const Text('time'),
                        const SizedBox(
                          width: 8,
                        ),
                        buildWave(),
                        const SizedBox(
                          width: 8,
                        ),
                        const Text('end'),
                      ],
                    )
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget buildRecordPlayer() {
    return Container(
      height: 190,
      width: 190,
      alignment: Alignment.center,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/images/vinyl.png'),
          fit: BoxFit.fitHeight,
          colorFilter: ColorFilter.mode(
            Colors.blue,
            BlendMode.color,
          ),
        ),
        shape: BoxShape.circle,
      ),
      child: ClipOval(
        child: Image.asset(
          'assets/images/SL.png',
          height: 150,
          width: 150,
          fit: BoxFit.fill,
        ),
      ),
    );
  }

  Widget buildWave() {
    return SizedBox(
      width: 260,
      height: 40,
      child: CustomPaint(
        painter: WaveBasePainter(),
      ),
    );
  }
}

wave_base_painter.dart代码 #

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

class WaveBasePainter extends CustomPainter {
  Paint? _paint; //4:03
  @override
  void paint(Canvas canvas, Size size) {
    _paint = Paint()
      ..color = Colors.grey.withOpacity(0.3)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.5;

    canvas.translate(0, size.height / 2);
    canvas.scale(1, -1);

    for (int i = 0; i < size.width.toInt(); i++) {
      double x = i.toDouble();
      double r = 2 * sin(i) - 2 * cos(4 * i) + sin(2 * i - pi * 24);
      r = r * 5;
      canvas.drawLine(Offset(x, r), Offset(x, -r), _paint!);
    }
    @override
    bool shouldRepaint(WaveBasePainter oldDelegate) => false;
  }
}

报错截图 #

问题原因及解决方法 #

原因1：main.dart未导入wave_base_painter.dart

编译器无法找到WaveBasePainter类，因为你没有在main.dart中导入对应的文件。

解决：
在main.dart顶部添加导入语句（如果两个文件在同一目录下）：

import 'package:flutter/material.dart';
import 'wave_base_painter.dart'; // 新增这行

原因2：wave_base_painter.dart代码结构错误

shouldRepaint方法被错误嵌套在paint方法内部，导致WaveBasePainter类没有正确实现CustomPainter接口的所有必要方法，类无法被正常识别。

解决：
将shouldRepaint方法移到paint方法外部，与paint同级，修改后的wave_base_painter.dart代码如下：

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

class WaveBasePainter extends CustomPainter {
  Paint? _paint;
  @override
  void paint(Canvas canvas, Size size) {
    _paint = Paint()
      ..color = Colors.grey.withOpacity(0.3)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.5;

    canvas.translate(0, size.height / 2);
    canvas.scale(1, -1);

    for (int i = 0; i < size.width.toInt(); i++) {
      double x = i.toDouble();
      double r = 2 * sin(i) - 2 * cos(4 * i) + sin(2 * i - pi * 24);
      r = r * 5;
      canvas.drawLine(Offset(x, r), Offset(x, -r), _paint!);
    }
  }

  @override
  bool shouldRepaint(WaveBasePainter oldDelegate) => false;
}

完成以上两步修改后，报错即可解决。

内容的提问来源于stack exchange，提问作者loupdaniel