{"id":12004,"date":"2025-02-10T05:27:09","date_gmt":"2025-02-10T05:27:09","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=12004"},"modified":"2025-02-10T05:27:09","modified_gmt":"2025-02-10T05:27:09","slug":"use-hexadecimal-color-strings-in-flutter","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/flutter\/use-hexadecimal-color-strings-in-flutter","title":{"rendered":"How to Use Hexadecimal Color Strings in Flutter?"},"content":{"rendered":"<p><strong>&#8211; Flutter provide Color Constructor, you can pass a hex value to it.<\/strong><\/p>\n<p><code>const color = const Color(0xffb74093);<\/code><\/p>\n<p><strong>&#8211; You can also set the color opacity using hex code, below i mentioned the list.<\/strong><\/p>\n<p><strong> Example:<\/strong> Color(0xffb74093), Color(0xf2b74093), Color(0xe6b74093)<\/p>\n<ul>\n<li>100% &#8211; FF\u00a0<\/li>\n<li>95% &#8211; F2\u00a0<\/li>\n<li>90% &#8211;\u00a0 E6\u00a0<\/li>\n<li>85% &#8211; D9\u00a0<\/li>\n<li>80% &#8211; CC\u00a0<\/li>\n<li>75% &#8211; BF\u00a0<\/li>\n<li>70% &#8211; B3\u00a0<\/li>\n<li>65% &#8211; A6\u00a0<\/li>\n<li>60% &#8211; 99\u00a0<\/li>\n<li>55% &#8211; 8C\u00a0<\/li>\n<li>50% &#8211; 80\u00a0<\/li>\n<li>45% &#8211; 73\u00a0<\/li>\n<li>40% &#8211; 66\u00a0<\/li>\n<li>35% &#8211; 59\u00a0<\/li>\n<li>30% &#8211; 4D\u00a0<\/li>\n<li>25% &#8211; 40\u00a0<\/li>\n<li>20% &#8211; 33\u00a0<\/li>\n<li>15% &#8211; 26\u00a0<\/li>\n<li>10% &#8211; 1A\u00a0<\/li>\n<li>5% &#8211; 0D<\/li>\n<li>0% &#8211; 00<\/li>\n<\/ul>\n<p><strong>&#8211; Hex Code is case-insensitive, means 0xFFB74093 is same as 0xffb74093.<\/strong><\/p>\n<p><strong>&#8211; Here is the code with output.<\/strong><\/p>\n<p>Custom Color Widget.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052501\/unnamed.png\" alt=\"\" width=\"619\" height=\"378\" class=\"alignright size-full wp-image-12007\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052501\/unnamed.png 619w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052501\/unnamed-300x183.png 300w\" sizes=\"(max-width: 619px) 100vw, 619px\" \/><\/p>\n<p>  Now we use this widget by passing a hex value.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052602\/unnamed-1.png\" alt=\"code-2\" width=\"475\" height=\"249\" class=\"alignright size-full wp-image-12008\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052602\/unnamed-1.png 475w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052602\/unnamed-1-300x157.png 300w\" sizes=\"(max-width: 475px) 100vw, 475px\" \/><\/p>\n<h3>Output: <\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052644\/unnamed-2-473x1024.png\" alt=\"ouput\" width=\"473\" height=\"1024\" class=\"alignright size-large wp-image-12009\" srcset=\"https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052644\/unnamed-2-473x1024.png 473w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052644\/unnamed-2-138x300.png 138w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052644\/unnamed-2-768x1664.png 768w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052644\/unnamed-2-709x1536.png 709w, https:\/\/assets.bacancytechnology.com\/qanda\/wp-content\/uploads\/2025\/02\/10052644\/unnamed-2.png 945w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8211; Flutter provide Color Constructor, you can pass a hex value to it. const color = const Color(0xffb74093); &#8211; You can also set the color opacity using hex code, below i mentioned the list. Example: Color(0xffb74093), Color(0xf2b74093), Color(0xe6b74093) 100% &#8211; FF\u00a0 95% &#8211; F2\u00a0 90% &#8211;\u00a0 E6\u00a0 85% &#8211; D9\u00a0 80% &#8211; CC\u00a0 75% &#8211; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12006,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[15],"tags":[],"class_list":["post-12004","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12004"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=12004"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12004\/revisions"}],"predecessor-version":[{"id":12010,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/12004\/revisions\/12010"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/12006"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=12004"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=12004"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=12004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}