解决Flutter中Chromecast按钮重复创建的加载屏闪烁问题

核心原因 #

控件隐藏/显示时，Chromecast相关组件被重复初始化，导致按钮重复渲染、会话重新建立，进而触发加载屏闪现。下面是针对性的解决方法：

具体方案 #

1. 持久化CastSession与上下文 #

把Chromecast的初始化逻辑放到initState中，确保只执行一次，避免随控件重建重复初始化：

class VideoPlayerPage extends StatefulWidget {
  @override
  _VideoPlayerPageState createState() => _VideoPlayerPageState();
}

class _VideoPlayerPageState extends State<VideoPlayerPage> {
  late BetterPlayerController _betterPlayerController;
  CastSession? _castSession;
  late CastContext _castContext;

  @override
  void initState() {
    super.initState();
    _initCastContext();
    _initBetterPlayer();
  }

  void _initCastContext() async {
    _castContext = await CastContext.getInstance();
    // 监听会话变化，只用状态更新而非重建组件
    _castContext.sessionStream.listen((session) {
      setState(() => _castSession = session);
    });
  }

  void _initBetterPlayer() {
    final config = BetterPlayerConfiguration(
      controlsConfiguration: BetterPlayerControlsConfiguration(
        customControls: _buildCustomControls(),
      ),
    );
    _betterPlayerController = BetterPlayerController(config);
  }

  // 自定义控件，CastButton只构建一次
  Widget _buildCustomControls() {
    return BetterPlayerMaterialControls(
      additionalButtons: [
        CastButton(
          size: 24,
          color: Colors.white,
          onSessionStarted: (session) {
            // 处理会话开始逻辑
          },
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: BetterPlayer(controller: _betterPlayerController));
  }
}

2. 阻止控件重建时销毁组件 #

给页面状态混入AutomaticKeepAliveClientMixin，保持Chromecast组件的状态，避免隐藏后重建：

class _VideoPlayerPageState extends State<VideoPlayerPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  // 其余代码同上
}

3. 替换默认加载动画 #

如果加载屏是CastButton自带的，自定义builder替换默认的加载状态：

CastButton(
  builder: (context, state, session) {
    if (state == CastState.connected) {
      return const Icon(Icons.cast_connected, color: Colors.white);
    }
    // 直接显示普通图标，跳过加载动画
    return const Icon(Icons.cast, color: Colors.white);
  },
)

4. 优化BetterPlayer控件逻辑 #

将自定义控件封装为独立的StatefulWidget并混入AutomaticKeepAliveClientMixin，避免随BetterPlayer控件的显示/隐藏重复构建。

关键注意事项 #

• CastContext.getInstance()只调用一次，禁止在build方法中执行异步初始化
• 所有Chromecast相关状态更新通过setState实现，不要重新创建组件
• 避免在控件显示/隐藏的回调中重新初始化CastSession

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