Building your first Flutter App - with a Codelab!

[@flutterdev]

Subscribe for the latest → goo.gle/FlutterYT

[@letiiciateixeira1312]

Aa

[@inakisanchez2552]

I have an interview in a few days for a position with flutter. I'm a Backend dev and had no experience with this but, man, this was so clear to me. Thank you

[@vikhyat2038]

how did the interview go?

[@riftriotmemes4963]

@@vikhyat2038 he can't leave us hanging like that

[@ahgpy]

bro how much they pay in your area for a web dev (fullstack) and where if you dont mind me asking

[@inakisanchez2552]

@@vikhyat2038 they hired a mexican dev (mexican ceo so understandable)

[@inakisanchez2552]

@@ahgpy here like 1k to 1.5k usd monthly. it depends of the company (international had likely more higher salaries but national are very low)

[@autozone5335]

This kind of content is of critical importance. Explaining basic concepts in a simple & easy to follow way is a key for flutter enablement, also seeking help from Filip to present the content is a huge extra!

[@durgeshanand6774]

I first heard of flutter when i wanted to make an app with user authentication as a project to get selected for a team of app developers at my college.(i had no exp in dev before that other than writing html for my own fun webpages). I had 7 days to learn, setup and complete the task and 2 days were spent on setting up and ensuring everything works. It was really the hardest step in my journey.

[@MirkoRaimoViaggi]

I'm reading the comments: 99% (not accurate) of them are about the love we feel for Filip. A lot of us think to know flutter thanks to him, Matt, Emily and Andrew but, most of the time, we forget that there is a whole team behind both the amazing technology they created and the crafting of these videos, so... to the whole flutter team: Thank you ❤

[@filiphracek]

Agreed! I think it's a little unfair that I get a lot of credit just because I'm the one explaining, while the ones doing the arguably harder work of building and maintaining the SDK often don't. Kudos to the whole team behind Flutter, both inside Google and outside.

[@loqmanhaidarah2676]

@@filiphracek oh glade to see your account 😁

[@andrealmeida6122]

Just to say "Thank you"! This was my first contact with Flutter and as an "Old Programmer (I started with Basic in 1984)" I was a little scared by the format of everything, despite programming well in Python, this Dart format was still very strange to me. Now I'm ready to make my first program in Flutter.

[@medkdarkcreator2094]

Incredible instructor, it's super clear, the pace is great, and this guy radiates joy and positivity. Thank you so much!

[@DominusZeikyu]

I'm still fairly new to Flutter, but had experience with Java and Android development and I really enjoyed your lesson and appreciate the flexibility in your guide and the little challenges in it which I enjoyed as well, Thanks Filip!

[@filiphracek]

Thank you!

[@shahkhalid6395]

​@@filiphracek❤😢

[@marcgroenewegen2022]

Brilliant introduction to Flutter! Nicely portioned, relaxed presentation, all example code actually works and great to work through this at one's own pace. Thanks!

[@my_wave_app]

Hello! Big thank you to Flutter and the community, this video was a great start for me to get into mobile app programming and here we go: My Wave App (content creator dashboard on mobile) is live so thanks to KZbin and this channel!

[@bawagrafix]

I have seen your video 2 times, it was very logical and straight forward and to the point, basic stuff and structure is very clear and with minimalistic code, I am converting my existing web app based on php, html, javascript. your tutorial made my life easier as you have not made confused by using alternative methods, you taught only the things which are practical and most logically useful rest playing with options left to developer that's good good but flow of developing good UI is awesome. I really appreciate you work.

[@thatwasamazing2791]

We've missed you Filip 🔥🔥

[@filiphracek]

Aww. Thanks! I'm still around, of course. But I'm also super happy about the current team and their work here on KZbin. And I'm arguably happier working on my own sand castles and sometimes popping in to give a talk or two. So, everyone wins! :)

[@thatwasamazing2791]

@@filiphracek Glad to know you're doing great. All the best. See you at the next flutter event

[@LiamTerblanche]

What a lovely, informative, well-paced presentation! Thank you!!

[@TheVerbalAxiom]

Thank you for this tutorial. You teach at a great pace, good explanations, and always in detail. You're good at teaching others for sure!

[@twofishonechips9792]

amazing presentation style; I'm enjoying watching and learning immensely!

[@tingtingcao8150]

Thank you for creating this video. It's been very helpful to get started with the basics of Flutter and know what it has to offer. 😊

