{"id":628,"date":"2024-03-26T05:32:52","date_gmt":"2024-03-26T05:32:52","guid":{"rendered":"https:\/\/rishikantsri.in\/blog\/?p=628"},"modified":"2024-03-26T05:38:39","modified_gmt":"2024-03-26T05:38:39","slug":"creating-custom-icon-updated","status":"publish","type":"post","link":"https:\/\/rishikantsri.in\/blog\/creating-custom-icon-updated\/","title":{"rendered":"Flutter: Creating Custom Icon (updated)"},"content":{"rendered":"\n

To create a custom icon in Flutter, you typically create a new widget class that extends StatelessWidget or StatefulWidget, depending on whether your custom icon needs to manage its own state.<\/p>\n\n\n\n

Here’s a basic example of creating a custom icon using StatelessWidget:<\/p>\n\n\n\n

Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>'package:flutter\/material.dart'<\/span>;<\/span><\/span>\n<\/span>\nclass<\/span> <\/span>CustomIcon<\/span> <\/span>extends<\/span> <\/span>StatelessWidget<\/span> {<\/span><\/span>\n  <\/span>const<\/span> <\/span>CustomIcon<\/span>({<\/span>Key<\/span>?<\/span> key}) <\/span>:<\/span> super(key<\/span>:<\/span> key);<\/span><\/span>\n<\/span>\n  <\/span>@override<\/span><\/span>\n  <\/span>Widget<\/span> build(<\/span>BuildContext<\/span> context) {<\/span><\/span>\n    <\/span>return<\/span> <\/span>SizedBox<\/span>(<\/span><\/span>\n      width<\/span>:<\/span> <\/span>45<\/span>,<\/span><\/span>\n      height<\/span>:<\/span> <\/span>30<\/span>,<\/span><\/span>\n      child<\/span>:<\/span> <\/span>Stack<\/span>(<\/span><\/span>\n        children<\/span>:<\/span> [<\/span><\/span>\n          <\/span>Container<\/span>(<\/span><\/span>\n            margin<\/span>:<\/span> <\/span>const<\/span> <\/span>EdgeInsets<\/span>.only(<\/span><\/span>\n              left<\/span>:<\/span> <\/span>10<\/span>,<\/span><\/span>\n            ),<\/span><\/span>\n            width<\/span>:<\/span> <\/span>38<\/span>,<\/span><\/span>\n            decoration<\/span>:<\/span> <\/span>BoxDecoration<\/span>(<\/span><\/span>\n              color<\/span>:<\/span> <\/span>const<\/span> <\/span>Color<\/span>.fromARGB(<\/span><\/span>\n                <\/span>255<\/span>,<\/span><\/span>\n                <\/span>250<\/span>,<\/span><\/span>\n                <\/span>45<\/span>,<\/span><\/span>\n                <\/span>108<\/span>,<\/span><\/span>\n              ),<\/span><\/span>\n              borderRadius<\/span>:<\/span> <\/span>BorderRadius<\/span>.circular(<\/span>7<\/span>),<\/span><\/span>\n            ),<\/span><\/span>\n          ),<\/span><\/span>\n          <\/span>Container<\/span>(<\/span><\/span>\n            margin<\/span>:<\/span> <\/span>const<\/span> <\/span>EdgeInsets<\/span>.only(<\/span><\/span>\n              right<\/span>:<\/span> <\/span>10<\/span>,<\/span><\/span>\n            ),<\/span><\/span>\n            width<\/span>:<\/span> <\/span>38<\/span>,<\/span><\/span>\n            decoration<\/span>:<\/span> <\/span>BoxDecoration<\/span>(<\/span><\/span>\n              color<\/span>:<\/span> <\/span>const<\/span> <\/span>Color<\/span>.fromARGB(<\/span><\/span>\n                <\/span>255<\/span>,<\/span><\/span>\n                <\/span>32<\/span>,<\/span><\/span>\n                <\/span>211<\/span>,<\/span><\/span>\n                <\/span>234<\/span>,<\/span><\/span>\n              ),<\/span><\/span>\n              borderRadius<\/span>:<\/span> <\/span>BorderRadius<\/span>.circular(<\/span>7<\/span>),<\/span><\/span>\n            ),<\/span><\/span>\n          ),<\/span><\/span>\n          <\/span>Center<\/span>(<\/span><\/span>\n            child<\/span>:<\/span> <\/span>Container<\/span>(<\/span><\/span>\n              height<\/span>:<\/span> <\/span>double<\/span>.infinity,<\/span><\/span>\n              width<\/span>:<\/span> <\/span>38<\/span>,<\/span><\/span>\n              decoration<\/span>:<\/span> <\/span>BoxDecoration<\/span>(<\/span><\/span>\n                color<\/span>:<\/span> <\/span>Colors<\/span>.white,<\/span><\/span>\n                borderRadius<\/span>:<\/span> <\/span>BorderRadius<\/span>.circular(<\/span>7<\/span>),<\/span><\/span>\n              ),<\/span><\/span>\n              child<\/span>:<\/span> <\/span>const<\/span> <\/span>Icon<\/span>(<\/span><\/span>\n                <\/span>Icons<\/span>.add,<\/span><\/span>\n                color<\/span>:<\/span> <\/span>Colors<\/span>.black,<\/span><\/span>\n                size<\/span>:<\/span> <\/span>20<\/span>,<\/span><\/span>\n              ),<\/span><\/span>\n            ),<\/span><\/span>\n          )<\/span><\/span>\n        ],<\/span><\/span>\n      ),<\/span><\/span>\n    );<\/span><\/span>\n  }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n
This Flutter code defines a custom widget named CustomIcon<\/code>. This widget creates an icon composed of two colored rectangles and an “add” icon placed in the center. Let’s break down the code:<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
import<\/span> <\/span>'package:flutter\/material.dart'<\/span>;<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This line imports the material library which contains widgets and utility functions for creating user interfaces in a Material Design style.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
class<\/span> <\/span>CustomIcon<\/span> <\/span>extends<\/span> <\/span>StatelessWidget<\/span> {<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This line defines a new class named CustomIcon<\/code> which extends StatelessWidget<\/code>. This means that CustomIcon<\/code> is a widget that doesn’t maintain any state.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
  <\/span>const<\/span> <\/span>CustomIcon<\/span>({<\/span>Key<\/span>?<\/span> key}) <\/span>:<\/span> super(key<\/span>:<\/span> key);<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This is the constructor for the CustomIcon<\/code> class. It’s a constant constructor taking an optional Key<\/code> parameter. The Key<\/code> parameter is used for identifying widgets uniquely.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
  <\/span>@override<\/span><\/span>\n  <\/span>Widget<\/span> build(<\/span>BuildContext<\/span> context) {<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This is the build<\/code> method, which is a required method for all widgets. It returns the widget that this class represents.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
    <\/span>return<\/span> <\/span>SizedBox<\/span>(<\/span><\/span>\n      width<\/span>:<\/span> <\/span>45<\/span>,<\/span><\/span>\n      height<\/span>:<\/span> <\/span>30<\/span>,<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This widget constrains its child to a specific width and height.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
      child<\/span>:<\/span> <\/span>Stack<\/span>(<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
A Stack<\/code> widget allows you to place children on top of each other.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
        children<\/span>:<\/span> [<\/span><\/span>\n          <\/span>Container<\/span>(<\/span><\/span>\n            margin<\/span>:<\/span> <\/span>const<\/span> <\/span>EdgeInsets<\/span>.only(<\/span><\/span>\n              left<\/span>:<\/span> <\/span>10<\/span>,<\/span><\/span>\n            ),<\/span><\/span>\n            width<\/span>:<\/span> <\/span>38<\/span>,<\/span><\/span>\n            decoration<\/span>:<\/span> <\/span>BoxDecoration<\/span>(<\/span><\/span>\n              color<\/span>:<\/span> <\/span>const<\/span> <\/span>Color<\/span>.fromARGB(<\/span><\/span>\n                <\/span>255<\/span>,<\/span><\/span>\n                <\/span>250<\/span>,<\/span><\/span>\n                <\/span>45<\/span>,<\/span><\/span>\n                <\/span>108<\/span>,<\/span><\/span>\n              ),<\/span><\/span>\n              borderRadius<\/span>:<\/span> <\/span>BorderRadius<\/span>.circular(<\/span>7<\/span>),<\/span><\/span>\n            ),<\/span><\/span>\n          ),<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This is the first colored rectangle. It’s a Container<\/code> widget with a specific color, width, and border radius. It’s positioned to the left within the stack.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
          <\/span>Container<\/span>(<\/span><\/span>\n            margin<\/span>:<\/span> <\/span>const<\/span> <\/span>EdgeInsets<\/span>.only(<\/span><\/span>\n              right<\/span>:<\/span> <\/span>10<\/span>,<\/span><\/span>\n            ),<\/span><\/span>\n            width<\/span>:<\/span> <\/span>38<\/span>,<\/span><\/span>\n            decoration<\/span>:<\/span> <\/span>BoxDecoration<\/span>(<\/span><\/span>\n              color<\/span>:<\/span> <\/span>const<\/span> <\/span>Color<\/span>.fromARGB(<\/span><\/span>\n                <\/span>255<\/span>,<\/span><\/span>\n                <\/span>32<\/span>,<\/span><\/span>\n                <\/span>211<\/span>,<\/span><\/span>\n                <\/span>234<\/span>,<\/span><\/span>\n              ),<\/span><\/span>\n              borderRadius<\/span>:<\/span> <\/span>BorderRadius<\/span>.circular(<\/span>7<\/span>),<\/span><\/span>\n            ),<\/span><\/span>\n          ),<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This is the second colored rectangle. Similar to the first one, but it’s positioned to the right within the stack.<\/p>\n\n\n\n
Dart<\/span><\/span><\/path><\/path><\/svg><\/span>
          <\/span>Center<\/span>(<\/span><\/span>\n            child<\/span>:<\/span> <\/span>Container<\/span>(<\/span><\/span>\n              height<\/span>:<\/span> <\/span>double<\/span>.infinity,<\/span><\/span>\n              width<\/span>:<\/span> <\/span>38<\/span>,<\/span><\/span>\n              decoration<\/span>:<\/span> <\/span>BoxDecoration<\/span>(<\/span><\/span>\n                color<\/span>:<\/span> <\/span>Colors<\/span>.white,<\/span><\/span>\n                borderRadius<\/span>:<\/span> <\/span>BorderRadius<\/span>.circular(<\/span>7<\/span>),<\/span><\/span>\n              ),<\/span><\/span>\n              child<\/span>:<\/span> <\/span>const<\/span> <\/span>Icon<\/span>(<\/span><\/span>\n                <\/span>Icons<\/span>.add,<\/span><\/span>\n                color<\/span>:<\/span> <\/span>Colors<\/span>.black,<\/span><\/span>\n                size<\/span>:<\/span> <\/span>20<\/span>,<\/span><\/span>\n              ),<\/span><\/span>\n            ),<\/span><\/span>\n          )<\/span><\/span>\n<\/span><\/code><\/pre><\/div>\n\n\n\n
This is the central container that holds the “add” icon. It’s a white container with a black “add” icon in the center.<\/p>\n\n\n\n
CustomIcon<\/code> widget creates an icon composed of two colored rectangles on the sides and an “add” icon in the center, all wrapped within a Stack<\/code> widget.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Thanks <\/p>\n\n\n\n
Happy Coding \ud83d\ude42<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
To create a custom icon in Flutter, you typically create a new widget class that extends StatelessWidget or StatefulWidget, depending on whether your custom icon needs to manage its own state. Here’s a basic example of creating a custom icon using StatelessWidget: This Flutter code defines a custom widget named CustomIcon. This widget creates an […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,89,90],"tags":[91],"_links":{"self":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/628"}],"collection":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/comments?post=628"}],"version-history":[{"count":4,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/628\/revisions"}],"predecessor-version":[{"id":635,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/posts\/628\/revisions\/635"}],"wp:attachment":[{"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/media?parent=628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/categories?post=628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rishikantsri.in\/blog\/wp-json\/wp\/v2\/tags?post=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}