Generate custom color shades from parent color in flutter

Question

I needs to find a better approach to generate shade colors from a given custom color for theming purposes. So far I found a way to do this by reducing opacity of the given color as below. so I can accent Color color and faded color of given color to this function.

import 'package:flutter/material.dart';

class AppColors {
  Color accentColor;
  Color fadedColor;

  AppColors(this.accentColor, this.fadedColor);
}

AppColors getAppColors(String color) {
  int budgetAccentcolor = int.parse('0xff' + color);
  int budgetFadedColor = int.parse('0x26' + color);

  return AppColors(Color(budgetAccentcolor), Color(budgetFadedColor));
}

But because of I'm reducing opacity of the color It shows what's going under the widgets like when using SliverAppBar.

Is there anyway to get the faded value of a Hex color?

question from:https://stackoverflow.com/questions/65856982/generate-custom-color-shades-from-parent-color-in-flutter

Answer 1

Finally found a way from here.

Color lighten(Color color, [double amount = 0.49]) {
  assert(amount >= 0 && amount <= 1);

  final hsl = HSLColor.fromColor(color);
  final hslLight = hsl.withLightness((hsl.lightness + amount).clamp(0.0, 1.0));

  return hslLight.toColor();
}

Color hexToColor(String code) {
    return Color(int.parse(code.substring(0, 6), radix: 16) + 0xFF000000);
}

And Im calling this fucntion like this.

backgroundColor: lighten(hexToColor("f98b5")),