Flutter has great functionality but when it comes to UI, it lacks in one fundamental method, with all it’s bells and whistles it can’t do one simple thing. YOU CANNOT EASILY SET YOUR OWN CUSTOM COLOURS. This has been the most frustrating thing I have ever come across with no easy way to do so, zero documentation on how to do so either and without a knowledge of colour theory, this becomes near to impossible. Below is a simple code sample you’d need to do just that:
| MaterialColor createMaterialColor(Color color) { | |
| List strengths = <double>[.05]; | |
| Map swatch = <int, Color>{}; | |
| final int r = color.red, g = color.green, b = color.blue; | |
| for (int i = 1; i < 10; i++) { | |
| strengths.add(0.1 * i); | |
| } | |
| strengths.forEach((strength) { | |
| final double ds = 0.5 - strength; | |
| swatch[(strength * 1000).round()] = Color.fromRGBO( | |
| r + ((ds < 0 ? r : (255 - r)) * ds).round(), | |
| g + ((ds < 0 ? g : (255 - g)) * ds).round(), | |
| b + ((ds < 0 ? b : (255 - b)) * ds).round(), | |
| 1, | |
| ); | |
| }); | |
| return MaterialColor(color.value, swatch); | |
| } |
Simply adding this to your material app would allow you to take your Flutter app and match it to any brand you’d like. Even if it doesn’t match the material palette, your app would end up looking professional and not a mismatch of bad colours not in materials design
