Flutter Tutorial for Beginners #8 - Images & Assets

[@scotti3gt]

Your style of teaching is amazing. So well planned and your story telling is on point. A big thank you!

[@NetNinja]

Thank you for your support Scott :) means a lot!

[@DonDada187]

To be honest this was like my third day trying to understand Flutter and with this amazing instructor and his style of teaching. I understand everything. Thank you so much

[@NetNinja]

Glad I could help Rusango!

[@nishanthvm8552]

For those who had isses with network image: Try this: inside your body property, Image.network(URL) Dont do like: image : network... kinda things This worked perfect for me

[@user-ss2eo4hn6w]

You saved few hours for me, thanks!

[@esirioneyibo]

Hello net Ninjas, I really love your teaching. You break it down to the minimum. Thanks for the good work.

[@prodbyblvnk]

if anyone's having problem with assets not wanting to load - try running "flutter clean" in the console and then launching the app again

[@andressaszx]

Awesome!! Thank you!

[@tirthshah2832]

Thanks bro.It works!

[@theunknownguy7905]

thnx its work

[@turnerturnerphoto]

Must also restart the emulator (to get the image to load)

[@varunpandey8117]

thank you, it worked for me

[@damianwilk930]

I'm so happy every time you upload a new Flutter video :-) I'm following your lessons and also building my own app on the side

[@anedeji]

Great teacher and great student

[@tylerscreations928]

Thank you so much! I am a beginner and I am teching myself by building my own beginners static app. your tutorial was easy to follow but also explained to me a lot of features like Asset images and Network images. Thank you so much! you earned a like and a sub :)

[@NetNinja]

Thanks for the kind words Tyler :) much appreciated!

[@RuthKassahun]

So far everything is going smoothly. Thank you for all the explanations, it helps.

[@thismakesnosense4815]

I like how you said so far. Also how's the whole flutter thing going seeing that you're one month ahead of me

[@Prtk21]

@@thismakesnosense4815 How's the flutter thing going for you, seeing you're 1 yr ahead of me...

[@thismakesnosense4815]

@@Prtk21 ditched flutter after tutorial #20 and did a little bit of web dev with react firebase :/

[@Asithan476]

If you're using a physical mobile device to emulate, make sure you turn on mobile data

[@reinal97]

I encountered issues with the hot reload feature as it was unable to locate the assets. Consequently, I had to restart the IDE each time I added new assets. To resolve this problem, I discovered a solution by right-clicking on the project name and selecting "Repair IDE." This workaround might be helpful for others experiencing a similar issue.

[@paanoop]

Thanks for the tutorials! Really helped me to get started.

[@poupdujour]

You are a great instructor. Thanks for taking the time to do this.

[@elmoatasemelkashef4398]

your way of teaching is great and very simple i really happy to discover your channel you deserve more alot as educator Thank you from here to the moon great job

[@NetNinja]

Thanks :) that means a lot

[@amadakram5722]

note: you have to enable internet connection on your device for image to be displayed.

[@akshatbagdi3162]

hi amad how to do this

[@amadakram5722]

@@akshatbagdi3162 turn on wifi on your device(virtual or real)

[@oxianoxi3031]

True :)

[@mcbrincie212]

Now thats some amazing teaching skills. The Video is well detailed and Planned out, it gives u a basic understanding of what things do and why they are used in a way that even a caveman can understand it. So Good

[@NetNinja]

Thank you for the kind words :)

[@WolfyMarcus]

Thank you so much for the tutorials, really helped me as a beginner

[@AhmedRashed669]

Thanks for the simplicity of the explaination

[@NetNinja]

Thanks for watching Ahmed!

[@Engkk]

instead of typing the path, you can actually copy the path by right-clicking the image file, writing this as I have learned so many valuable tips in the comment section, share yours too if you have one.

[@jeejeestudio1]

Thanks for the clear explanations, even for non native english speakers good to follow.

[@kahanx10]

Sometimes Flutter caches the app with the previously compiled version, so try to reopen it instead of hot restarting if your image doesn't show.

[@ismailkoyuncu5518]

Thanks for the tutorials fundamentals ! Really helped me to get started.The Flutter FATHER. God bless you. Respects.

[@hemant1772]

Thanks from my Heart for making these videos so simple and easy to understand .❤️

[@mangeshsathe]

Thanks Ninja! these quick code snippet very much helping to get into Flutter...

[@sadaqathussainawan7201]

Great Effort! Thank you for such a helpful tutorials

[@Lensbreak]

What size/dimension should the images have? nobody talk about this in any tutorial....

[@howtotech3956]

you can use any size of image and resize like this body: Center( child: Image( image: AssetImage('assets/images/weatherlogo.png'), height: 100, width: 100, ), ),

[@user-lt6vf3qr8l]

@@howtotech3956 Thank you

[@jshanker2005]

@The Net Ninja, Thanks for the wonderful tutorial. I learned so much !!

[@NetNinja]

Glad it was helpful! :)

[@abdelhadidellal3697]

The best teacher ❤

[@MarmureanuWeb]

Thanks for all the tutorials!!!! You rock!

