Custom App Colours In Flutter

Tags

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 = [.05];
    Map swatch = {};
    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

Contact us

Brad Mc Helem

Leave a Reply Cancel reply

Provisioning A New Digital Ocean Server With Laravel Forge, And Deploying Code With Laravel Envoyer

Pull Requests

Custom App Colours In Flutter

Contact us

Related posts:

Brad Mc Helem

Leave a Reply Cancel reply