{"id":17252,"date":"2020-08-13T11:15:21","date_gmt":"2020-08-13T11:15:21","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17252"},"modified":"2020-08-14T08:34:51","modified_gmt":"2020-08-14T08:34:51","slug":"how-to-create-your-own-widget-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-create-your-own-widget-in-flutter\/","title":{"rendered":"How To Create Your Own Widget In Flutter."},"content":{"rendered":"\n<p class=\"has-text-align-center has-background\" style=\"background-color:#d5d5d5\"><span class=\"has-inline-color has-black-color\"><strong>To <\/strong><\/span><strong><span class=\"has-inline-color has-vivid-red-color\">Create <\/span><\/strong><span class=\"has-inline-color has-black-color\"><strong>your <\/strong><\/span><strong><span class=\"has-inline-color has-vivid-red-color\">Own Widget <\/span><\/strong><span class=\"has-inline-color has-black-color\"><strong>in <\/strong><\/span><strong><span class=\"has-inline-color has-vivid-red-color\">Flutter<\/span><\/strong><span class=\"has-inline-color has-black-color\"><strong>, Just <\/strong><\/span><strong><span class=\"has-inline-color has-vivid-red-color\">Follow <\/span><\/strong><span class=\"has-inline-color has-black-color\"><strong>the Below <\/strong><\/span><strong><span class=\"has-inline-color has-vivid-red-color\">Steps<\/span><\/strong><span class=\"has-inline-color has-black-color\"><strong>.<\/strong><\/span><\/p>\n\n\n\n<p><strong><span class=\"has-inline-color has-vivid-red-color\"><em>Step 1 :-<\/em><\/span><\/strong>  First of all, create a new file in <strong><span class=\"has-inline-color has-vivid-purple-color\"><em>lib<\/em><\/span><\/strong> directory named <strong><span class=\"has-inline-color has-vivid-red-color\">home.dart<\/span><\/strong> (<em>you can write any name but extension should be <strong><span class=\"has-inline-color has-vivid-cyan-blue-color\">.dart<\/span><\/strong><\/em>). See the below image for help :- <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"296\" height=\"410\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/home.dart_page.png\" alt=\"\" class=\"wp-image-17255\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/home.dart_page.png 296w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/home.dart_page-217x300.png 217w\" sizes=\"auto, (max-width: 296px) 100vw, 296px\" \/><figcaption>own_widget_in_flutter<\/figcaption><\/figure><\/div>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 2 :-<\/span><\/em><\/strong> Now, in <strong><span class=\"has-inline-color has-vivid-purple-color\">home.dart<\/span><\/strong> file we first import flutter package library named <strong><em><span class=\"has-inline-color has-vivid-purple-color\">material.dart<\/span><\/em><\/strong> and create a <strong><em><span class=\"has-inline-color has-vivid-red-color\">stateless <\/span>widget<\/em><\/strong> named <strong><em>home<\/em><\/strong> and return <strong><em><span class=\"has-inline-color has-vivid-red-color\">Centre <\/span>widget<\/em><\/strong> in which we take <strong>child<\/strong> as&nbsp;<strong><em><span class=\"has-inline-color has-vivid-red-color\">Text <\/span>Widget<\/em><\/strong>, and in text widget lets pass a Welcome Message&nbsp;<strong>&#8220;<span class=\"has-inline-color has-vivid-red-color\">My&nbsp;Own&nbsp;Widget<\/span>&#8220;<\/strong> and also add&nbsp;<strong>Direction<\/strong><span class=\"has-inline-color has-vivid-purple-color\">&nbsp;<\/span>to our<strong>&nbsp;<span class=\"has-inline-color has-vivid-red-color\">Text <\/span>Widget<\/strong>&nbsp;otherwise it returns error. See the below code.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/ff7b1e11821ed2028450f32441ba0898.js\"><\/script>\n\n\n\n<p><span class=\"has-inline-color has-vivid-red-color\"><strong><em>Step 3 :-<\/em><\/strong><\/span>   Now, in <strong><em><span class=\"has-inline-color has-vivid-purple-color\">main.dart<\/span><\/em><\/strong> file, import&nbsp;<strong><span class=\"has-inline-color has-vivid-red-color\">material.dart<\/span><\/strong>&nbsp;package library and <strong><em><span class=\"has-inline-color has-vivid-purple-color\">home.dart<\/span><\/em><\/strong> package library which is created by us, and call our&nbsp;<strong>main&nbsp;<\/strong>method.<\/p>\n\n\n\n<p><span class=\"has-inline-color has-vivid-red-color\"><strong><em>Step 4 :-<\/em><\/strong><\/span>   Under&nbsp;<strong>main()<\/strong>&nbsp;we call&nbsp;<strong><span class=\"has-inline-color has-vivid-red-color\">runApp()<\/span><\/strong>&nbsp;in which we use our own&nbsp;<strong>Widget<\/strong> <strong>Home<\/strong>&nbsp;to perform operations. See the below code :-  <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/3dbb552a92b8bddaccade032f3785124.js\"><\/script>\n\n\n\n<p class=\"has-text-align-center\"><strong style=\"font-size:20px\"><span class=\"has-inline-color has-vivid-red-color\">Thats All.<\/span> We are <strong>Ready <\/strong>to <strong>Run <\/strong>our <strong>Project<\/strong>.<span class=\"has-inline-color has-vivid-red-color\"> <\/span><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-center has-background\" style=\"background-color:#e1e1e1\">To <strong><em>Run <\/em><\/strong>your <strong><em>Project <\/em><\/strong>There are <strong><em>Two Methods<\/em><\/strong>.<\/p>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Method 1 :-<\/span><\/em><\/strong>  Go to <strong><em><span class=\"has-inline-color has-vivid-red-color\">Terminal<\/span><\/em><\/strong> and write <code><span class=\"has-inline-color has-vivid-red-color\"><strong>flutter run<\/strong><\/span><\/code> and run the command. See the <strong><span class=\"has-inline-color has-vivid-red-color\"><em>ScreenShot <\/em><\/span><\/strong>Below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"546\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Terminal_run-1-1024x546.png\" alt=\"\" class=\"wp-image-17299\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Terminal_run-1-1024x546.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Terminal_run-1-300x160.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Terminal_run-1-768x409.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Terminal_run-1.png 1366w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Method 2 :-<\/span><\/em><\/strong> <strong>Click <\/strong>on <span class=\"has-inline-color has-vivid-red-color\"><em><strong>Run<\/strong> <\/em><\/span>and <strong><em><span class=\"has-inline-color has-vivid-red-color\">Debug <\/span><\/em><\/strong>option and click on <strong><em><span class=\"has-inline-color has-vivid-red-color\">Green Button<\/span><\/em><\/strong> to run the <strong><span class=\"has-inline-color has-vivid-red-color\"><em>Project<\/em><\/span><\/strong>.  See the Below image :- <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"338\" height=\"410\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Run_and_Debug.png\" alt=\"\" class=\"wp-image-17301\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Run_and_Debug.png 338w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Run_and_Debug-247x300.png 247w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/figure><\/div>\n\n\n\n<p> <\/p>\n\n\n\n<p class=\"has-text-align-center has-black-background-color has-background\"><strong style=\"font-size:30px\"><span class=\"has-inline-color has-white-color\">See Output Below<\/span><\/strong><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"292\" height=\"619\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Own_widget_output.png\" alt=\"\" class=\"wp-image-17273\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Own_widget_output.png 292w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Own_widget_output-142x300.png 142w\" sizes=\"auto, (max-width: 292px) 100vw, 292px\" \/><\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"<p>To Create your Own Widget in Flutter, Just Follow the Below Steps. Step 1 :- First of all, create a new file in lib directory named home.dart (you can write any name but extension should be .dart). See the below image for help :- Step 2 :- Now, in home.dart file we first import flutter&#8230;<\/p>\n","protected":false},"author":19,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[6331],"tags":[6203],"class_list":["post-17252","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-flutter"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17252","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17252"}],"version-history":[{"count":27,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17252\/revisions"}],"predecessor-version":[{"id":17306,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17252\/revisions\/17306"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17252"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17252"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17252"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}