Weather App • FLUTTER - BLOC & API Tutorial for Beginners 🔥

In this tutorial, you'll learn how to create a simple Weather App in Flutter. In this app, I have shown you how to request the weather data from an API according to your location and display it on the screen.
We use BLoC in order to keep this simple App well structured.
I hope you enjoy !!!
Subscribe to my channel: / @romain_girou

[@Romain_Girou]

Don't forget to subscribe if you liked the video ! Here is the GitHub of the project : github.com/romain-girou/weather_app_youtube

[@juannavarrete2760]

I am subscribed from the TODO App, you do it very well, I am sure you will be a great channel, something I would like to see is an app that is a little more real, and with clean architecture, with firebase that would be great

[@Romain_Girou]

I've done an entire perhaps you've seen it (kzbin.info/www/bejne/jWe5n6lroNKtnM0) What kind of App you'd like to see ? A social media, chat, ... ?

[@juannavarrete2760]

@@Romain_Girou a social media

[@littlepakistani8179]

Thank you, Romain, for creating such a fantastic video! I stumbled upon your content and couldn't resist watching it. I was genuinely impressed and, as a result, I've become a subscriber to your channel. I have high hopes that you'll continue delivering excellent content in the future. I have a request for you that I hope you can consider. Could you possibly create tutorials on the following three topics? Ensuring App Responsiveness: I'm interested in learning how to make an app adapt seamlessly to various mobile devices and tablets, regardless of their screen size. Live Location Tracking with Google Maps: It would be incredibly helpful if you could provide guidance on implementing live location tracking similar to what we see in apps like Food Panda, where customers can track the delivery rider's location in real-time. High-Quality Video Player: Lastly, I'd love to see a tutorial on building a video player with features akin to KZbin, including playback controls and the ability to play KZbin videos within the app, complete with quality control options. Your expertise would be greatly appreciated in these areas, and I believe many of your subscribers would find these tutorials incredibly valuable. Thank you in advance for considering my request!

[@moonlight_350]

you don't format your code ?

[@mahmutdawut6998]

Beautiful UI and great lesson for beginner. Wishing to see more content like this.

[@AmanAgarwal-gv1il]

great video loved it and also I have added a feature in which if the time is between sunrise and 12 noon its gonna say 'Good Morning' and if time is between 12 noon and 4 pm its gonna say 'Good Afternoon' and if the time is between 4pm and sunset its gonna say 'Good Evening' and after that 'Good Night'.

[@ahmedemam281]

I love the way you explain and the trial and error it's super amusing Keep it Up Brother !

[@jeromemf]

After watching another video of yours I already liked the way you explain and present your content. After this video I subscribed to your channel. Nice work Romain!

[@Romain_Girou]

Thanks a lot ! I'll keep on delivering 💪

[@Rishiplays777]

Informative video. Thanks Romain.

[@dbtfitness8655]

Sir please make a complete project with bloc , really appreciate your teaching, thankyou very much ❤

[@ahmadnorin]

Create background with froze glass effect is outstanding.. the way you created it is stunning.. your explanation also is very clear.. thank you..

[@Romain_Girou]

Thank you so much 🙏 you made my day !

[@vyshnavvijayan2287]

Waiting to see that clean app structure, as a beginner in flutter it will help me a lot

[@Romain_Girou]

Coming soon!

[@my_wave_app]

thanks for this video it really helped me to build my mobile app, which is now live! it has been few days only but this video was very helpful! API was a bit trickier but could make it work :) cheers

[@JevLogin]

cuteapp )

[@petervilson3357]

Awesome video! Thank You! :) However, building this with cubit, dio and freezed for json deseralization would be a gem! Thank You again and looking forward for Your next video!

[@Romain_Girou]

Yes I will make a v2 !

[@szilardlang]

I'm learning Flutter and Dart on my own for a couple of weeks now, but never found a video or online lesson that explains the coding and the logic as greatly as you! You, sir, just gained a new subscriber, I'm gonna start your To-Do app next week! 😊 Also I had an idea: at the end of the video, maybe we could use the "Icon" column from the "Weather condition codes" page as well?