[@user-dh7wt3xm7p]

your content is amazing man

[@ahmadsulaimon9502]

Jazakumllahu Khoiran Net Ninja😷

[@user-rk5zz2id8l]

I didn't understand a lot from any other tutorials as I do with yours, you make it simple and much clear, Thank you a lot

[@TheNamelessTO]

I know this an old video and maybe things changed but I can't get the NetworkImage to work.. I get "Exception: Invalid image data". I would really appreciate a solution =)

[@nibaroo9439]

Maybe the file is corrupted, you do not have necessary permissions or the link is invalid

[@sakthiraja8517]

I got you,.... U must have copied the "link address", but U must copy the "image address". use this image address, this will help you

[@monkberrry]

Hi! I am able to load the images doing the image: AssetImage() way, but not the Image.asset() way. Have things changed maybe? Can't seem to find waht im looking for online

[@ahmadalkordee5879]

This tutorial is amazing ,, thank u very much brother .. :)

[@gevor3338]

youre actually goated i love u

[@jarek8150]

If anyone's also having a problem with assets not wanting to load - you probably have to remove extra Spaces, because they are actually significant in an .yaml file

[@swatik2509]

Thanks sir! I will remember you forever

[@luckytechpro9537]

hot reloading but unable to load images

[@justsomeclips_]

Thank you bro! Iitterally had one space and it wouldn't run anymore ...

[@-zerenity-2322]

Is there a noticable performance difference between loading images from a local folder rather than via a image link? :)

[@user-gi9oj9iz5r]

Great Video Ninja. Can you please make a tutorial for playing a video constantly on the homepage?

[@coraleenamarie5869]

Awesome. Thank you!

[@lalaboxer7606]

fonts and images dont work why i checked every space in pubspec that i edited

[@hassainehassen5700]

Thank you , great tutorial

[@robertnexus77]

thanks so much mate

[@NetNinja]

Thanks for watching! :)

[@bensalemmohamed7510]

how i resolve this problem I/flutter ( 3804): ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════ I/flutter ( 3804): The following assertion was thrown resolving an image codec: I/flutter ( 3804): Unable to load asset: assests/dob.jpg I/flutter ( 3804): When the exception was thrown, this was the stack: I/flutter ( 3804): #0 PlatformAssetBundle.load (package:flutter/src/services/asset_bundle.dart:221:7) I/flutter ( 3804): I/flutter ( 3804): #1 AssetBundleImageProvider._loadAsync (package:flutter/src/painting/image_provider.dart:484:44) I/flutter ( 3804): #2 AssetBundleImageProvider.load (package:flutter/src/painting/image_provider.dart:469:14) I/flutter ( 3804): #3 ImageProvider.resolve... (package:flutter/src/painting/image_provider.dart:327:17) I/flutter ( 3804): #4 ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:160:22) I/flutter ( 3804): #5 ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:325:84) I/flutter ( 3804): (elided 13 frames from package dart:async) I/flutter ( 3804): Image provider: AssetImage(bundle: null, name: "assests/dob.jpg") I/flutter ( 3804): Image key: AssetBundleImageKey(bundle: PlatformAssetBundle#7fbe8(), name: "assests/dob.jpg", scale: I/flutter ( 3804): 1.0) I/flutter ( 3804): ═════════════════════════════════════════════════════════════════════════════════════

[@obong_samjoe]

Thanks man

[@2chotti]

Thank you

[@josbexerr5166]

Super tutorial....Gracias Mister Ninja

[@aozdesigns6675]

i am really very thankful

[@nurialorente6198]

can't believe it!! doone it from my f***** own!! with your explenation, thnx!!!

[@peterinvestor]

So whats the use case for declaring every single image in pubspec? Are those images cached faster comparing to just declaring the location?

[@bangxwazan9275]

Thanks a lot

[@fatihislgan7437]

thank you

[@samsman007]

Is there a way to create Assets/Icons , like what we used to do in Android, to create multiple resolution launcher icons?

[@paisita92hd42]

Loving your videos

[@NetNinja]

Thanks! :)

[@SajadVafa]

Good tutorials. Thanks. My android studio Editor doesn't show the Nest-like line (there is a 90 degree bend in line on the left, grouping each widget). Do you know how to activate that?

[@fynn2356]

thanks bro big help

[@TrungNguyen-iw8gb]

Many thanks for your very helpful tutorial. I have learnt a lot, but do not know if I have mistake: the hot reload did not work when I move the stateless class (Home) to a new file while it worked if the Main and Home class are in the same file. Do you have any ideas for that issue?

[@DragonArchontol]

thankyou

[@germancastaned1587]

Thanks a lot !!!

[@pradeepguptadailyblaa]

1:18 That's what she said!

[@akishtp]

for other youtube tutorials

[@NetNinja]

Hope it was helpful Akish :)

[@akishtp]

@@NetNinja it definitely was. Thanks shaun 😁

[@theanlaython3470]

hi, for me your video is helpful full and easy to understanding, but I have a question after I complected this course can you recommend the future course or advance courses of flutter.

