Flutter中如何修改NumberPicker组件的文本颜色？

• 直接通过组件参数设置
  该组件自带textStyle和selectedTextStyle参数，分别控制未选中项和选中项的文本样式，直接指定颜色即可：

  NumberPicker(
    value: _currentValue,
    minValue: 0,
    maxValue: 100,
    // 未选中项的文本颜色
    textStyle: TextStyle(color: Colors.grey[600]),
    // 选中项的高亮文本颜色
    selectedTextStyle: TextStyle(color: Colors.deepOrange, fontSize: 22),
    onChanged: (value) => setState(() => _currentValue = value),
  )
  

• 全局主题统一配置
  如果需要在整个应用中统一调整NumberPicker的文本样式，可以通过ThemeData全局配置：

  MaterialApp(
    theme: ThemeData(
      // 调整全局primary色值，部分版本的NumberPicker会用它作为选中项颜色
      colorScheme: ColorScheme.fromSwatch().copyWith(primary: Colors.teal),
      // 或者直接覆盖组件默认使用的文本主题样式
      textTheme: TextTheme(
        bodyLarge: TextStyle(color: Colors.blueGrey),
      ),
    ),
    home: YourHomeScreen(),
  )
  

• 自定义组件封装（进阶）
  要是不想在每个使用的地方重复写样式，可以封装一个预设好样式的自定义NumberPicker：

  class CustomNumberPicker extends StatelessWidget {
    final int value;
    final int minValue;
    final int maxValue;
    final ValueChanged<int> onChanged;
  
    const CustomNumberPicker({
      super.key,
      required this.value,
      required this.minValue,
      required this.maxValue,
      required this.onChanged,
    });
  
    @override
    Widget build(BuildContext context) {
      return NumberPicker(
        value: value,
        minValue: minValue,
        maxValue: maxValue,
        textStyle: TextStyle(color: Colors.black54),
        selectedTextStyle: TextStyle(color: Colors.indigo, fontWeight: FontWeight.bold),
        onChanged: onChanged,
      );
    }
  }
  

注意：不同版本的numberpicker组件参数可能略有差异，建议查看当前依赖版本的组件源码确认参数是否可用。

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