Flutter 3.0.2/3.3.2版本页面切换时屏幕闪烁问题求助

即使是结构极简的Flutter应用，页面切换时也会出现屏幕闪烁现象。先后在Flutter 3.0.2版本测试，升级到3.3.2版本后问题依旧。此前搜索发现有用户集成AdMob时遇到类似问题，但本应用并未集成AdMob。

相关代码 #

main.dart

import 'package:flutter/material.dart';
import 'package:navigate3/page_1.dart';
import 'package:navigate3/page_2.dart';
import 'package:navigate3/page_3.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Main app',
      initialRoute: '/Page1',
      routes: {
        '/Page1': (context) => Page_1(),
        '/Page2': (context) => Page_2(),
        '/Page3': (context) => Page_3(),
      },
    );
  }
}

page_1.dart（page_2.dart、page_3.dart结构与其类似）

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/Page2');
                },
                child: const Text("Goto page 2"))
          ],
        ),
      ),
    ));
  }
}

可能的解决方向 #

• 先用release模式测试：debug模式下Flutter会有额外的渲染调试开销，执行flutter run --release看闪烁是否消失
• 自定义页面过渡动画：替换默认的过渡效果，比如改成淡入淡出，避免默认动画可能引发的闪烁。示例代码：

  // 替换Navigator.pushNamed为以下代码
  Navigator.push(
    context,
    PageRouteBuilder(
      transitionDuration: const Duration(milliseconds: 300),
      pageBuilder: (context, animation, secondaryAnimation) => const Page_2(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        return FadeTransition(
          opacity: CurvedAnimation(
            parent: animation,
            curve: Curves.easeInOut,
          ),
          child: child,
        );
      },
    ),
  );
  

• 检查设备性能：低端设备可能因硬件性能限制出现切换闪烁，换性能较好的设备测试对比
• 排查全局配置：确认MaterialApp没有开启不必要的调试选项，比如debugShowMaterialGrid等，或者尝试添加theme: ThemeData(visualDensity: VisualDensity.adaptivePlatformDensity)优化渲染

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