[@Romain_Girou]

That is very nice of you to say and it goes a long way, Thanks 🙏 Yes of course you can and you should if you want to push to app !

[@szilardlang]

@@Romain_Girou Thank you so much, I'm gonna give it a try. 😍

[@Romain_Girou]

Best of luck ! Don’t hesitate if you’re struggling

[@SumitSS-t5s]

nice explain. love from India bro. please make a app with lots of navigation. with bloc navigation becomes problem for many of us. like auto navigation and state updates. timer functions. web socket

[@viethuyho7122]

Thank you for your valuable Flutter content. Keep it up, Romain.👏👏👏

[@Romain_Girou]

Thanks a lot 🫶

[@abodikheder3626]

perfection

[@MarceloSalasL]

I would love this example with clean architecture.

[@hendrigunawan5239]

thanks for sharing this..., its really helpfull for beginners like me.

[@Romain_Girou]

My pleasure 😊

[@horizonchaser1280]

I want to add a bit where you can edit it more to make it more combust : Do change the "Good Morning" text by comparing it with the current time. Its a small tweak but perfection is what everyone desires for. Kudos to everyone and Romain you too! Subscribed to you and will following you for some more contents.

[@Romain_Girou]

Love the dedication and attention to details ! That’s the way to go

[@horizonchaser1280]

@@Romain_Girou All thanks to you sir! Pretty compact and smooth tutorial.

[@adcodage3095]

Awesome vid ! Thank you very much for that nice course ! Gonna help me make my app

[@Romain_Girou]

I’m glad you liked it ! Don’t hesitate to check out other videos if you need more and good luck with your app !

[@silkcoder]

Thanks

[@clovisstanford6515]

The switch case expression type 'bool' must be a subtype of the switch expression type . The error is " >= 600 && 700". In every case it showing this error. But I used if else statements and solved it .

[@Romain_Girou]

Fair enough with an if else statement ! Perhaps they changed something in the API or I didn't cover a type of weather that you are experiencing !

[@sonamohialdin3376]

Very helpful tutorial thank you

[@user-fi6jp6pv9x]

wow exicted

[@cheswinraj9472]

thanks for the video

[@joaofelipelima8598]

Thanks for this video. It helped improve my knowledge of flutter!

[@Romain_Girou]

Glad you liked it 🔥

[@JEAN-PIERRERAPP]

coooooooooooooooooooooooooooooooooooollllllll

[@jondoe79]

Great tutorial, waiting for the clean app structure tutorial 👍

[@Romain_Girou]

Coming soon!

[@LalitKumar-qv9xn]

yes sir please make videos on how to structure your code and project

[@LalitKumar-qv9xn]

yes sir please make videos on how to structure your code and project and also explain how to fellow clean architecture

[@Romain_Girou]

Already uploaded ! Check out the channel 😊

[@saonsikder4622]

Really Helpful Learnt a lot Thank You

[@Romain_Girou]

Happy you liked it !

[@GlennMartin]

Great tutorial, the nesting in Flutter is crazy though.

[@Romain_Girou]

Thanks ! Yes it is but you can manage it very nicely with a good separation for each widget

[@GlennMartin]

@@Romain_Girou I'll watch your clean coding video, hopefully it's there, be good to know when and how much to break up too.

[@MaxSeipio]

Amazing 🔥

[@dgofurjanov]

Good explanation 👍👍 subscribed

[@Zerefse]

thank bro

[@nengforgame8145]

Subscribed

[@ComputerScienceTechworld]

Wow your explanation is awesome 🔥

[@Romain_Girou]

Thanks a lot for saying it ! That goes a long way 🔥

[@s0mczyq]

next tut would love to see ecommerce with firebase bloc stripe :)

[@Romain_Girou]

Yes good idea ! I plan to start a serie where I create a SAAS business using flutter and bringing you guys along 👌

[@ghulammurtaza7959]

just like this we need complete apps with bloC and clean architecture

