Created
April 23, 2021 08:23
-
-
Save whiplashoo/afe1c8e542c6bf8e8b2659eb9d9a4071 to your computer and use it in GitHub Desktop.
Convert a hex, rgba, or rgb color string to Color object in Dart
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'dart:ui'; | |
import 'package:flutter/material.dart'; | |
// Converts a hex, rgb, or rgba color string to Color object. Works with opacity values as well. | |
// e.g.: | |
// "#000" -> Color(0xff000000) | |
// "#cc3333" -> Color(0xffcc3333) | |
// "#cc3333dd" -> Color(0xddcc3333) | |
// "rgb(204, 44, 81)" -> Color(0xffcc2c51) | |
// "rgba(204, 44, 81, 0.20)" -> Color(0x33cc2c51) | |
// "rgba(204, 44, 81, 0.80)" -> Color(0xcccc2c51) | |
// Check more examples in test.dart | |
Color hexOrRGBToColor(String colorStr) { | |
RegExp hexColorRegex = RegExp(r'^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$'); | |
if (colorStr.startsWith("rgba")) { | |
List rgbaList = colorStr.substring(5, colorStr.length - 1).split(","); | |
return Color.fromRGBO( | |
int.parse(rgbaList[0]), int.parse(rgbaList[1]), int.parse(rgbaList[2]), double.parse(rgbaList[3])); | |
} else if (colorStr.startsWith("rgb")) { | |
List rgbList = colorStr.substring(4, colorStr.length - 1).split(",").map((c) => int.parse(c)).toList(); | |
return Color.fromRGBO(rgbList[0], rgbList[1], rgbList[2], 1.0); | |
} else if (hexColorRegex.hasMatch(colorStr)) { | |
if (colorStr.length == 4) { | |
colorStr = colorStr + colorStr.substring(1, 4); | |
} | |
if (colorStr.length == 7) { | |
int colorValue = int.parse(colorStr.substring(1), radix: 16); | |
return Color(colorValue).withOpacity(1.0); | |
} else { | |
int colorValue = int.parse(colorStr.substring(1, 7), radix: 16); | |
double opacityValue = int.parse(colorStr.substring(7), radix: 16).toDouble() / 255; | |
return Color(colorValue).withOpacity(opacityValue); | |
} | |
} else if (colorStr.isEmpty) { | |
throw UnsupportedError("Empty color field found."); | |
} else if (colorStr == 'none') { | |
return Colors.transparent; | |
} else { | |
throw UnsupportedError("Only hex, rgb, or rgba color format currently supported. String: $colorStr"); | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:test/test.dart'; | |
void main() { | |
group('Hex or RGB string to Color', () { | |
test('Can convert hex #cc3333 to Color', () { | |
expect(hexOrRGBToColor("#cc3333"), Color(0xffcc3333)); | |
}); | |
test('Can convert hex #000 to Color', () { | |
expect(hexOrRGBToColor("#000"), Color(0xff000000)); | |
}); | |
test('Can convert hex #ffffff to Color', () { | |
expect(hexOrRGBToColor("#ffffff"), Color(0xffffffff)); | |
}); | |
test('Can convert rgba rgba(255,255,255,0) to Color', () { | |
expect(hexOrRGBToColor("rgba(255,255,255,0)"), Color(0x00ffffff)); | |
}); | |
test('Can convert rgba rgba(32,33,36,0.55) to Color', () { | |
expect(hexOrRGBToColor("rgba(32,33,36,0.55)"), Color(0x8c202124)); | |
}); | |
test('Can convert hex #2021248c to Color', () { | |
expect(hexOrRGBToColor("#2021248c"), Color(0x8c202124)); | |
}); | |
test('Can convert hex #cc2c512e to Color', () { | |
expect(hexOrRGBToColor("#cc2c512e"), Color(0x2ecc2c51)); | |
}); | |
test('Can convert rgba rgba(204,44, 81, 0.20) to Color', () { | |
expect(hexOrRGBToColor("rgba(204,44, 81, 0.20)"), Color(0x33cc2c51)); | |
}); | |
test('Can convert rgba rgba(204,44, 81, 0.80) to Color', () { | |
expect(hexOrRGBToColor("rgba(204,44, 81, 0.80)"), Color(0xcccc2c51)); | |
}); | |
test('Can convert rgb rgb(204,44, 81) to Color', () { | |
expect(hexOrRGBToColor("rgb(204,44, 81)"), Color(0xffcc2c51)); | |
}); | |
test('Can convert rgb rgb(32,33, 36) to Color', () { | |
expect(hexOrRGBToColor("rgb(32,33, 36)"), Color(0xff202124)); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks a bunch. Appreciate it.