Flutter中如何通过home属性实现main.dart与首页的路由关联

你的思路是对的，通过MaterialApp的home属性指定HomeScreen就能完成初始页面的关联，但当前代码有两处问题需要修正：

1. 文件名与导入路径不匹配 #

你在main.dart里导入的是home_screen.dart，但实际页面文件名叫home_page.dart，这会导致编译器找不到HomeScreen类。你可以二选一修改：

• 把页面文件重命名为home_screen.dart；
• 或者将main.dart里的导入语句改为：import 'home_page.dart';

2. 修复main.dart的语法错误 #

你的main.dart存在两处语法问题，导致代码无法正常运行：

• home: const HomeScreen()后面多了一个多余的}；
• build方法的闭合括号位置错误，导致类结构不完整。

修正后的main.dart代码 #

import 'package:flutter/material.dart';
import 'home_screen.dart'; // 这里根据实际文件名调整

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(), // 补充逗号符合Dart语法规范
    );
  }
}

页面文件（以home_screen.dart为例） #

import 'package:flutter/material.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: const Center(child: Text('这是首页')),
    );
  }
}

完成以上修改后，运行应用就能看到HomeScreen作为初始页面加载，这样就完成了main.dart与HomeScreen的路由关联。

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