[@Romain_Girou]

You have other tutorials on the channel if you need !

[@tatyagaming007]

Very beautiful ❤️ thanks for the video ✨ Will you make one more with login screen where user having different scopes for loging in like student login scope and teacher login scope in single login button? I am working on it currently 😅 trying with single button and with bloc

[@Romain_Girou]

Thanks 🙏 Yes that could be a cool video to go through all logins possibly !

[@JevLogin]

такое ощцщение, что это видео из прошлого ))

Harika.

[@rakshithgowda8782]

Subscribed 😍

[@Romain_Girou]

🫶

[@MrIMacro]

Thanks, what if i want to show the user the movement of the raining clouds on the map. Could you please show us how?

[@peapuffer3514]

Video on app structure please. Thanks for the video. Subscribed.

[@Tyrone-Ward]

10 seconds into the video: "please like the video of you like the content"... bro you haven't even given us content to like yet IT'S 10 SECONDS INTO THE VIDEO 😂

[@elsamaniahmed2876]

Subscribed 😌🔥

[@jamalkhan-my4tg]

Awesome❤

[@Romain_Girou]

Nice that you like it !

[@bufloks893]

i hope this tutorial is full not cutted im new subscriber here

[@Romain_Girou]

It is 👌

[@ShaunyTravels.]

Just found the channel love it !!! Can you do a small sample stockmarket app with api ?

[@Romain_Girou]

Yes that’s a nice idea 💡

[@jakubopieka8107]

Hi, thank you for the tutorial with clear explanation, do you use windows? How did u manage to emulate IOS on windows?

[@keflat23]

Thanks for this pearl of knowledge!! What about if Geolocator shows up a wrong location example: San francisco(US) instead the correct location? while all the other informations are correct

[@Romain_Girou]

You are very welcome ! It’s the location of your emulator that’s why it’s SF instead of the place you’re really at, change it in the settings

[@keflat23]

@@Romain_Girou thanks a lot! Looking forward for new content! This channel deserves 100k subs!! 🫶

[@theyouthmedia9451]

Those who wants Part 2 ------------------------>

[@071-ramprasathvk9]

Awesome UI..Perfect Teaching but for me idk why the code is working fine in my android emulator but its not working in real device like i found the issue is in if-else..for me if(state is WeatherBlocSuccess) is not running..else part is working in phone. I checked by providing a colour in a container at else part

[@071-ramprasathvk9]

And i added all the neccessary parts for androidmanifest files....Is i need to few min to get data or anything else.. and your video is really helpful for my project but i stucked bw this

[@Romain_Girou]

Perhaps you should replace the if statements by a switch

[@Ha-it-ha-99-99]

hi , i can use the images of your app for construct my app or not. Thanks

[@Yadnesh_]

Sir when i build the apk and try to run in my real Android phone it gives error state , and when i run in my Android studio emulator it runs,and also when i connect my real device to Android studio it runs perfect. Why this happens,

[@nullcodeer]

thanks ...........a lot google map with flutter

[@Romain_Girou]

Yes good idea

[@delmontee]

Great video, thanks. But what was the point of using an event in this case? Wouldn't a cubit have been better? I'm still trying to work out when an event would be beneficial

[@Romain_Girou]

Thanks ! Yes in theory cubit are for « eventless » actions like requesting the weather data and bloc when the user actually interacts with the app like when a button is pressed

[@sejal9773]

I'm on the end part almost done but the app just keeps loading ig it is entering the else part of the 'main.dart' code. I checked the entire code there are no errors and i have provided Api key and everything. Could you please tell why this would be happening. Thankyou for this amazing video!!

[@Romain_Girou]

Do you have a github link ?

[@jbxbmsd1453]

@@Romain_Girou i have the same problem !!

[@Romain_Girou]

I think the problem is in the switch statement, I'll fix it but you can replace it with an if else statement and that should fix it

[@priyashaghosh822]

@@Romain_Girou I am facing the same issue. The app is loading only.

[@willsantos3284]

