Use color as "red" instead of Colors.red in flutter

Question

This is in reference to a comment on question What's the best practice to keep all the constants in Flutter?

I want to define a separate file for my all color values as colors.dart

<data type> red = Colors.red (I am not sure of data tpye to be use here I mean String, Color or what)
<data type> cyan = hex code

and then use them directly with name as

TextStyle(
              color: red,
              fontSize: 24,
            ),

'red', 'green' as we do in Android.

I looked at many posts on S/O, and in most implementations, at the end we still need to use dot operator to access created variable, which is similar to using Colors.red, then purpose not solved of using short names like 'red'

Then I come across this comment by @ChinLoong (https://stackoverflow.com/a/64584504/12319976).

There ChinLoong talked exactly about the thing that was in my mind, however I am not sure how to use this approach exactly.

Since I could not comment there to ask(due to reputation points), I am asking here.

Also, I believe even with this enum approach, I still have to access color variable with dot operator. Even if I will create a function to return color, again, dot operator.

My entire rigidness and determination anyhow is to avoid use of dot syntax while using colors. Just red or green.

Kindly let me know is there any way at all.

Thank you.

so what is wrong with `final red = Colors.red;` placed in a separate file? — pskink, Feb 09 '21 at 10:55
@pskink before getting below answers, I was unaware about how to exactly use constants. I was thinking that I would have to create a class or a function, in which case I would still have to use dot operator to access any color variable define in it. — Priyank Sharma, Feb 09 '21 at 11:31

Shubhamhackz · Accepted Answer · 2021-02-09T11:05:31.150

2

Make a file called colors.dart

import 'dart:ui';

const Color red = const Color(0xFFFF0000);
const Color green = const Color(0xFF00FF00);
const Color blue = const Color(0xFF0000FF);
const Color yellow = const Color(0xFFFFFF00);
const Color orange = const Color(0xFFFFA500);
const Color purple = const Color(0xFF800080);

Import colors.dart wherever you like you use it.

import 'package:your_app/utils/colors.dart';

color: red,

This way you can add any number of custom colors that you did like to use in your app.

edited Feb 09 '21 at 11:05

answered Feb 09 '21 at 11:00

Shubhamhackz

7,333
7
50
71

perfect! Meanwhile searching more on constants, I got to know about constant variable names starting with 'k'. Do I have to declare name like that for making my code meet coding standards? – Priyank Sharma Feb 09 '21 at 11:39
why 'const' keyword is used on both side, I used const Color purple = Color(0xFF800080); and no IDE error. Just curious to know what could be actual reason of using const with Color(0xFF800080); as well. – Priyank Sharma Feb 09 '21 at 11:53
If you use `Color purple = Color(0xFF800080)` then `purple` variable can be reassigned like `purple = Color(0xFFFFFFFF) but if you use `const Color purple` then it can't be reassigned and you''l get an error if you try to reassign. You can remove the `const` on the right side if you wanted to. @PriyankSharma – Shubhamhackz Feb 09 '21 at 12:11
got it! Why const Color kLikeButton = Colors.blue[100]; is giving error - 'const variable must be initialized with a const value'. How Colors.blue[100] is not a const value? – Priyank Sharma Feb 09 '21 at 12:51
@PriyankSharma `Colors.blue[100]` is not a const value. Just find the hex code and it like `Color(0xFF000000)` – Shubhamhackz Feb 10 '21 at 04:40
I know Colors.blue[100] is not constant but Colors.blue or Color(0xFF000000) is, so I actually wanted to know "why" is this so. I found answer here : https://stackoverflow.com/questions/58520593/flutter-error-in-assigning-value-to-const-color https://stackoverflow.com/questions/56494710/color-shades-are-not-constant-values-in-flutter :) – Priyank Sharma Feb 11 '21 at 09:44

score 1 · Answer 2 · answered Feb 09 '21 at 10:58

1

You could have a file colors.dart and in that file you could define without having any class

final Color red = Colors.red;

In this case you can use 'red' without having dot operator.

answered Feb 09 '21 at 10:58

Iosif Pop

372
2
14

Use color as "red" instead of Colors.red in flutter

2 Answers2