{"id":17529,"date":"2020-08-20T12:40:06","date_gmt":"2020-08-20T12:40:06","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17529"},"modified":"2020-08-21T09:19:33","modified_gmt":"2020-08-21T09:19:33","slug":"how-to-make-profile-app-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-make-profile-app-in-flutter\/","title":{"rendered":"How To Make Profile App in Flutter."},"content":{"rendered":"\n<p class=\"has-text-align-center\"><em>In this blog, i&#8217;ll show you all how to make a <strong>Profile App<\/strong> in <strong>Flutter<\/strong><\/em>. <\/p>\n\n\n\n<p class=\"has-text-align-center has-background\" style=\"background-color:#eeeeee\">Just <strong><span class=\"has-inline-color has-vivid-red-color\">Follow <\/span><\/strong>the below <strong><span class=\"has-inline-color has-vivid-purple-color\">Steps <\/span><\/strong>:- <\/p>\n\n\n\n<p class=\"has-text-align-center\"><em>I&#8217;m assuming that you have already created a flutter project.<\/em><\/p>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 1 :-<\/span><\/em><\/strong> First of all, make a <strong>dart <\/strong>file named <strong><span class=\"has-inline-color has-vivid-purple-color\">app.dart<\/span><\/strong> in which we create a <strong><span class=\"has-inline-color has-vivid-red-color\">Stateless Widget<\/span><\/strong> named <strong><span class=\"has-inline-color has-vivid-red-color\">App<\/span><\/strong> and import the <strong><span class=\"has-inline-color has-vivid-purple-color\">material.dart<\/span><\/strong> Package. <\/p>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 2 :-<\/span><\/em><\/strong> Now, go to <strong><span class=\"has-inline-color has-vivid-purple-color\">main.dart<\/span><\/strong> and import <strong>App Package<\/strong>. After that call <strong><span class=\"has-inline-color has-vivid-red-color\">App()<\/span><\/strong> <strong>Widget <\/strong>in <strong>runApp()<\/strong> under <strong>main()<\/strong> method. See the code Below :- <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/298abb9f7a0123a246dbfef032391b1d.js\"><\/script>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 3 :-<\/span><\/em><\/strong> Now in <strong><span class=\"has-inline-color has-vivid-purple-color\">App.dart<\/span><\/strong> , Return <strong><span class=\"has-inline-color has-vivid-red-color\">MaterialApp()<\/span><\/strong> in which we call <strong>theme Widget<\/strong> in which we call <strong><span class=\"has-inline-color has-vivid-red-color\">appBarTheme()<\/span><\/strong> in which we return <strong>AppBar Color<\/strong>.<\/p>\n\n\n\n<p> <strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 4 :-<\/span><\/em><\/strong> Now, call <strong>home Widget<\/strong> in which <strong>Scaffold<\/strong> is called. In <strong>Scaffold<\/strong>, Call <strong>appBar Widget<\/strong>, in which <strong>text Widget<\/strong> is passed as <strong>Title<\/strong>. See the below image of <strong><span class=\"has-inline-color has-vivid-purple-color\">app.dart<\/span><\/strong> :- <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"327\" height=\"309\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/title-profile-app.png\" alt=\"\" class=\"wp-image-17556\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/title-profile-app.png 327w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/title-profile-app-300x283.png 300w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/figure><\/div>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 5 :-<\/span><\/em><\/strong> Now we add image in our profile app, so make a directory named <strong><span class=\"has-inline-color has-vivid-cyan-blue-color\">images<\/span><\/strong> and put all images in the directory. After that go to <strong><span class=\"has-inline-color has-vivid-red-color\">pubspec.yaml<\/span><\/strong> file where we load the assets in which we load the file. See below :- <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/images-in-profile-app.png\" alt=\"\" class=\"wp-image-17561\" width=\"180\" height=\"293\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/images-in-profile-app.png 240w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/images-in-profile-app-184x300.png 184w\" sizes=\"auto, (max-width: 180px) 100vw, 180px\" \/><\/figure><\/div>\n\n\n\n<p>We can load images by two methods :- <br><strong><span class=\"has-inline-color has-vivid-red-color\">1.<\/span><\/strong> <strong>By Loading images directory :<\/strong>&#8211; by Loading images directory all images will load which are available in directory.<br><strong><span class=\"has-inline-color has-vivid-red-color\">2.<\/span><\/strong> <strong>By Loading Specific image :<\/strong>&#8211; we can load a Specific image which we want to load, no other images will be loaded.<\/p>\n\n\n\n<p class=\"has-text-align-center\">See the below image to see how to load images from <strong><span class=\"has-inline-color has-vivid-red-color\">pubspec.yaml<\/span><\/strong> file :- <\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"443\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/assets-in-profile-app.png\" alt=\"\" class=\"wp-image-17563\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/assets-in-profile-app.png 742w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/assets-in-profile-app-300x179.png 300w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/figure><\/div>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 6 :-<\/span><\/em><\/strong> Now we call <strong>body<\/strong> in <strong>Scaffold<\/strong> , in column we call <strong>Children Widget<\/strong> in which we call <strong>Circle Avatar<\/strong>, in which we provide <strong>radius <\/strong>80 and our <strong>image file<\/strong> as <strong>background image<\/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=\"501\" height=\"125\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/background-images-in-profile-app.png\" alt=\"\" class=\"wp-image-17570\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/background-images-in-profile-app.png 501w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/background-images-in-profile-app-300x75.png 300w\" sizes=\"auto, (max-width: 501px) 100vw, 501px\" \/><\/figure><\/div>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 7 :-<\/span><\/em><\/strong> Now we add Title and Sub-Title of ListTile with Style. 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=\"752\" height=\"98\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/listTile-in-profile-app.png\" alt=\"\" class=\"wp-image-17572\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/listTile-in-profile-app.png 752w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/listTile-in-profile-app-300x39.png 300w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><\/figure><\/div>\n\n\n\n<p><strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 8 :-<\/span><\/em><\/strong> Now, we make two buttons in <strong>Row()<\/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=\"433\" height=\"360\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/buttons-in-profile-app-1.png\" alt=\"\" class=\"wp-image-17576\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/buttons-in-profile-app-1.png 433w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/buttons-in-profile-app-1-300x249.png 300w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/figure><\/div>\n\n\n\n<p> <strong><em><span class=\"has-inline-color has-vivid-red-color\">Step 8 :-<\/span><\/em><\/strong> Now we will add another <strong>ListTile<\/strong> for <strong>About me <\/strong>Section with <strong>Style<\/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=\"796\" height=\"99\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/about-profile-app.png\" alt=\"\" class=\"wp-image-17581\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/about-profile-app.png 796w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/about-profile-app-300x37.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/about-profile-app-768x96.png 768w\" sizes=\"auto, (max-width: 796px) 100vw, 796px\" \/><\/figure><\/div>\n\n\n\n<p><strong>Thats All<\/strong>.<\/p>\n\n\n\n<p>See my <strong><span class=\"has-inline-color has-vivid-red-color\">App.dart <\/span><\/strong>file to not get any <strong>error <\/strong>and <strong>confusion<\/strong> :-<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/SushantSinghRajput03\/556ddd21aa937256664418600b779f9e.js\"><\/script>\n\n\n\n<h4 class=\"has-text-align-center has-background wp-block-heading\" style=\"background-color:#eeeeee\">Now Run the App<\/h4>\n\n\n\n<h2 class=\"has-text-align-center has-background wp-block-heading\" style=\"background-color:#eeeeee\">See Output Below<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Profile-App-485x1024.jpg\" alt=\"\" class=\"wp-image-17530\" width=\"243\" height=\"512\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Profile-App-485x1024.jpg 485w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Profile-App-142x300.jpg 142w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/Profile-App.jpg 720w\" sizes=\"auto, (max-width: 243px) 100vw, 243px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, i&#8217;ll show you all how to make a Profile App in Flutter. Just Follow the below Steps :- I&#8217;m assuming that you have already created a flutter project. Step 1 :- First of all, make a dart file named app.dart in which we create a Stateless Widget named App and import the&#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-17529","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\/17529","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=17529"}],"version-history":[{"count":30,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17529\/revisions"}],"predecessor-version":[{"id":17585,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17529\/revisions\/17585"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17529"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17529"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17529"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}