Flutter集成Agora SDK后本地视图黑屏，热重启后才恢复如何解决？

问题根因 #

• 本地视图渲染时机早于引擎初始化：initAgora为异步执行逻辑，首次启动页面时build方法会先执行，此时Agora引擎还未完成初始化、视频模块未启用，本地视图没有可渲染的数据源导致黑屏；热重启时引擎已完成初始化加载，所以本地视图可以正常展示。
• 缺少本地预览触发调用：代码仅调用enableVideo()开启了视频模块，没有主动调用startPreview()触发本地摄像头画面的预览渲染。

修复方案 #

1. 新增引擎初始化完成的状态标记，仅在引擎初始化完成后再渲染本地视图
2. 开启视频模块后新增startPreview()调用，主动触发本地预览
3. 所有异步初始化逻辑完成后调用setState触发页面重绘

修改后完整代码 #

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';

import 'package:agora_rtc_engine/rtc_engine.dart';
import 'package:agora_rtc_engine/rtc_local_view.dart' as RtcLocalView;
import 'package:agora_rtc_engine/rtc_remote_view.dart' as RtcRemoteView;

const appId = "e660ebb529e34d838fedc01ed1a1b5e4";
const token =
    "006e660ebb529e34d838fedc01ed1a1b5e4IABB69OL6buUPHAgM4dq+hpsHKMLCooStMhXyvSdauF2eNzDPrsAAAAAEADHF4BY49MwYQEAAQDi0zBh";

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  int _remoteUid;
  RtcEngine _engine;
  // 新增引擎初始化完成状态标记
  bool _isEngineReady = false;

  @override
  void initState() {
    super.initState();
    initAgora();
  }

  Future initAgora() async {
    // 申请权限
    await [Permission.microphone, Permission.camera].request();

    // 创建引擎
    _engine = await RtcEngine.create(appId);
    await _engine.enableVideo();
    // 新增启动本地预览调用
    await _engine.startPreview();
    _engine.setEventHandler(
      RtcEngineEventHandler(
        joinChannelSuccess: (String channel, int uid, int elapsed) {
          print("本地用户 $uid 加入频道");
        },
        userJoined: (int uid, int elapsed) {
          print("远端用户 $uid 加入频道");
          setState(() {
            _remoteUid = uid;
          });
        },
        userOffline: (int uid, UserOfflineReason reason) {
          print("远端用户 $uid 离开频道");
          setState(() {
            _remoteUid = null;
          });
        },
      ),
    );

    await _engine.joinChannel(token, "firstchannel", null, 0);
    // 初始化完成后更新状态，触发重绘
    setState(() {
      _isEngineReady = true;
    });
  }

  // 构建本地视图和远端视图UI
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Agora视频通话'),
      ),
      body: Stack(
        children: [
          Center(
            child: _remoteVideo(),
          ),
          Align(
            alignment: Alignment.topLeft,
            child: Container(
              width: 100,
              height: 100,
              child: Center(
                // 仅在引擎初始化完成后渲染本地视图
                child: _isEngineReady ? RtcLocalView.SurfaceView() : const CircularProgressIndicator(),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 展示远端用户视频
  Widget _remoteVideo() {
    if (_remoteUid != null) {
      return RtcRemoteView.SurfaceView(uid: _remoteUid);
    } else {
      return const Text(
        '请等待远端用户加入',
        textAlign: TextAlign.center,
      );
    }
  }
}

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