{"id":134,"date":"2021-12-05T00:00:00","date_gmt":"2021-12-05T04:00:00","guid":{"rendered":"https:\/\/gerardomiranda.dev\/blog\/?p=134"},"modified":"2021-12-05T11:39:27","modified_gmt":"2021-12-05T15:39:27","slug":"how-to-change-the-color-of-a-flutter-spinbox","status":"publish","type":"post","link":"https:\/\/gerardomiranda.dev\/blog\/how-to-change-the-color-of-a-flutter-spinbox\/","title":{"rendered":"How to change the color of a Flutter SpinBox"},"content":{"rendered":"\n

In a previous post <\/a> I discussed about my first contribution to open source, and even if it didn’t turn out precisely as I wanted, I learnt a lot. And now I’m going to explore the solution to the issue I tried to resolve.<\/p>\n\n\n\n

If you didn’t see my previous post, the issue was basically adding the option to apply the theme to the buttons of a spinbox <\/a>in Flutter, because the theme was only applied when the widget was focused. This issue was valid to the material widget only, not the cupertino one.<\/p>\n\n\n\n

The solution that was applied not only solves this particular problem, but also covers other scenarios. First using Material State Property<\/a>, and then using an Inherited Theme to complement this functionality, but I think I’m moving too fast. Let’s start preparing a simple app to test this.<\/p>\n\n\n\n

Preparing the app<\/h4>\n\n\n\n

Let’s execute flutter create in a CLI to generate our new Flutter app.<\/p>\n\n\n

flutter create flutter_spinbox_examples<\/code><\/span>Code language:<\/span> Bash<\/span> (<\/span>bash<\/span>)<\/span><\/small><\/pre>\n\n\n
Now let’s get rid of all the unnecessary stuff and create 3 spinbox widget that will be our test subjects.<\/p>\n\n\n
void<\/span> main() {\n<\/span><\/span>  runApp(const<\/span> MyApp());\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>class<\/span> MyApp<\/span> extends<\/span> StatelessWidget<\/span> <\/span>{\n<\/span><\/span>  const<\/span> MyApp({Key? key}) : super<\/span>(key: key);\n<\/span><\/span>\n<\/span><\/span>  \/\/ This widget is the root of your application.<\/span>\n<\/span><\/span>  @override<\/span>\n<\/span><\/span>  Widget build(BuildContext context) {\n<\/span><\/span>    return<\/span> MaterialApp(\n<\/span><\/span>      title: 'Flutter Demo'<\/span>,\n<\/span><\/span>      theme: ThemeData(\n<\/span><\/span>        primarySwatch: Colors.blue,\n<\/span><\/span>      ),\n<\/span><\/span>      home: const<\/span> MyHomePage(),\n<\/span><\/span>    );\n<\/span><\/span>  }\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>class<\/span> MyHomePage<\/span> extends<\/span> StatelessWidget<\/span><\/span>{\n<\/span><\/span>  const<\/span> MyHomePage({Key? key}) : super<\/span>(key: key);\n<\/span><\/span>\n<\/span><\/span>\n<\/span><\/span>  @override<\/span>\n<\/span><\/span>  Widget build(BuildContext context) {\n<\/span><\/span>    return<\/span> Scaffold(\n<\/span><\/span>      appBar: AppBar(\n<\/span><\/span>        title: const<\/span> Text('Flutter Spinbox Example'<\/span>),\n<\/span><\/span>      ),\n<\/span><\/span>      body: ListView(\n<\/span><\/span>        children: [\n<\/span><\/span>          SpinBox(\n<\/span><\/span>            value: 10<\/span>,\n<\/span><\/span>            decoration: const<\/span> InputDecoration(labelText: 'Control'<\/span>),\n<\/span><\/span>          ),\n<\/span><\/span>          SpinBox(\n<\/span><\/span>            value: 10<\/span>,\n<\/span><\/span>            decoration: const<\/span> InputDecoration(labelText: 'Material State Property'<\/span>),\n<\/span><\/span>          ),\n<\/span><\/span>          SpinBox(\n<\/span><\/span>            value: 10<\/span>,\n<\/span><\/span>            decoration: const<\/span> InputDecoration(labelText: 'Inherited Theme'<\/span>),\n<\/span><\/span>          ),\n<\/span><\/span>        ],\n<\/span><\/span>      ),\n<\/span><\/span>    );\n<\/span><\/span>  }\n<\/span><\/span>\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/p>\n\n\n\n
\"\"
Three spinbox widgets<\/figcaption><\/figure><\/div>\n\n\n\n
I think we can do better than that, let’s add some padding to the spinbox widgets.<\/p>\n\n\n
      body: ListView(\n<\/span><\/span>        children: [\n<\/span><\/span>          Padding(\n<\/span><\/span>            padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>            child: SpinBox(\n<\/span><\/span>              value: 10<\/span>,\n<\/span><\/span>              decoration: const<\/span> InputDecoration(labelText: 'Control'<\/span>),\n<\/span><\/span>            ),\n<\/span><\/span>          ),\n<\/span><\/span>          Padding(\n<\/span><\/span>            padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>            child: SpinBox(\n<\/span><\/span>              value: 10<\/span>,\n<\/span><\/span>              decoration: const<\/span> InputDecoration(labelText: 'Material State Property'<\/span>),\n<\/span><\/span>            ),\n<\/span><\/span>          ),\n<\/span><\/span>          Padding(\n<\/span><\/span>            padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>            child: SpinBox(\n<\/span><\/span>              value: 10<\/span>,\n<\/span><\/span>              decoration: const<\/span> InputDecoration(labelText: 'Inherited Theme'<\/span>),\n<\/span><\/span>            ),\n<\/span><\/span>          ),\n<\/span><\/span>        ],\n<\/span><\/span>      ),\n<\/span><\/span><\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"
Three spinbox widgets with padding<\/figcaption><\/figure><\/div>\n\n\n\n
That’s much better.<\/p>\n\n\n\n
We can see that while the spinbox is unfocused it is gray, as if it is disabled. In some cases this behavior is not a problem, but when we have several spinboxes we can have a better appearance if we match them with the theme, no matter the state of the widgets.<\/p>\n\n\n\n
Now let’s start with the tests.<\/p>\n\n\n\n
Material State Property<\/h4>\n\n\n\n
With Material State Property you can resolve attributes like the color of the widgets, using its method resolveWith.<\/p>\n\n\n\n
In MaterialState<\/a> you have the following states: disabled, dragged, error, focused, hovered, pressed, scrolledUnder and selected. In the cas of the Spinbox the state that it exposes are disabled, focused and error.<\/p>\n\n\n\n
We are going to resolve this 3 states in our second spinbox for the iconColor property.<\/p>\n\n\n
          Padding(\n<\/span><\/span>            padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>            child: SpinBox(\n<\/span><\/span>              value: 10<\/span>,\n<\/span><\/span>              decoration: const<\/span> InputDecoration(labelText: 'Material State Property'<\/span>),\n<\/span><\/span>              iconColor: MaterialStateProperty.resolveWith((states) {\n<\/span><\/span>                  if<\/span> (states.contains(MaterialState.disabled)) {\n<\/span><\/span>                    return<\/span> Colors.grey;\n<\/span><\/span>                  }\n<\/span><\/span>                  if<\/span> (states.contains(MaterialState.error)) {\n<\/span><\/span>                    return<\/span> Colors.red;\n<\/span><\/span>                  }\n<\/span><\/span>                  if<\/span> (states.contains(MaterialState.focused)) {\n<\/span><\/span>                    return<\/span> Colors.green;\n<\/span><\/span>                  }\n<\/span><\/span>                }\n<\/span><\/span>              ),\n<\/span><\/span>            ),\n<\/span><\/span>          ),\n<\/span><\/span><\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
But now the only thing that changed is that the button icons are now black. This is because in this moment the spinbox doesn’t have any state. If you tap on the spinbox the button icons are going to be green, but as soon as you change the focus the color goes back to black.<\/p>\n\n\n\n
What we need, is to resolve the color when the state is not between those 3 states that are exposed. So we are going to add a default color, returning Colors.blue after the if statements.<\/p>\n\n\n
return<\/span> Colors.blue;\n<\/span><\/span><\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
<\/p>\n\n\n\n
\"\"
Second spinbox with MaterialStateProperty<\/figcaption><\/figure><\/div>\n\n\n\n
Now the buttons icon color is going to be blue by default, until you tap on it, then it is going to be green.<\/p>\n\n\n\n
For the next option we are going to explore how to achieve the same thing, but for several spinbox at a time.<\/p>\n\n\n\n
Inherited Theme<\/h4>\n\n\n\n
Now that we know how to use MaterialStateProperty to change the color of our spinbox, if we have several spinboxes across our application we probably don’t want to repeat this code in every spinbox, so for that we have the SpinBoxTheme widget.<\/p>\n\n\n\n
SpinBoxTheme is an InheritedWidget, which means any data we define in this widget is going to be spread down the widget tree.<\/p>\n\n\n\n
To see SpinBoxTheme in action we need to add one more spinbox, so lets add it and wrap both with a Column widget.<\/p>\n\n\n
            Column(\n<\/span><\/span>              children: [\n<\/span><\/span>                Padding(\n<\/span><\/span>                  padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>                  child: SpinBox(\n<\/span><\/span>                    value: 10<\/span>,\n<\/span><\/span>                    decoration: const<\/span> InputDecoration(labelText: 'Inherited Theme 1'<\/span>),\n<\/span><\/span>                  ),\n<\/span><\/span>                ),\n<\/span><\/span>                Padding(\n<\/span><\/span>                  padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>                  child: SpinBox(\n<\/span><\/span>                    value: 10<\/span>,\n<\/span><\/span>                    decoration: const<\/span> InputDecoration(labelText: 'Inherited Theme 2'<\/span>),\n<\/span><\/span>                  ),\n<\/span><\/span>                ),\n<\/span><\/span>              ]\n<\/span><\/span>            )\n<\/span><\/span><\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
And now wrap the Column with a SpinBoxTheme, you will notice the data property is mandatory. This property is of the class SpinBoxThemeDate and the attribute we are going to define is iconColor. The same property we define in our previous example. Here we are going to define our MaterialStateProperty.<\/p>\n\n\n
            SpinBoxThemeData(\n              iconColor: MaterialStateProperty.resolveWith((states) {\n                return<\/span> Colors.red;\n              })\n            )<\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
Since we already covered the state in the previous section, we are going to keep it simple and return just the red color regardless of the state, now this is the final code for the SpinBoxTheme with both spinboxes within:<\/p>\n\n\n
          SpinBoxTheme(\n<\/span><\/span>            data: SpinBoxThemeData(\n<\/span><\/span>              iconColor: MaterialStateProperty.resolveWith((states) {\n<\/span><\/span>                return<\/span> Colors.red;\n<\/span><\/span>              })\n<\/span><\/span>            ),\n<\/span><\/span>            child: Column(\n<\/span><\/span>              children: [\n<\/span><\/span>                Padding(\n<\/span><\/span>                  padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>                  child: SpinBox(\n<\/span><\/span>                    value: 10<\/span>,\n<\/span><\/span>                    decoration: const<\/span> InputDecoration(labelText: 'Inherited Theme 1'<\/span>),\n<\/span><\/span>                  ),\n<\/span><\/span>                ),\n<\/span><\/span>                Padding(\n<\/span><\/span>                  padding: const<\/span> EdgeInsets.all(16.0<\/span>),\n<\/span><\/span>                  child: SpinBox(\n<\/span><\/span>                    value: 10<\/span>,\n<\/span><\/span>                    decoration: const<\/span> InputDecoration(labelText: 'Inherited Theme 2'<\/span>),\n<\/span><\/span>                  ),\n<\/span><\/span>                ),\n<\/span><\/span>              ]\n<\/span><\/span>            )\n<\/span><\/span>          ),\n<\/span><\/span><\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
\"\"
Third and fouth spinbox with SpinBoxTheme<\/figcaption><\/figure><\/div>\n\n\n\n
Precedence Order<\/h4>\n\n\n\n
As a final point, I wan to add that there is an precedence order in this methods to use them simultaneously in our app.<\/p>\n\n\n\n
  1. MaterialStateProperty in the SpinBox iconColor property.<\/li>
  2. MaterialStateProperty in the SpinBoxTheme, the closest one in the widget tree is taken.<\/li>
  3. Theme colors: This are only applied when the widget is focused.<\/li><\/ol>\n\n\n\n
    If you have several SpinBoxTheme widgets in the widget tree, the spinbox is going to resolve the closest one in the widget tree. For example you can have a SpinBoxTheme at the top of you entire application, and another one for only a group of spinboxes, the closest one is going to take precedence.<\/p>\n\n\n\n
    To test this you can wrap the MaterialApp widget with a SpinBoxTheme that returns the yellow color for all states and you will see that only the first spinbox is going to change to yellow.<\/p>\n\n\n\n
    And now if you remove the SpinBoxTheme that defines the red color, all spinboxes are going to be yellow except for the second one that has defined its iconColor property.<\/p>\n\n\n
    @override<\/span>\n<\/span><\/span>  Widget build(BuildContext context) {\n<\/span><\/span>    return<\/span> SpinBoxTheme(\n<\/span><\/span>      data: SpinBoxThemeData(\n<\/span><\/span>        iconColor: MaterialStateProperty.resolveWith((states) => Colors.yellow),\n<\/span><\/span>      ),\n<\/span><\/span>      child: MaterialApp(\n<\/span><\/span>        title: 'Flutter Demo'<\/span>,\n<\/span><\/span>        theme: ThemeData(\n<\/span><\/span>          primarySwatch: Colors.blue,\n<\/span><\/span>        ),\n<\/span><\/span>        home: const<\/span> MyHomePage(),\n<\/span><\/span>      ),\n<\/span><\/span>    );\n<\/span><\/span>  }\n<\/span><\/span><\/code><\/span>Code language:<\/span> Dart<\/span> (<\/span>dart<\/span>)<\/span><\/small><\/pre>\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Final words<\/h4>\n\n\n\n
    I hope you found this post useful. As always here <\/a>is the source code so you can explore it and test it yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"
    …covers other scenarios. First using Material State Property, and then using an Inherited Theme to complement this functionality<\/p>\n","protected":false},"author":1,"featured_media":216,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[24],"tags":[33],"class_list":["post-134","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-learning","tag-flutter"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":15,"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":217,"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/posts\/134\/revisions\/217"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/media\/216"}],"wp:attachment":[{"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gerardomiranda.dev\/blog\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}