首页 > 解决方案 > 如何在 Flutter 中自定义 numberpicker?

问题描述

我在我的应用程序中实现了 numberpicker。我想修改数字的大小以及突出显示的值和未突出显示的值的颜色。我设法修改了将其包装在主题小部件中的突出显示部分并修改了强调色,但不知道如何进行其他自定义?

Theme(
  data: Theme.of(context).copyWith(
    accentColor: Colors.red,
  ),
  child: NumberPicker.integer(
    initialValue: _currentPickerValue,
    minValue: 0,
    maxValue: 100,
    onChanged: (newValue) =>
      setState(() => _currentPickerValue = newValue))) 

标签: dartflutter

解决方案


我深入研究了代码,这是我发现的

  • selectedStyle = themeData.textTheme.headline.copyWith(color: themeData.accentColor);

  • defaultStyle = themeData.textTheme.body1; 这是未突出显示的

更改大小或颜色或任何其他样式属性修改这些样式。

这是一个示例代码:

final theme = Theme.of(context);
Theme(
      data: theme.copyWith(
        accentColor: Colors.black,// highlted color
          textTheme: theme.textTheme.copyWith(
            headline5: theme.textTheme.headline5.copyWith(..), //other highlighted style
            bodyText2: theme.textTheme.headline5.copyWith(...), //not highlighted styles
      )),
      child: NumberPicker.integer(...),
    ); 

推荐阅读