[@harleyma5871]

Thank you, my English has improved a lot!

[@daeyoungkim4971]

Fantastic introduction! I started to jump from C# to Flutter just to broaden my coverage. Super interesting.

[@130n45]

Very nice and important way to give an overview about how to learn to programm and use flutter! Im totaly new by using flutter, and i have to say i understand the most things. Thanks!

[@killercat50y]

You should become a teacher, just a thought. Was able to learn this and actually pay attention a hundred times easier than any of my college professors teachings. Thank you!

[@mlcalache]

Loving the course, content and methodology. Thank you!!!

[@asumahyakubu6177]

Welcome back Filip, we really miss you 😍😍

[@merwx2010]

Thanks a lot for this amazing combo (the website course + the video), I am a beginner (with some basic knowledge in programming) and I wanted to see what flutter is capable to do. Building with you step by step this project was perfect for me I almost spent the whole day with this video I also loved the presentation it is so creative, thanks again

[@haraldhonk4650]

Thank you so much for this. I had a different tutorial (from a bigger channel...) that completely went over the installing stuff part and other important things. Figured it out myself and when I came to programming decided to switch to this. After finding that you explained everything that went wrong for me (had VS Code but not VS). Great tutorial from a didactic, content and result standpoint!

[@varun-px8gs]

Been there man (the setup is so complicated , it really sucks )

[@christiancolewan]

This approach of teaching code works best for me. Thanks so much!

[@aditya.kulkarni]

He’s back on channel! 🎉

[@johnnywest5445]

Great tutorial to begin my journey into Flutter/Dart development. Thank you for this!

[@cesarcmc]

Great Codelab! Hats off to Filip. Very smooth, very clear, very nice video.

[@twokrangs]

Thank you, your videos are a pleasure to watch!

[@pranav-io6vo]

32:39 : for windows right click and select refractor for which you'll get the extract options

[@fabiano8888]

Thank you!

[@whitesites]

Even with that I still missing the Extract Widget Option

[@loqmanhaidarah2676]

Thanks bro, we appreciate all the work you done and the way of explanation.

[@HunaBopa]

Happy to be a part of Flutter community

[@merahputih368]

i knew flutter, coz i watch filip.... nice to see you back

[@ParinyaTeerakasemsuk]

46:53 if you are not seeing the auto-formatting as shown in the video, go to settings > formatting and enable "Format On Save" option.

[@karimmahari3166]

Thank you very much Felip really i appreciatethe the tutorial and it is the first time that i write a feedback on KZbin 😍😍

[@ariyoayodejiifeoluwa65]

beautiful and insightful. It really covers the basics. I'd really like a tutorial that covers more advanced topics, for intermediate level. kudos to everyone on the team who made this video possible.

[@TheShinayser]

Wait what? Is he back?

[@youssef.elmoumen]

Sadly no😢😢

[@atmega3212]

He's described as a community member so i guess he's not back xd Anyway I'm happy to see him again on this chan :)

[@Coopervise]

I thought the same & was happy to see him back!!

[@filiphracek]

I never left! No, but seriously. I'm working on my own stuff but I love the fact that the Flutter team sometimes lets me pop in and give a talk or codelab. Best of both world, if you ask me. :)

[@youssef.elmoumen]

@@filiphracek 💪❤️

[@peshalele951]

Hi. I finished the tutorial and wanted to go for the advanced version in the codelab. But when I clicked the link it brings me to DartPad but no advanced code. Any idea where can I find the advanced code?

[@Unohdus]

This was really helpful guide for someone new with Flutter. Thank you!

[@rubenfanucchi7347]

Thank you very much Filip, very clear tutorial!, I appreciate your time and efforts to put this together.

[@mohamedamer2552]

Really Nice bro. Thank you for this amazing tutorial.

[@kingswayhongkong]

Great video , having so much fun learning Flutters

[@yash1152]

19:31 how was that gradient put in the video? it looks nice :)

[@tingting-er8lr]

I followed the tutorial but i got bunch of errors... Im not 15:32 and on window... Target of URI doesn't exist: 'package:english_words/english_words.dart'. Try creating the file referenced by the URI, or try using a URI for a file that does exist. Target of URI doesn't exist: 'package:provider/provider.dart'. Try creating the file referenced by the URI, or try using a URI for a file that does exist. The method 'ChangeNotifierProvider' isn't defined for the type 'MyApp'. Try correcting the name to the name of an existing method, or defining a method named 'ChangeNotifierProvider'. Undefined name 'WordPair'. Try correcting the name to one that is defined, or defining the name. The method 'watch' isn't defined for the type 'BuildContext'. Try correcting the name to the name of an existing method, or defining a method named 'watch'. 'unnecessary_breaks' is not a recognized lint rule