Sir, I appreciated the way you explain things, I'm new to flutter and learning from you. I have a question: I can't run the app with geolocator package added, I think it is conflicting with another package, any idea to fix that or another package to get geolocation?

[@Romain_Girou]

hmm conflicts are always a pain... Perhaps try a pub upgrade and otherwise look carefully at the output message, it will tell you which package as a conflict and what version it should be in

[@willsantos3284]

@@Romain_Girou tks for you reply, I did it, I fixed the conflict and everything is working fine. keep it up bro, you're doing a nice job.

[@Romain_Girou]

Perfect 👌 I will thanks 🙏

[@DURGHAM6]

amazing keep up the amazing work man do you teach I will gladly perches your course

[@Romain_Girou]

Thank you man ! I’m in the process of creating one but I want it to be amazing and bring you real value so it’s gonna take a bit of time 😇

[@nobody007]

Could you pease make a complete guide video on bloc beginer to advance

[@Romain_Girou]

Yes I will !

[@ashfaqueshaikh4177]

i want more icons like fog, haze but i didn't find any free icon how can i get icons like yours

[@ashfaqueshaikh4177]

ooh, actually u have already provided it. so thank you!

[@hackaholic01]

Hey it's a good tutorial, I want to know one thing how to get hold of these widgets, there are too many widgets and attributes, and I am Mostly struggling with which one will do what and when to use, any help will be appreciated

[@Romain_Girou]

Yes I can imagine .. it’s a practice thing ! The more you’re gonna develop the better you will get selecting widgets and the most important ones will come more often !

[@victorzarzar2724]

Hi, Thank you, What is the name of the vs code extension that shows the name and colors?

[@Romain_Girou]

Well you have a few of them but I'm using at the moment only "bloc", "flutter" and "dart".

[@ARIFFOYSAL-nb6zr]

what is the extension name that you have used to see the image in the vscode

[@Romain_Girou]

It's by default isn't it ?

[@RadityaRinandyaswara]

Hey, thanks for the tutorial, i have a question, if I put some button to refresh the data, how to call the API again ?

[@Romain_Girou]

Hey there ! Simply by calling the Bloc Event again

[@RadityaRinandyaswara]

@@Romain_Girou took me a while to figure out how to call it again, but it works now, thanks!

[@Romain_Girou]

Amazing, well done 👏

[@afradahsan3514]

Thank you, Romain! Such a great tutorial. But, in the package, there is an option for five-day weather forecast, when i try do that, it is throwing some error. and when i tried logging, there is actually no weather-related data, only the city name, and the latitude and longitude. Do you know whether the package is limited to only use the current weather or is five day forecast available?

[@Romain_Girou]

You are very welcome ! Yes perhaps the package has some errors into it I don't really know and I could tell you for sure. What I know is that you can try to fetch weather data from an api directly. Perhaps that something I could do as a small part 2 ?

[@afradahsan3514]

@@Romain_Girou yeah same, I'm also thinking to use the api directly, working on another project rn, so thought of implementing the easy way using the package. 😅🤛

[@Romain_Girou]

I understand ! Well feel free if you have time to do it to create a branch in the GitHub if you do it before me 👌 Good day 🔥

[@from_whatch]

sir pls make a flutter bloc beginner to advance tutorial

[@uttamsharma921]

How to get such images for different weather conditions for free?????

[@glionn]

can I use provider instead of bloc usually everyone uses bloc but I don't understand why

[@Romain_Girou]

Of course you can ! Those state management system are just more advanced

[@juannavarrete2760]

where are the images that u use in the tutorial?

[@Romain_Girou]

In the GitHub

[@mr.kashyapsandesh1084]

make more small projects with bloc

[@aswinmanmathans6837]

Please watchout for latest issue with the geolocator package, the app wont run without the latest Kotlin, and if Kotlin is the latest version, geolocator won't work . I tried every possible resolutions in the universe, I 'm quitting this project.

[@NaveenG777]

change the kotlin version to new version in your gradil file

[@aswinmanmathans6837]

