如何从Flutter Flame Engine游戏widget跳转至外部其他Flutter widget

可以实现从Flame GameWidget跳转至其他Flutter Widget，你当前代码无法直接导航的核心原因是根节点没有使用MaterialApp/CupertinoApp，缺少导航所需的Navigator上下文，按以下步骤修改即可：

步骤1：修改main.dart结构，补全导航上下文 #

调整根组件结构，引入MaterialApp提供导航能力，你可以直接传上下文给Game实例，也可以配置命名路由统一管理跳转：

import 'package:flame/flame.dart';
import 'package:flame/game.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'my_game.dart';
// 导入你要跳转的目标页面
import 'target_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GameWidget(
          game: MyGame(context: context),
        ),
      ),
      // 可选配置命名路由
      routes: {
        '/target': (context) => TargetPage(),
      },
    );
  }
}

步骤2：修改my_game.dart，调用导航API #

给MyGame类新增上下文接收属性，在需要触发跳转的位置直接调用Flutter导航方法即可：

import 'package:flame/extensions.dart';
import 'package:flame/game.dart';
import 'package:flame/gestures.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class MyGame extends BaseGame with TapDetector {
    // 新增上下文属性和构造方法
    final BuildContext context;
    MyGame({required this.context});

    @override
    void update(double dt) { /* TODO */ }

    @override
    void render(Canvas canvas) { /* TODO */ }

    @override
    void onTapUp(TapUpDetails details) {
        // 跳转命名路由
        Navigator.pushNamed(context, '/target');
        // 也可以直接构造页面跳转
        // Navigator.push(context, MaterialPageRoute(builder: (context) => TargetPage()));
    }
}

可选解耦方案：使用回调函数 #

如果不想让Game类依赖Flutter的BuildContext，降低耦合方便后续跨端移植，可以用回调实现跳转：

调整my_game.dart代码 #

class MyGame extends BaseGame with TapDetector {
    // 定义跳转回调
    final VoidCallback onNavigate;
    MyGame({required this.onNavigate});

    @override
    void onTapUp(TapUpDetails details) {
        // 触发跳转回调
        onNavigate();
    }
}

调整main.dart初始化逻辑 #

GameWidget(
  game: MyGame(
    onNavigate: () {
      Navigator.pushNamed(context, '/target');
    },
  ),
)

版本适配说明 #

你当前使用的flame-1.0.0-rc8、Flutter2.2.3版本完全兼容上述逻辑，无需额外调整API，如果后续升级到flame正式版，仅需要把BaseGame替换为FlameGame即可。

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