20

In Android Studio, we have color picker when developing in Java/Kotlin (natively) like this.

enter image description here

But while developing for Flutter, I can't see any options to pick my own color. Is there some plugin required to do that?

  • Added this as an bug/feature-request for the Flutter IntelliJ Dev. Team, you can track it here: https://github.com/flutter/flutter-intellij/issues/3448 . Please add likes or comments to show that we want this feature. =) – Haroun Hajem May 03 '19 at 08:56

2 Answers2

25

The color picker is not clickable in Android Studio running Flutter( Dart code), see picture below. But i found a work around using the Color class and manually opening color picker. Then pick a color and copy/paste it like this:

Color class

Here is how i do it:

1. Double tap shift to run search

Search icon

2. Type Color or Picker Search list

3. Open Color Picker from the search list

Color Picker

4. Copy/paste the HEX color code into your color class.

Expert tip:

Add color picker to a keyboard shortcut. You can find the settings for Keymap, under File > Settings > Keymap enter image description here

Haroun Hajem
  • 5,223
  • 3
  • 26
  • 39
  • 1
    This worked, thanks. I am not well versed on the details of hex color codes, so I wasn't clear on which part of the `Color()` parameter value to update to change the color. For reference - in this example value `Color(0xFF5D7D87)`, the part to replace with another color code from the color picker - is this last 6 characters: **5D7D87** . As described here: https://stackoverflow.com/a/53905427/2162226 - *"Since you try to use it with RGB value, represent it as int and prefix it with 0xff."* – Gene Bo May 05 '20 at 23:20
1

You must have heard of the materials.io website from google, which provides many materials like designs, icons, tools, resources and components for easy developing. Now Color Tool is also available. You must add the website to your browsers shortcut if you are a developer. Here's the link for chosing color : https://www.material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=E91E63

Another way I found is :

  1. Type 'Colors.' and press control+space to see the available colors.
  2. Select the color using arrow or mouse.
  3. Press control+Q for the quick documentation.
  4. And on the documentation windows, click on the edit button which opens the 'colors.dart' file.

Here all the colors with all shades are available. These shortcuts are for windows. Once you open the file, you can always come back here to chose the next shade. But will not be the comfortable method like android project.

Hope a easier way to do this will come with the later update.

Bensal
  • 3,316
  • 1
  • 23
  • 35