Flutter中如何在initState里使用Context的ColorScheme？方案与弊端探讨

全局存储ColorScheme的弊端 #

直接在应用启动时将ColorScheme存入全局状态，会带来以下问题：

• 丢失主题动态更新能力：当用户切换明暗模式或自定义主题时，全局存储的ColorScheme不会自动同步更新，导致UI显示与当前主题不一致。
• 降低组件复用性：组件依赖全局状态中的ColorScheme，脱离该全局环境后无法正常工作，破坏了组件的独立性。
• 无法感知局部主题变化：Flutter允许通过嵌套Theme组件为子树设置局部主题，全局存储的ColorScheme只能获取根主题，无法识别局部主题的修改。
• 生命周期不一致风险：全局状态的生命周期与组件完全独立，可能出现组件已销毁但全局状态仍持有旧值，或全局状态更新时组件无法及时感知的情况。

更优解决方法 #

方法1：拆分依赖Context的子组件 #

将需要访问Theme的部分拆分为独立的StatelessWidget，父组件在initState中创建该子组件实例，子组件在自身的build方法中获取context。这种方式既避免了initState中调用Theme.of(context)的报错，又能让父组件的build保持轻量化，同时子组件能自动响应主题变化。

示例代码：

import 'package:flutter/material.dart';

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

  @override
  State<StatefulWidget> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  late final Widget _body;

  @override
  void initState() {
    _body = _MyText();
  }

  @override
  Widget build(BuildContext context) => _body;
}

class _MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Hi',
      style: TextStyle(color: Theme.of(context).colorScheme.primary),
    );
  }
}

方法2：使用didChangeDependencies生命周期 #

didChangeDependencies会在initState之后执行，且当组件依赖的InheritedWidget（如Theme）发生变化时会被重新调用。可以在这里构建依赖Theme的组件，既能避免initState的上下文问题，又能响应主题更新。

示例代码：

import 'package:flutter/material.dart';

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

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  late Widget _body;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 主题变化时自动重新构建
    _body = Text(
      'Hi',
      style: TextStyle(color: Theme.of(context).colorScheme.primary),
    );
  }

  @override
  Widget build(BuildContext context) => _body;
}

如果是高开销组件，可以添加判断逻辑，仅当主题实际变化时才重新构建，避免不必要的性能损耗。

错误示例说明 #

直接在initState中调用Theme.of(context)会抛出异常，因为此时组件还未完全挂载，无法访问InheritedWidget的依赖：

dependOnInheritedWidgetOfExactType<_InheritedTheme>() or dependOnInheritedElement() was called before _ExampleState.initState() completed.

错误代码示例：

import 'package:flutter/material.dart';

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

  @override
  State<StatefulWidget> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  late final Widget _body;

  @override
  void initState() {
    _body = Text(
      'Hi',
      style: TextStyle(color: Theme.of(context).colorScheme.primary),
    );
  }

  @override
  Widget build(BuildContext context) => _body;
}

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