{"id":17352,"date":"2020-08-14T16:46:59","date_gmt":"2020-08-14T16:46:59","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=17352"},"modified":"2020-08-14T16:47:01","modified_gmt":"2020-08-14T16:47:01","slug":"how-to-add-images-in-flutter","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-add-images-in-flutter\/","title":{"rendered":"How to add Images in Flutter."},"content":{"rendered":"\n<p>Create an image folder inside an assets folder, create assets if not exist.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"397\" height=\"423\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image_dart.png\" alt=\"Image_flutter\" class=\"wp-image-17353\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image_dart.png 397w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/image_dart-282x300.png 282w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><figcaption>Flutter Image_directory<\/figcaption><\/figure>\n\n\n\n<p>This should be in your root folder, in that same root directory you will find a pubspec.yaml file , <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"349\" height=\"179\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/root_folder.png\" alt=\"pubspec.yaml\" class=\"wp-image-17354\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/root_folder.png 349w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/root_folder-300x154.png 300w\" sizes=\"auto, (max-width: 349px) 100vw, 349px\" \/><figcaption>pubspec.yaml<\/figcaption><\/figure>\n\n\n\n<p>your need to make some changes on this file open it in your vscode editor, and change some lines like shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"747\" height=\"165\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/before.png\" alt=\"\" class=\"wp-image-17355\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/before.png 747w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/before-300x66.png 300w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><figcaption>To this<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"723\" height=\"164\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/after.png\" alt=\"\" data-id=\"17356\" data-full-url=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/after.png\" data-link=\"https:\/\/www.devopsschool.com\/blog\/?attachment_id=17356\" class=\"wp-image-17356\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/after.png 723w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/after-300x68.png 300w\" sizes=\"auto, (max-width: 723px) 100vw, 723px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<p>after this just use your images in your code after including child image function.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-1 is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"915\" height=\"454\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/using_image.png\" alt=\"\" data-id=\"17357\" data-full-url=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/using_image.png\" data-link=\"https:\/\/www.devopsschool.com\/blog\/?attachment_id=17357\" class=\"wp-image-17357\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/using_image.png 915w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/using_image-300x149.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/08\/using_image-768x381.png 768w\" sizes=\"auto, (max-width: 915px) 100vw, 915px\" \/><\/figure><\/li><\/ul><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Create an image folder inside an assets folder, create assets if not exist. This should be in your root folder, in that same root directory you will find a pubspec.yaml file , your need to make some changes on this file open it in your vscode editor, and change some lines like shown below. after&#8230;<\/p>\n","protected":false},"author":14,"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,6344],"class_list":["post-17352","post","type-post","status-publish","format-standard","hentry","category-flutter","tag-flutter","tag-images-in-flutter"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17352","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\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=17352"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17352\/revisions"}],"predecessor-version":[{"id":17358,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/17352\/revisions\/17358"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=17352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=17352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=17352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}