[@sparklyyy1083]

Thanks

[@letaciogalvao9908]

Amazing

[@mohammedelfatih8018]

Thank u ninja

[@ukani.trupal]

i put 6 images but shows only 3.. why? everything is fine in pubspec. i also tried flutter clean and restarting app. nothing works.

[@everthinghereforfree]

thanks

[@NetNinja]

You're welcome!

[@user-iw2md2gl4q]

I just wanted to say that you are so amazing. Thank you for what you do!

[@mattprado21]

Which one is the standard or most of the developers preferred in getting assets?

[@Musta_fa94]

thank u

[@DanaKurdi]

Thank You .

[@comeonletscook]

Hey having trouble with loading Asset image. I have tried everything suggested in the post. If so many people are having issue, could there be an easier way? It would be helpful to know how many time while setting up demo did you have this same issue and how you solved it. And things to look out for. Thanks

[@nurialorente6198]

i'm unable to load the asset done as u said, but ain't work, it blinks the emu but nothing appears ... can u help please?? Appears blank, and all the steps are good ,followed your instructions, many thnx! cleaned also , and nothing :(((( . It does work perfectly with the Network url but not the asset directory .... you explain awesome. Im spanish but I do understand u perfectly!! please could u be so kind to help??

[@elijahloot]

Thankyou sir!!!!!!!

[@user-ru6qo1vt7b]

assets or network image or font family it is not working in my flutter project. i need help. i'm using vs code.

[@anantagarwal5147]

NetworkImage works but the image doesnt load pls help The AssetImage works flawlesssly

[@mehmetarslan2034]

An image asset can refer to one or more resolution-specific "variants", see │ ^ error why?

[@nicolaspeterson9821]

why do most of my images give me a typo error even though there isn't any typos at all?

[@happyornot3847]

what a wonderful men you are

[@jfeteris]

First, assetImage didn't work for me. Then I ran flutter packages get in the Mac terminal in the directory of the project and then it worked!

[@MdAkter-ln4vv]

GOOD job

[@alisheykhlar6930]

perfect

[@peterinvestor]

If i would use network image and i wouldnt be connected to internet or image would be not found whar would happen?

[@mariammohamedsaad6513]

Could you please tell me if there is a way to read in map image details (nodes, distances,..) in flutter??

[@qrisp504]

can we do same thing with fonts? like just writing fonts/ once rather than declaring all of them?

[@marlonoliveira7835]

at 2:50 what was the shortcut used to remove the # from the puspec

[@semuthitam2211]

I want to know why the host prefer choice flutter than kotlin tutorial .... thanks

[@fabs-gk2ne]

NetworkImage() is not loading an image plz help

[@abdullahsalih493]

you must have internet connection.

[@fabs-gk2ne]

@@abdullahsalih493 come on man i do have internet, but its not loading image

[@abdullahsalih493]

@@fabs-gk2ne I had the same problem, it was because internet connection, Because it needs to load it from the web, I don't know if there's another cause

[@tharindu-k]

You have to set the DNS in the network setting to 8.8.8.8

[@bsanserful]

Not working for me either and I do have an internet connection.

[@usamabaig3047]

Sir, i got a problem here which is "unable to load asset" kindly guid me about it

[@ProfessorElectronic]

It could be indentation mistake. Try using TAB and SHIFT + TAB instead of adding spaces in order to line up the code.

[@kyllecyrs04]

hey bro the add dependencies doesn't pop up in my screen how does that work? please help me.

[@manojrayapudi5730]

What all we get in paid one. please can you explain

[@legen_dary42]

They must have changed something again because using local images isn't working anymore.

[@DeYiii]

Hello bro! Could you make a tutorial about converting svg image into png image in flutter please? It's because when I want to get images with different extension to display in listview.builder, it stopped at the time the image reach svg image.

[@overnecros]

is there any way to add assets like all .png files or the entire directory??? it seems kinda dumb declare one by one

[@HelloUltraGamerz]

i am using visual studio and i am facing problem loading the images

[@ajaybeersinghsachdeva3746]

one more problem, in the project section, the myapp_android is opened and i cannot use the yaml files, can you give the solution for this please

[@hrr597]

Thanks!

[@onlypatel6705]

I am getting parameter format not correct error, but the app was working just fine few days back, please help me

[@robertogomez9263]

Can anyone help me? I use my android phone to preview my apps but whenever I run my code it shows the example flutter app code until I hot restart it, only then does it show what my code is supposed to show.

[@willemvanderplaat5920]

Hi Shawn, I’ve just recently joined the Ninja gang. I have a question: I’m currently working in Flutter to develop an app in language learning. Previously, I had developed a similar app for Android in Android Studio. In that app I had buttons which when clicked would produce a local audio file in the form of a short spoken sentence. I would like to have a similarly functioning button in Flutter. I’ve been looking for quite a while now but without succes. I’m now looking for help. I would really appreciate some advice on this matter. Thanks.

[@joeldong-joesuh7614]

Does anyone have this issue, where copying image address from google search and pasting it doesn't work(Image does not show). But copying it from website 'Unsplash' works.