@@NaveenG777 i tried that too, but it also return error , when i commented out the geolocator dependency, the error disappeared.

[@codeessentialske]

Nice Video. You didn't include any link to the github, or assets. I was following along and realized I can't continue because I have no assets. Kindly would you like to include the link perhaps where we can download the assets if not necessarily github?

[@Romain_Girou]

GitHub is in the pin comment !

[@codeessentialske]

Ooooh Sorry, I didn't see 😂 Thanks I can now continue @@Romain_Girou

[@anandkrishna926]

We want same with using http or Dio package please, it will be useful for other projects with APIs. Thank you.

[@Romain_Girou]

Will do ! Thanks for your feedback and there are some other videos like this on my channel you should go check them out 🔥

[@anandkrishna926]

@@Romain_Girou Also I need to know how to manage multiple API endpoints in same project and call those api and feed them in same UI. Thanks.

[@Romain_Girou]

Give me some examples of API calls you're looking for and I'll make a video !

[@anandkrishna926]

@@Romain_Girou OpenWeatherMap API dosen't provide specific location names it provides an area name I know weather is based on an area but I want to show specific area name using Reverse Geocoding API by locationiq and Altitude(Elevation) from open-elevation can you please make a video including this API? you can also upgrade the same project using these APIs and not using Weather package. using http or Dio pacakage. Thank you.

[@Romain_Girou]

yep noted ! Will come soon. I'll make a v2 of this video with http or Dio and pointing out as well precise location

[@narutaim]

Hello Romain and thanks for this great tutorial, I've encountered a problem in this part of the video 41:00 it tells me that the method _determinePosition isnt defined for the type MyApp, I can't seem to find any fix for that

[@Romain_Girou]

Weird.. did you tried to relaunch the App completely ? Go check the GitHub to see if you didn’t miss anything !

[@clovisstanford6515]

I have a question how do you get the constant colors, like the source of the specific colors

[@Romain_Girou]

Hello there ! Well you can get the codes in many ways using Canva, or other website that will give you the Hex code for the color you are looking for.

[@juannavarrete2760]

Could you share the code repository please?, I can't find similar weather icons

[@Romain_Girou]

Yes incoming !

[@juannavarrete2760]

​@@Romain_GirouThank you! I appreciate your way to explain

[@Romain_Girou]

I am very glad to hear it, it goes a long way 😊 Github link is in the pin comment 👌 Good luck in your learning journey !

[@shailjaiswal-fd1xy]

What we display when there is night because it's displaying sun image which is not appropriate

[@Romain_Girou]

Well feel free to improve it !

[@shailjaiswal-fd1xy]

@@Romain_Girou Sir i am not getting any idea to implement moon image could u please suggest me how to do that because in night the sun image is not looking appropriate.

[@Romain_Girou]

Well you get the time of the phone and if the time is between 7am-7pm you display the sun image and if between 7pm-7am then the moon image or something like this

[@shailjaiswal-fd1xy]

Ok thanks will try to implement this

[@shailjaiswal-fd1xy]

It worked perfectly thanks a lot sir. I also added some animation from rive. ❤️

[@ahamedsuhails]

18:14 deepPurple circles are aligned exactly in the center for me (not getting the mirror effect for the values (AlignmentDirectional(-3, -0.3), AlignmentDirectional(3, -0.3))). I'm using an android emulator. What am I doing wrong here?

[@Romain_Girou]

Perhaps you forgot the blur effect under all those widget ? Checkout the Github and compare, good luck !

[@amitshibuk]

@@Romain_Girou even i had the same error on android emulator, the way i fixed it was by adjust the padding in EdgeInsets.fromLTRB, changed L AND R from 40 to 10. I'm not sure if this will be an issue later as I've only completed 20% of the tutorial. Will update this if I find any issues.

[@vasanth6801]

Sir, you forgot to change the good morning text

[@Romain_Girou]

Indeed but I think you can figure this one out on your own using DateTime.now() and accessing the current hour of the day 😁

[@sandeshverma214]

app keeps on loading and the all of the code is correct ?? any fixes urgent

