Flutter中OutlinedButton选中状态下文本样式无法更新的问题求助

我现在在做一个表单选项组件，用OutlinedButton作为可点击选择的选项按钮，需求很明确：按钮被选中时要同时实现三个视觉变化：

• 描边线条变粗
• 按钮文本加粗
• 右侧显示一个小圆形选中指示器

目前前两个效果（描边加粗、圆形指示器）都已经顺利实现，但文本加粗这个效果死活不生效。我尝试在自定义ThemeData的outlinedButtonTheme里配置选中状态的textStyle，但完全没起作用——只有直接给Text组件手动设置style才能实现加粗，但这种写法感觉很不优雅，耦合性太高，总觉得哪里不对。

下面是我目前的代码，还有环境信息，麻烦大家帮我看看问题出在哪？

我的代码 #

自定义OutlinedButton组件

class OutlinedButtonChoice extends StatefulWidget {
  final bool isSelected;
  final void Function() onPressed;
  final String label;

  const OutlinedButtonChoice({
    super.key,
    required this.isSelected,
    required this.onPressed,
    required this.label,
  });

  @override
  State<OutlinedButtonChoice> createState() => _OutlinedButtonChoiceState();
}

class _OutlinedButtonChoiceState extends State<OutlinedButtonChoice> {
  late WidgetStatesController _statesController;

  @override
  void initState() {
    super.initState();
    _statesController = WidgetStatesController(<WidgetState>{
      if (widget.isSelected) WidgetState.selected,
    });
  }

  @override
  void dispose() {
    _statesController.dispose();
    super.dispose();
  }

  @override
  void didUpdateWidget(OutlinedButtonChoice oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.isSelected != oldWidget.isSelected) {
      _statesController.update(WidgetState.selected, widget.isSelected);
    }
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final baseStyle = theme.outlinedButtonTheme.style ?? OutlinedButton.styleFrom();
    final realStyle = baseStyle.copyWith(
      minimumSize: const WidgetStatePropertyAll(Size(0, 50)),
    );

    return OutlinedButton(
      onPressed: widget.onPressed,
      style: realStyle,
      statesController: _statesController,
      child: Row(
        spacing: 5.0,
        children: [
          Text(widget.label),
          if (widget.isSelected)
            Container(
              width: 8,
              height: 8,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: theme.primaryColor,
              ),
            ),
        ],
      ),
    );
  }
}

自定义ThemeData（截断部分）

final bodyLarge = GoogleFonts.roboto(fontSize: 22, fontWeight: FontWeight.w300);
final myThemeData = ThemeData(
  outlinedButtonTheme: OutlinedButtonThemeData(
    style: ButtonStyle(
      foregroundColor: WidgetStatePropertyAll(_brandColor),
      shape: WidgetStatePropertyAll(
        RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
      ),
      side: WidgetStateProperty.resolveWith<BorderSide>((states) {
        final width = states.contains(WidgetState.selected) ? 2.5 : 1.0;
        return BorderSide(width: width, color: _brandColor);
      }),
      textStyle: WidgetStateProperty.resolveWith<TextStyle?>((states) {
        if (states.contains(WidgetState.selected)) {
          return textTheme.bodyLarge?.copyWith(fontWeight: FontWeight.w800);
        }
        return textTheme.bodyLarge;
      }),
    ),
  ),
);

环境信息 #

• Flutter 3.32.4 • channel stable
• Dart 3.8.1
• 开发平台：MacOS

问题分析 & 解决方案 #

问题根源

你之所以设置的选中状态文本加粗不生效，核心原因是：你自定义的Text组件并没有关联到OutlinedButton的样式配置。

默认情况下，OutlinedButton的内置Text子组件会自动应用按钮style中定义的textStyle；但你这里为了添加圆形指示器，手动在child里写了Row和独立的Text——这个Text是完全独立的Widget，不会自动继承OutlinedButton的textStyle，所以你在Theme和按钮style里配置的任何文本样式，都不会作用到它身上。

解决方法

只需要在构建Text时，手动将OutlinedButton当前状态对应的textStyle应用到Text上即可。具体修改build方法中的代码：

@override
Widget build(BuildContext context) {
  final theme = Theme.of(context);
  final baseStyle = theme.outlinedButtonTheme.style ?? OutlinedButton.styleFrom();
  final realStyle = baseStyle.copyWith(
    minimumSize: const WidgetStatePropertyAll(Size(0, 50)),
  );

  // 获取当前按钮状态对应的TextStyle
  final currentTextStyle = realStyle.textStyle?.resolve(_statesController.value) 
      ?? theme.textTheme.bodyLarge!;

  return OutlinedButton(
    onPressed: widget.onPressed,
    style: realStyle,
    statesController: _statesController,
    child: Row(
      spacing: 5.0,
      children: [
        // 给Text应用按钮当前状态的TextStyle
        Text(
          widget.label,
          style: currentTextStyle,
        ),
        if (widget.isSelected)
          Container(
            width: 8,
            height: 8,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: theme.primaryColor,
            ),
          ),
      ],
    ),
  );
}

补充说明

• WidgetStateProperty.resolve()方法会根据当前的WidgetState集合（这里是_statesController.value），返回对应状态下的样式值，完美适配你用WidgetStatesController管理选中状态的逻辑。
• 这样修改后，你在Theme中配置的选中状态文本加粗（以及其他文本样式）就会自动作用到Text上，不需要给Text硬编码样式，保持了和Theme的一致性，也更符合Flutter的样式设计规范。

内容来源于stack exchange