Flutter点击RaisedButton无法跳转至目标页面问题求助

存在的问题 #

• 上下文不匹配：你调用Navigator.push时使用的context属于MyApp组件，该上下文位于MaterialApp的上层，不存在Navigator实例，所以跳转逻辑无法生效。
• 类名拼写错误：导入的页面类为PersonalLog，代码中误写为PersonalOg，会直接触发编译报错。
• 废弃组件使用：RaisedButton已在新版本Flutter中被废弃，建议替换为ElevatedButton避免版本兼容警告。

修复方法 #

核心逻辑是让调用Navigator.push的上下文位于MaterialApp的子树中，最推荐的方案是将主页逻辑抽离为单独的组件，修复后的完整代码如下：

import 'package:flutter/material.dart';
import 'package:relationship/screens/form_screen.dart';
import 'package:relationship/screens/personal_log.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const PersonalLog()));
              },
              child: const Text("Personal Log"),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => const FormClass()));
              },
              child: const Text("Lover Log"),
            )
          ],
        ),
      ),
    );
  }
}

如果你不想单独抽离主页组件，也可以用Builder组件包裹Scaffold，为按钮提供MaterialApp下层的有效上下文，也能解决跳转失效问题。

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