[@Romain_Girou]

If the Apps keeps on loading it's because perhaps the switch statement for code weather code is not valid. Replace it with an if statement

[@fashmuyhee]

I'm an absolute beginner can I watch this ?

[@Romain_Girou]

I mean of course you can ! But if you have no coding experience I'm afraid it's gonna br a bit hard to understand

[@fashmuyhee]

@@Romain_Girou thanks 👍

[@shahzaibkhan9049]

Sir please different apps develop with provider or firebase or API

[@Romain_Girou]

Will do !

[@mohammed_abdulqader505]

Can we have this sorce code in github ..? ❤

[@Romain_Girou]

In the pin comment !

[@KeerthivasanS-]

SIr there is no API key for free ,Is it possible any website to get api key for free

[@Romain_Girou]

Yes there is no ? They removed it ?

[@gamingwithflames]

The app is getting stuck at loading screen.

[@gamingwithflames]

I also tried changing switch block with if else but still the app isn't loading

[@Romain_Girou]

Check the GitHub !

[@mikeyparker8207]

I tried to build the APK and it gets stucks on loading any idea why? IT works find in the emulator

[@Romain_Girou]

Perhaps have something to do with the login ? Did you logout before building the apk ? Otherwise could be the location package not right initialise, on android you also need to do some stuff to make it work

[@Romain_Girou]

Or it’s the switch statement for the weather code that’s not right

[@mikeyparker8207]

@@Romain_Girou Im assuming the switch statment is right as it works fine on the emulator and im still logged in on the emulator. Every works fine on the android emulator. just not the built APK

[@mikeyparker8207]

@@Romain_Girou got it working added to the manafestio

[@moazibrahim5384]

thanks, but how can I get an API key to make the app work?

[@sarveshyadav6175]

U can use free random APIs or if u know backend u can make them urselves

[@moazibrahim5384]

so what do you use in this project? @@sarveshyadav6175

[@Romain_Girou]

You have to request you own from the weater API !

[@cheswinraj9472]

how did you get the png ???

[@Romain_Girou]

I’ve created them ! You can find some online for sure

[@cheswinraj9472]

@@Romain_Girou Image.network("openweathermap.org/img/wn/${state.weather.weatherIcon}@4x.png") add this i saw in some other video

[@bhavinkuriya3000]

How can i get api key can you please tell us

[@Romain_Girou]

You just create an account on the website and then in your profile your will find a spot where you can generate and see your API Keys

[@CodeX-xyxy]

WARNING !!!: saving API_KEY in application one of the dumbest thing you can do in mobile development. bad actor literally can take that key from application very easily and can use for specific purpose. How we can use api key safely?: basically you need a backend web server to handle api requests to weather api then your bacend will return response to your mobile client.

[@Romain_Girou]

That is very right ! (That was not a real life project architecture this) Thanks for the comment

[@ibrohimjonodilov1924]

Romain come on mate give us api that u used

[@Romain_Girou]

It’s all in the video ☺️

[@YI3Q]

🫡

[@Romain_Girou]

🫡

[@kan15hka]

The following Widget method can be added to provide a dynamic greeting Widget dayGreeting() { var style = const TextStyle(fontSize: 27.5, fontWeight: FontWeight.bold); var hour = DateTime.now().hour; if (hour < 12 && hour > 3) { return Text( 'Good Morning', style: style, ); } else if (hour < 16) { return Text( 'Good Afternoon', style: style, ); } else if (hour < 21) { return Text( 'Good Evening', style: style, ); } else { return Text( 'Good Night', style: style, ); } }

[@Romain_Girou]

Well that’s some good work ! Thanks 🙏

[@kan15hka]

@@Romain_GirouYou did a great work sir... Keep inspiring us...

[@umutcanargun5108]

Excellent video sir. I have a question too: can we fetch data from an api without a package like 'weather'?

[@Romain_Girou]

Thanks ! Of course you can, I'll make a video showing how to connect direct with http to an API

[@elsamaniahmed2876]

Subscribed 😌🔥