关于Flame Engine集成到Flutter应用的两个技术问题咨询

问题1：Flame内变量同步到Flutter原生Widget #

你当前的问题根源是：int为值类型，你仅在初始化TestGame时给_firstCounter赋值了一次，后续Flame侧counter更新不会同步到这个变量，同时也没有触发Widget树重绘，所以Text组件不会刷新。
不需要用复杂的Stream/Future实现，更轻量的方案是用ValueNotifier：

1. Flame侧改造：将计数器改为ValueNotifier类型

// TestGame类内定义
ValueNotifier<int> counter = ValueNotifier(0);

@override
void onTap() async {
  counter.value++;
  print(counter.value);
  jump();
  _timer.start();
}

2. 主页面改造：用ValueListenableBuilder监听数值变化自动更新UI，不用手动管理状态刷新

Column(
   children: [
     const Text('show 1'),
     ValueListenableBuilder<int>(
       valueListenable: _testGame.counter,
       builder: (context, currentCount, child) {
         return Text(currentCount.toString());
       }
     )
   ],
)

如果你的同步场景更复杂（多数据、多事件），再考虑用Stream，在Game内定义StreamController，事件触发时往controller里塞数据，主页面用StreamBuilder监听即可。

问题2：Flame视图切换控制 #

直接在Game类内暴露公开的切换方法，主页面按钮点击时直接调用对应方法即可，步骤如下：

1. Flame侧预加载两套资源、定义切换方法

// TestGame类内预定义资源变量
Sprite? bg1;
Sprite? bg2;
SpriteAnimation? anim1;
SpriteAnimation? anim2;
Sprite? currentBg;
SpriteAnimation? currentAnim;

// 切换逻辑
void switchScene(int sceneId) {
  if(sceneId == 1) {
    currentBg = bg1;
    currentAnim = anim1;
  } else {
    currentBg = bg2;
    currentAnim = anim2;
  }
  // 重置动画播放状态
  currentAnim?.reset();
  currentAnim?.play();
}

// render方法内渲染currentBg和currentAnim即可

2. 主页面按钮绑定调用逻辑

// 底部按钮1的点击事件
onTap: () => _testGame.switchScene(1),
// 底部按钮2的点击事件
onTap: () => _testGame.switchScene(2),

如果担心Game还没加载完成就调用切换方法，可以在Game内用Completer标记加载完成状态，主页面调用前先判断是否加载完成即可。

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