Flutter中导航至Stateful Widget报错，如何解决该问题？

报错的核心是：你把State2定义成了State子类，但在路由跳转时直接返回了State2()——而State类并不是Widget类型，不符合路由builder的返回要求。

Flutter的StatefulWidget必须遵循Widget类+对应State类的结构：

• 一个继承StatefulWidget的类，负责作为Widget被引用和初始化
• 一个继承State<Widget类>的类，负责管理状态和构建UI

修正后的完整代码 #

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp (
    const MaterialApp(
      home: MyFlutterApp()
    ),
  );
}

class MyFlutterApp extends StatefulWidget {
  const MyFlutterApp({Key? key}) : super(key: key);

  @override
  State<MyFlutterApp> createState() {
    return State1();
  }
}

class State1 extends State<MyFlutterApp>{

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
          onTap: () {
            Navigator.of(context).push(CupertinoPageRoute(builder: (context) => State2()));
          },
          child: const Text("State1")
          )
      );
  }
}

// 定义State2为StatefulWidget类
class State2 extends StatefulWidget {
  const State2({Key? key}) : super(key: key);

  @override
  State<State2> createState() => _State2State();
}

// 对应State2的状态管理类
class _State2State extends State<State2> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: const Text("State2"),
        onTap: () {
          Navigator.pop(context);
        }
      )
    );
  }
}

关键修改点 #

1. 新增State2类继承StatefulWidget，实现createState方法返回对应的状态类实例
2. 将原State2类重命名为_State2State（下划线标记私有，符合Dart规范），并让它继承State<State2>
3. 路由跳转时返回State2()（Widget实例），而非原State类实例

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