Flutter导航抽屉点击无法跳转至PlanJourneyScreen问题求助

问题描述 #

我正在开发一款公交应用以学习Flutter和Dart语言，当前遇到导航抽屉点击后无法跳转到指定的PlanJourneyScreen页面的问题，页面始终停留在原界面。

主页面代码 #

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  State<StatefulWidget> createState() {
    return MainScreen();
  }
}

class MainScreen extends State<MyApp> {
  final currentTime = DateTime.now();
  final busStopController = TextEditingController();

  //To customise the greeting according to the time
  String greeting() {
    var hour = DateTime.now().hour;
    if (hour < 12) {
      return 'Morning';
    }
    if (hour < 17) {
      return 'Afternoon';
    }
    return 'Evening';
  }

  //Strings for user input and busStop
  String name = '';
  String busStop = '';

  //Strings for different bus timings
  String sb1timing = '';
  String sb2timing = '';
  String sb3timing = '';
  String sb4timing = '';

  //Different icon colors for bus capacity
  final Color _iconColorEmpty = Colors.green;
  final Color _iconColorHalf = Colors.orange;
  final Color _iconColorFull = Colors.red;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.transparent,
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.black45,
                ),
                child: Text(
                  'WaitLah! bus services',
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                      fontSize: 20),
                ),
              ),
              ListTile(
                leading: const Icon(
                  Icons.directions_walk_outlined,
                  color: Colors.black,
                ),
                title: const Text(
                  'Plan Your Journey',
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                ),
                onTap: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => PlanJourneyScreen()));
                },
              ),

PlanJourneyScreen页面代码 #

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

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        const Backgroundimage(),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0.0,
            backgroundColor: Colors.transparent,
            centerTitle: true,
            title: Text(
              'Plan Your Journey s10194266d',
              style: GoogleFonts.kalam(
                  textStyle: const TextStyle(
                      fontSize: 24, fontWeight: FontWeight.bold)),
            ),
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const SizedBox(
                height: 30,
              ),
              Text(
                'Please state your source and destination.',
                textAlign: TextAlign.center,
                style: GoogleFonts.montserrat(
                    textStyle: const TextStyle(
                        fontSize: 17,
                        color: Colors.white,
                        fontWeight: FontWeight.bold)),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
                child: Text(
                  'Source',
                  textAlign: TextAlign.left,
                  style: GoogleFonts.montserrat(
                    textStyle: const TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                ),
              ),
              TextField(
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(10.0)),
                ),
              ),
              Padding(
                padding: const EdgeInsets.fromLTRB(20, 30, 10, 10),
                child: Text(
                  'Destination',
                  style: GoogleFonts.montserrat(
                    textStyle: const TextStyle(
                        fontSize: 15,
                        fontWeight: FontWeight.bold,
                        color: Colors.white),
                  ),
                ),
              ),
              TextField(
                style: const TextStyle(color: Colors.white),
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                      borderSide: const BorderSide(color: Colors.white),
                      borderRadius: BorderRadius.circular(10.0)),
                ),
                onTap: () {},
              ),
              Container(
                padding: const EdgeInsets.fromLTRB(0, 30, 0, 0),
                child: ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      primary: Colors.white54,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(32.0)),
                      minimumSize: Size(90, 40)),
                  onPressed: () {},
                  child: Text(
                    'Calculate!',
                    style: GoogleFonts.montserrat(
                      textStyle: const TextStyle(
                          fontSize: 16, fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ),
              Container()
            ],
          ),
        ),
      ],
    );
  }
}

解决方案 #

问题核心是**MaterialApp的位置错误**：你在MainScreen的build方法中返回MaterialApp，导致导航使用的context不属于正确的导航树。MaterialApp是应用的根组件，应该仅在MyApp的build方法中作为根返回，而非在State类内部。

修改后的代码结构如下：

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MainScreen(),
    );
  }
}

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

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  // 保留原有的成员变量和方法
  final currentTime = DateTime.now();
  final busStopController = TextEditingController();

  String greeting() {
    var hour = DateTime.now().hour;
    if (hour < 12) {
      return 'Morning';
    }
    if (hour < 17) {
      return 'Afternoon';
    }
    return 'Evening';
  }

  String name = '';
  String busStop = '';

  String sb1timing = '';
  String sb2timing = '';
  String sb3timing = '';
  String sb4timing = '';

  final Color _iconColorEmpty = Colors.green;
  final Color _iconColorHalf = Colors.orange;
  final Color _iconColorFull = Colors.red;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.black45,
              ),
              child: Text(
                'WaitLah! bus services',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 20),
              ),
            ),
            ListTile(
              leading: const Icon(
                Icons.directions_walk_outlined,
                color: Colors.black,
              ),
              title: const Text(
                'Plan Your Journey',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
              ),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => const PlanJourneyScreen()));
              },
            ),
            // 补充剩余的抽屉列表项和Scaffold内容
          ],
        ),
      ),
      // 原Scaffold的body等内容
    );
  }
}

额外检查 #

1. 确保PlanJourneyScreen类已经正确导入到主页面文件中，没有导入错误。
2. 确认Backgroundimage组件已正确定义，避免因该组件异常导致页面无法加载。

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