Flutter导航至新页面时背景变黑问题求助

问题根源分析 #

跳转后背景变黑、文本出现黄色下划线的问题，核心原因有两点：

1. 目标页面AnnouncementsPage未用Scaffold作为根组件，导致全局主题的背景色无法生效，默认显示Material深色背景；
2. 导航代码里冗余的setState可能引发不必要的页面重绘，加剧过渡期间的视觉异常。

解决方案步骤 #

1. 正确配置全局主题

在MaterialApp中添加完整主题配置，让背景色能被所有使用Scaffold的页面继承：

void main() {
  initializeDateFormatting('tr_TR', null).then((_) {
    runApp(MyApp());
  });
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        "/home": (context) => HomePage(),
        "/": (context) => LoginPage(),
        "/welcome": (context) => WelcomePage(),
        "/calendar": (context) => CalendarPage(),
        "/announcements": (context) => AnnouncementsPage(),
      },
      initialRoute: "/home",
      debugShowCheckedModeBanner: false,
      // 配置全局主题
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white, // 替换为你需要的背景色
        textTheme: const TextTheme(
          bodyLarge: TextStyle(decoration: TextDecoration.none), // 移除默认文本下划线
        ),
      ),
    );
  }
}

2. 移除导航代码中的冗余操作

Navigator操作不需要更新当前页面状态，删掉多余的setState：

InkWell(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => AnnouncementsPage(),
      ),
    );
  },
  child: AppText(
    text: "More",
    context: context,
    fontWeight: FontWeight.bold,
    fontSize: responsive.screenWidth / 25.71,
    color: AppColors.darkMagenta,
    fontFamily: 'Poppins',
  ),
),

3. 确保目标页面使用Scaffold

AnnouncementsPage必须以Scaffold作为根组件，才能继承全局主题的背景色：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 若需单独设置该页面背景，可覆盖此属性
      // backgroundColor: Colors.grey[100],
      appBar: AppBar(title: const Text("公告")),
      body: // 你的页面内容组件
    );
  }
}

额外说明 #

文本的黄色下划线是Material默认文本样式的装饰效果，除了全局配置移除，也可以在AppText组件内部单独控制decoration属性。

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