Generate custom color shades from parent color in flutter
658
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")),
Author by
Nipun Ravisara
Updated on December 27, 2022Comments
-
Nipun Ravisara over 1 year
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?