[@kenonwillis6493]

try saving your pubspec.yaml file and also saving your analysis_option.yaml files. The main.dart file may not recognize the changes until you save those files

[@bestCoder1877]

i know html css js and c+ and I want to make apps so I am learning using this video thank you the the team that made flutter and filip

[@岸边钓月]

flutter is really the true choice for the devlopers who only want to write codes one time

[@justseyda]

watching this video was very enjoyable and informative, thank you Filip

[@chizobaugwuoke4889]

I can't watch this and keep mute. I'm screaming a big thank you to DW for a great work.

[@kevinwan7023]

Thanks for your sharing. There is the best training video.

[@Taggua]

Welcome back Filip ♥️

[@programinhas]

Man, the statefull widget has been a nightmare to me...until this codelab! Thanks

[@MiaomiaoShi-p6s]

Really enjoyed this. I came from native ios design.

[@BenjaminVestergaard]

I've done my share of cross compiling, working with microcontrollers and RTOS embedded platforms... reminding me that flutter will also work with my linux desktop is really something that speeds up development. It would, however be nice with a basic GUI designer like gtk, because even though flutter is quite straightforward to design by code, it feels like a lot of typing just for prototyping your layout, which can easily be automated. With .Net/C# or Delphi/Pascal you can design your layout in minutes and then start assigning actions to your buttons/widgets... makes it easier to assign the design phase to an actual UX designer, and then take over or assign the programming afterwards. Programmers are not necessarily good designers and vice versa.

[@AgathaPempho]

i had so much fun learning and doing this. thank you.

[@mkobuolys]

Waiting for the speed run version now, Filip! ✌️

[@HardcoreSuperNoob]

Man this is a good tutorial. Props my guy!

[@ergocardinal9585]

at 24:10 , if the widget rebuilds everytime the AppState changes, doesnt that make it a stateful widget? i'm still confused as to the difference between s stateful and a stateless widget.....

[@janoo85]

cool tutorial and prety beginerfriendly :)

[@noufdesu]

It was fun to build, thanks!

[@rajenderkatkuri7642]

We miss him on the Flutter team 🧑‍💻!!

[@yazzindev]

Thank you so much for the overview!

[@Diamnds10]

Unfortunately the link to the advanced version is broken (just lands on a "hello world" script) - do you have an archived copy somewhere else? Great tutorial by the way! Edit: I found a copy on the Wayback Machine, but I'll leave this comment here in case you want to update the link.

[@sg2_]

Thanks for the comment, I was looking the same.

[@KhanhFlutter]

@@sg2_ Hey, thanks for the heads up! I've flagged it with our team. In the meantime, if anyone's looking for the advanced version: dartpad.dev/?id=e7076b40fb17a0fa899f9f7a154a02e8

[@Btsarmy4life2931]

@@KhanhFlutter Thanks i was looking for Same

[@sonderbazz]

First off - great tutorial and codelab. 👏 Found a bug in the codelab though - or atleast I think it's a bug. On the 9th step you link to a advanced version of the app but the link takes us to a dartdev page which doesn't include the app in question. Hope you will fix the link. Thx.

[@sachindraragul1094]

That's a great video. Very easy to follow.

[@martingauthier9714]

Anyone knows what screencast app he’’s using to overlay in transparency his screen with. Looks great and makes it interesting to watch as well.

[@jeremarques]

Thank you so much for this tutorial!!

[@evelouiselissok5090]

Hey, das Video ist wirklich super. Nur komme ich bei min 38:13 nicht weiter. Bei mir ist einen Absatz zu machen leider nicht möglich. Evlt weis jmd wie man da vorgehen muss

[@chenmarkson7413]

I love how at 39:17 the background color of the video also "went blue", and the deep orange color of the button is actually the color of his shirt (noticeable at 52:12) 😂

[@johanperss1086]

EDIT: The advanced version link does not work, just links to a simple for loop!! Great tutorial, thank you so much! Please do more! You are very entertaining and insightful, great teacher. I failed at the custom favorites page and needed help because I never used .asLowerCase when "printing", which threw a error when I tried to "Text(pair)", because it said it cant be a string. I just assumed it would automatically utilize lower case format?

