Question 1.

Let's assume the selected color is #a85c40.

Now, how can we generate the Material color with some nearby shade from that picked color. The nearby material shade will be like shade 800.

Question 2.

How to generate a colors sets of all colors with shade500 ?

CodePudding user response：

You can use this tool to generate the colors.

CodePudding user response：

You can generate the MaterialColor like this

Widget build(BuildContext context) {
  return GetMaterialApp(
    title: 'Dummy App',
    theme: ThemeData(
      primarySwatch: generateMaterialColor(Colors.greenAccent[400]),
    ),
    debugShowCheckedModeBanner: false,
  );
}

MaterialColor generateMaterialColor(Color color) {
  return MaterialColor(color.value, {
    50: tintColor(color, 0.9),
    100: tintColor(color, 0.8),
    200: tintColor(color, 0.6),
    300: tintColor(color, 0.4),
    400: tintColor(color, 0.2),
    500: color,
    600: shadeColor(color, 0.1),
    700: shadeColor(color, 0.2),
    800: shadeColor(color, 0.3),
    900: shadeColor(color, 0.4),
  });
}

int tintValue(int value, double factor) => max(0, min((value   ((255 - value) * factor)).round(), 255));

Color tintColor(Color color, double factor) => Color.fromRGBO(
    tintValue(color.red, factor),
    tintValue(color.green, factor),
    tintValue(color.blue, factor),
    1
);

int shadeValue(int value, double factor) => max(0, min(value - (value * factor).round(), 255));

Color shadeColor(Color color, double factor) => Color.fromRGBO(
    shadeValue(color.red, factor),
    shadeValue(color.green, factor),
    shadeValue(color.blue, factor),
    1
);

CodePudding user response：

https://pub.dev/packages/flex_color_picker

This package might help you. ..