Flutter路由过渡异常：新页面初始透明后恢复非透明

可能的原因及解决方案 #

1. 目标页面未明确设置背景色

如果Planified组件的根Scaffold没有显式设置backgroundColor，可能会导致初始渲染时背景透明，直到组件完全加载。

修复方法：在Planified的Scaffold中明确指定不透明的背景色：

class Planified extends StatelessWidget {
  final YourFormType form;
  final YourElementType element;

  const Planified({super.key, required this.form, required this.element});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 使用主题默认背景色或固定颜色
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: // 页面内容
    );
  }
}

2. 页面初始化存在异步操作导致延迟渲染

如果Planified是StatefulWidget，且在initState中有异步加载逻辑，初始build时可能因为未完成加载而没有渲染背景。

修复方法：在加载状态下也保持背景色一致：

class Planified extends StatefulWidget {
  final YourFormType form;
  final YourElementType element;

  const Planified({super.key, required this.form, required this.element});

  @override
  State<Planified> createState() => _PlanifiedState();
}

class _PlanifiedState extends State<Planified> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    // 异步加载逻辑
    await someAsyncOperation();
    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: _isLoading
          ? Container(
              color: Theme.of(context).scaffoldBackgroundColor,
              child: const Center(child: CircularProgressIndicator()),
            )
          : // 实际页面内容
    );
  }
}

3. 自定义页面过渡导致透明效果

如果使用了自定义的PageRoute过渡动画，可能在过渡初期设置了透明效果。检查你的路由过渡代码，确保新页面的背景在过渡开始时就处于不透明状态。

4. 主题背景色设置异常

检查全局ThemeData中的scaffoldBackgroundColor是否被设置为透明：

MaterialApp(
  theme: ThemeData(
    scaffoldBackgroundColor: Colors.white, // 确保是不透明颜色
  ),
)

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