[@pablotorres_]

I am also trying to access the advanced version but it is not available.

[@lkvantaliani]

in one place you have to say "notify listeners" and then "watch". is it sound or visual. small details but why google is missing such details. why it's not just "listen" instead of "watch". then you have clear understanding what's going on. BTW a grate tutorial

[@adityaprakash5093]

Huge thank you for this tutorial!!!

[@benmatt8940]

Happy to see you again!

[@kevinkkirimii]

Very good introductory lesson

[@TheAIEmpires]

Thank you for the video, great style and tutorial

[@MarkPryor1]

I'm interested in making an app for Iphone and android phones. You say how important it is to know the target prior to installing anything. I couldn't watch this whole thing because it was painful to watch. ChatGPT suggested Flutter and Dart because it is easy to apply to many devices without the need to recode. Now I will have to dig more because what you said questions that.

[@serhiibulynin5613]

Thank you, man) I have been fun)

[@NomadicBrian]

This first app seemed to be more of a console app. I came in looking to go straight to mobile for android. Having used ionic with Angular, React and Vue I expected to get Flutter/Dart/Android with mobile controls and scripts. I guess I will have to start with a tutorial specific to my targeted platform.

[@LearnCraftStudios]

Hi! I try to run the debug mode but the pop up screen is not showing why is that? It says the flutter SDK is not valid open settings? I changed its path still the error was gone, but still the selected edge browser is not popping up.

[@LearnCraftStudios]

Nevermind I resolved it.. lol I chose the chrome browser instead of windows.. thank you

[@manipurihunabopa]

Filip you were right. Downloading, installing and environment setup is the hardest thing. I'm stuck and confused. Error after error.

[@SergeMatveenko]

Filip is back! Yay! :)

[@ChickenNoodle26]

Has anybody found the code for the "advanced" version of the app, would love to check it out, but as others have mentioned the link now contains something else.

[@mohamedkarim-p7j]

Thank for sharing👍

[@flutterIgnite]

Awesome tutorial as always

[@DennyFreak]

What a fun walkthrough. Thanks Filip & Flutter Team

[@RashmisABCD]

Beautifully presented this video, Success isn’t overnight. It’s when everyday you get a little better than the day before. It all adds up,, work hard for your dream, have a great day, lk

[@vrowmuria]

Nicely explained. It helped. Thnx!

[@rongjiushi]

This screencast is very cool. What app was used to achieve the zoom and transparency effects

[@hobertcooke2346]

Is there an updated version of this tutorial? I cant' use the first set of code provided I've got several errors that I'm not sure how to solve

[@anggaarifandi]

Filip is back!

[@francknguemete6823]

Thank you for this helpful course i very appreciate it, but the advanced version is not available

[@Bibolaw]

Really frustrated at 46:50 it definitely does not do that if you add a comma....

[@sushmitha_c7]

Can anyone please mention: which OS(iOS/Android/WEB/DESKTOP) he has used as a TARGET DEVICE in his project?

[@dallas-cole]

From my perspective Flutter is an elegant way of doing things more complicated. Learn React.

[@whitesites]

If anyone is having problems getting the Shortcut for Extract Widget in Windows. Put your Cursor on "Text", then CTRL + period.

[@abasilis]

I've been using Flutter for a while now, but I have not used State Management tools like Provider, Riverpod, etc. But I got confused with this project, by converting from StatelessWidget to StatefulWidget in order to use setState for the selected menu Icon to update its state. If we are using Provider in this project, why not using Provider(ChangeNotifierProvider with ChangeNotifier) to change the state of the selected menu icon?

[@joshua_dlima]

Thank you!! it was fun

[@gamedl7014]

I get error 403. That’s an error. Your client does not have permission to get URL /codelabs/flutter-codelab-first from this server. That’s all we know. any idea how can solve it?

[@tobiasbuiten6758]

When I change the text 'a random idea:' to something else and save it, it automatically changes the wordpair. The wordpair does not stay the same with me as it does with you when the text is changed and saved. Do you know how I can fix that? I am running the via Chrome by the way

[@Mirtguitar]

For some reasons the app didn't work properly on my VS. Is there an Android Studio version of this example?

[@HerrHafiz]

how to build my own custom words(in other language) library in this example?thanks