Flutter实现随机流星粒子效果时遇BuildContext类型错误求助

错误根源 #

1. initState中过早使用context：initState生命周期阶段Widget尚未完成挂载，无法通过MediaQuery.of(context)正确获取屏幕尺寸，强制类型转换无效。
2. Particle类非法使用context：Particle是普通数据模型，没有持有BuildContext引用，代码中直接调用MediaQuery.of(context)属于错误引用，加上不必要的dart:js导入，导致类型混淆为JSObject。
3. 冗余的dart:js导入：非Web平台开发时，该导入会干扰Flutter的类型系统，引发类型不匹配错误。

修复方案 #

步骤1：移除冗余导入 #

删除代码顶部的import 'dart:js';。

步骤2：在State类中安全管理屏幕尺寸 #

通过didChangeDependencies方法获取屏幕尺寸（该方法在context完全可用时调用，比initState更安全），并初始化/更新粒子位置。

步骤3：修改Particle类，解除对context的依赖 #

将update方法改为接收屏幕宽高参数，不再直接依赖context。

步骤4：在绘制时更新粒子状态 #

在ParticlePainter的paint方法中传入屏幕尺寸，调用粒子的update方法，并触发State重绘保证界面刷新。

修复后的完整代码 #

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

void main() {
  runApp(const FallingStarsParticleSystem());
}

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

  @override
  _FallingStarsParticleSystemState createState() => _FallingStarsParticleSystemState();
}

class _FallingStarsParticleSystemState extends State<FallingStarsParticleSystem>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late List<Particle> _particles;
  late Size _screenSize;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _controller.repeat();
    // 临时初始化尺寸，后续通过didChangeDependencies更新
    _screenSize = const Size(300, 600);
    _particles = List.generate(
      100,
      (index) => Particle(
        x: Random().nextDouble() * _screenSize.width,
        y: 0.0,
        vx: Random().nextDouble() * 10.0,
        vy: -Random().nextDouble() * 100.0,
      ),
    );
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 安全获取屏幕尺寸
    _screenSize = MediaQuery.of(context).size;
    // 更新粒子初始位置适配真实屏幕
    setState(() {
      for (var particle in _particles) {
        particle.x = Random().nextDouble() * _screenSize.width;
      }
    });
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.black,
        child: GestureDetector(
          onPanUpdate: (details) {
            _controller.value += details.delta.dx / 100.0;
          },
          child: CustomPaint(
            painter: ParticlePainter(
              particles: _particles,
              time: _controller.value,
              screenSize: _screenSize,
              onUpdate: () => setState(() {}),
            ),
          ),
        ),
      ),
    );
  }
}

class Particle {
  double x;
  double y;
  double vx;
  double vy;

  Particle({
    required this.x,
    required this.y,
    required this.vx,
    required this.vy,
  });

  void update(double time, Size screenSize) {
    x += vx * time;
    y += vy * time;
    vy += 9.8 * time;

    if (y > screenSize.height) {
      x = Random().nextDouble() * screenSize.width;
      y = 0.0;
      vx = Random().nextDouble() * 10.0;
      vy = -Random().nextDouble() * 100.0;
    }
  }
}

class ParticlePainter extends CustomPainter {
  final List<Particle> particles;
  final double time;
  final Size screenSize;
  final VoidCallback onUpdate;

  ParticlePainter({
    required this.particles,
    required this.time,
    required this.screenSize,
    required this.onUpdate,
  });

  @override
  void paint(Canvas canvas, Size size) {
    for (Particle particle in particles) {
      particle.update(time, screenSize);
      paintParticle(canvas, particle);
    }
    onUpdate();
  }

  void paintParticle(Canvas canvas, Particle particle) {
    Paint paint = Paint()
      ..color = Colors.white
      ..style = PaintingStyle.fill;

    double radius = 3.0;
    canvas.drawCircle(Offset(particle.x, particle.y), radius, paint);
  }

  @override
  bool shouldRepaint(covariant ParticlePainter oldDelegate) {
    return oldDelegate.time != time || oldDelegate.particles != particles;
  }
}

额外优化说明 #

• 用didChangeDependencies替代initState获取屏幕尺寸，避免context未就绪的问题。
• 粒子类通过参数接收屏幕尺寸，符合单一职责原则，不再依赖外部上下文。
• 优化shouldRepaint逻辑，减少不必要的重绘，提升渲染性能。

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