Skip to content

Instantly share code, notes, and snippets.

@eEQK
Created February 26, 2024 11:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eEQK/35a8e3858c3bdaa6864965b824bc91d9 to your computer and use it in GitHub Desktop.
Save eEQK/35a8e3858c3bdaa6864965b824bc91d9 to your computer and use it in GitHub Desktop.
Generate flutter material color swatch code from a color
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _color = '0xffffcc00';
late final controller = TextEditingController(text: _color);
@override
Widget build(BuildContext context) {
final colorHex = _color.replaceFirst('0x', '').replaceFirst('0X', '');
late final color = Color(int.parse(colorHex, radix: 16));
final validColor = int.tryParse(colorHex, radix: 16) != null;
return MaterialApp(
home: Scaffold(
body: Container(
constraints: const BoxConstraints(maxWidth: 400),
padding: const EdgeInsets.all(24.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
controller: controller,
onChanged: (value) => setState(() {
_color = value;
}),
),
if (!validColor) const Text('Invalid color'),
if (validColor) SelectableText('''
MaterialColor($_color, {
50: ${color.shade50},
100: ${color.shade100},
200: ${color.shade200},
300: ${color.shade300},
400: ${color.shade400},
500: ${color.shade500},
600: ${color.shade600},
700: ${color.shade700},
800: ${color.shade800},
900: ${color.shade900},
})
'''),
],
),
),
),
);
}
}
/// credits go to @fldnascimento
/// https://github.com/fldnascimento/color_shade/blob/main/lib/src/shade.dart
abstract class Shade {
/// Convert int to ARBG
static String hexFromArgb(int a, int r, int g, int b) {
return '${a.toRadixString(16).padLeft(2, '0').toUpperCase()}'
'${r.toRadixString(16).padLeft(2, '0').toUpperCase()}'
'${g.toRadixString(16).padLeft(2, '0').toUpperCase()}'
'${b.toRadixString(16).padLeft(2, '0').toUpperCase()}';
}
/// Convert hex to int
static int intFromHex(String hex) {
return int.tryParse(hex, radix: 16) ?? 0;
}
/// Mix colors from an amount
static Color mixColors(Color argb1, Color argb2, double amount) {
final p = amount / 100;
final r = ((argb2.red - argb1.red) * p + argb1.red).floor();
final g = ((argb2.green - argb1.green) * p + argb1.green).floor();
final b = ((argb2.blue - argb1.blue) * p + argb1.blue).floor();
final a = ((argb2.alpha - argb1.alpha) * p + argb1.alpha).floor();
final hex = hexFromArgb(a, r, g, b);
return Color(intFromHex(hex));
}
/// Multiply the two colors
static Color multiply(Color argb1, Color argb2) {
final a = argb1.alpha;
final r = (argb1.red * argb2.red / 255).floor();
final g = (argb1.green * argb2.green / 255).floor();
final b = (argb1.blue * argb2.blue / 255).floor();
final hex = hexFromArgb(a, r, g, b);
return Color(intFromHex(hex));
}
/// Generate shades based on colorBase
static MaterialColor swatch(Color colorBase) {
const baseLight = Color(0xFFFFFFFF);
final baseDark = multiply(colorBase, colorBase);
return MaterialColor(
colorBase.value,
<int, Color>{
50: mixColors(baseLight, colorBase, 12),
100: mixColors(baseLight, colorBase, 30),
200: mixColors(baseLight, colorBase, 50),
300: mixColors(baseLight, colorBase, 70),
400: mixColors(baseLight, colorBase, 85),
500: colorBase,
600: mixColors(baseDark, colorBase, 87),
700: mixColors(baseDark, colorBase, 70),
800: mixColors(baseDark, colorBase, 54),
900: mixColors(baseDark, colorBase, 25),
},
);
}
}
/// Extends the Color class to generate shades
extension ColorShadeExtension on Color {
MaterialColor get swatch {
return Shade.swatch(this);
}
Color get shade50 => swatch[50]!;
Color get shade100 => swatch[100]!;
Color get shade200 => swatch[200]!;
Color get shade300 => swatch[300]!;
Color get shade400 => swatch[400]!;
Color get shade500 => swatch[500]!;
Color get shade600 => swatch[600]!;
Color get shade700 => swatch[700]!;
Color get shade800 => swatch[800]!;
Color get shade900 => swatch[900]!;
}
@eEQK
Copy link
Author

eEQK commented Feb 26, 2024

@eEQK
Copy link
Author

eEQK commented Feb 26, 2024

thanks to @fldnascimento for code responsible for generating shades

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment