Flutter新手咨询：新页面应新建.dart文件还是复用原页面？求代码指导

结论：必须新建单独的.dart文件 #

绝对不要把新页面的代码写在首页文件里，原因很直接：

• 代码结构清晰，后期改需求、查bug时不用在臃肿的首页文件里来回翻找
• 页面组件可复用，后续其他页面要跳转过来时直接调用即可
• 符合Flutter模块化开发的规范，团队协作时其他人能快速理解你的代码结构

新建页面文件的基本代码示例 #

比如新建一个NextPage.dart（和你说的settingpage.dart逻辑一致），基础代码结构如下：

import 'package:flutter/material.dart';

// 页面不需要状态管理时，用StatelessWidget
class NextPage extends StatelessWidget {
  const NextPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('新页面'),
        // Flutter默认会自动生成返回按钮，不用额外写
      ),
      body: const Center(
        child: Text('这里放你的新页面内容'),
      ),
    );
  }
}

// 如果页面需要状态（比如有输入框、点击按钮要更新UI），用StatefulWidget
// class NextPage extends StatefulWidget {
//   const NextPage({super.key});
//
//   @override
//   State<NextPage> createState() => _NextPageState();
// }
//
// class _NextPageState extends State<NextPage> {
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(title: const Text('新页面')),
//       body: const Center(child: Text('带状态的新页面')),
//     );
//   }
// }

修改首页的导航代码 #

先在首页文件里导入新建的页面：

import 'NextPage.dart'; // 路径要正确，同文件夹直接写文件名，不同文件夹写相对路径

然后修改你原来的GestureDetector代码，补上导航逻辑：

GestureDetector(
  onLongPress: () => Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const NextPage()),
  ),
  child: const Image(
    height: 110,
    width: 110,
    image: AssetImage("lib/images/start-png.png"),
  ),
)

额外小提醒 #

• 页面文件名尽量用大驼峰命名（比如NextPage.dart），符合Dart的命名规范
• 如果后续页面增多，可以建个pages/文件夹统一存放所有页面文件，结构会更整洁

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