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")),
Share:
658
Nipun Ravisara
Author by

Nipun Ravisara

Updated on December 27, 2022

Comments

  • Nipun Ravisara
    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?