Building your first Flutter App - with a Codelab!

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 259

  • @flutterdev
    @flutterdev  Год назад +33

    Subscribe for the latest → goo.gle/FlutterYT

  • @durgeshanand6774
    @durgeshanand6774 10 месяцев назад +9

    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
    @MirkoRaimoViaggi Год назад +56

    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
      @filiphracek Год назад +14

      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
      @loqmanhaidarah2676 3 месяца назад

      @@filiphracek oh glade to see your account 😁

  • @inakisanchez2552
    @inakisanchez2552 5 месяцев назад +28

    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
      @vikhyat2038 4 месяца назад +4

      how did the interview go?

    • @riftriotmemes4963
      @riftriotmemes4963 4 месяца назад

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

    • @ahgpy
      @ahgpy 4 месяца назад

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

    • @inakisanchez2552
      @inakisanchez2552 3 месяца назад

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

    • @inakisanchez2552
      @inakisanchez2552 3 месяца назад

      @@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
    @autozone5335 Год назад +52

    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!

  • @andrealmeida6122
    @andrealmeida6122 9 месяцев назад +5

    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.

  • @DominusZeikyu
    @DominusZeikyu Год назад +9

    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!

  • @bawagrafix
    @bawagrafix 3 месяца назад +1

    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.

  • @my_wave_app
    @my_wave_app 5 месяцев назад +1

    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 RUclips and this channel!

  • @LiamTerblanche
    @LiamTerblanche Месяц назад +1

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

  • @TheShinayser
    @TheShinayser Год назад +50

    Wait what? Is he back?

    • @youssef.elmoumen
      @youssef.elmoumen Год назад +1

      Sadly no😢😢

    • @atmega3212
      @atmega3212 Год назад +7

      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
      @Coopervise Год назад +1

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

    • @filiphracek
      @filiphracek Год назад +43

      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
      @youssef.elmoumen Год назад +6

      @@filiphracek 💪❤️

  • @peshalele951
    @peshalele951 Год назад +7

    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?

  • @岸边钓月
    @岸边钓月 4 месяца назад +1

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

  • @thatwasamazing2791
    @thatwasamazing2791 Год назад +19

    We've missed you Filip 🔥🔥

    • @filiphracek
      @filiphracek Год назад +10

      Aww. Thanks! I'm still around, of course. But I'm also super happy about the current team and their work here on RUclips. 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
      @thatwasamazing2791 Год назад +1

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

  • @TheVerbalAxiom
    @TheVerbalAxiom 6 месяцев назад

    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!

  • @mlcalache
    @mlcalache 3 месяца назад +1

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

  • @christiancolewan
    @christiancolewan 8 месяцев назад

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

  • @tingtingcao8150
    @tingtingcao8150 9 месяцев назад

    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. 😊

  • @programinhas
    @programinhas 6 месяцев назад

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

  • @twofishonechips9792
    @twofishonechips9792 Год назад +5

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

  • @130n45
    @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!

  • @bestCoder1877
    @bestCoder1877 6 месяцев назад +1

    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

  • @killercat50y
    @killercat50y 9 месяцев назад

    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!

  • @daeyoungkim4971
    @daeyoungkim4971 Год назад +1

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

  • @harleyma5871
    @harleyma5871 Год назад +1

    Thank you, my English has improved a lot!

  • @loqmanhaidarah2676
    @loqmanhaidarah2676 3 месяца назад

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

  • @asumahyakubu6177
    @asumahyakubu6177 Год назад +1

    Welcome back Filip, we really miss you 😍😍

  • @chizobaugwuoke4889
    @chizobaugwuoke4889 Год назад

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

  • @aditya.kulkarni
    @aditya.kulkarni Год назад +3

    He’s back on channel! 🎉

  • @haraldhonk4650
    @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
      @varun-px8gs 7 месяцев назад

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

  • @merahputih368
    @merahputih368 Год назад

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

  • @twokrangs
    @twokrangs 4 месяца назад

    Thank you, your videos are a pleasure to watch!

  • @BenjaminVestergaard
    @BenjaminVestergaard 4 месяца назад

    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.

  • @HunaBopa
    @HunaBopa Год назад

    Happy to be a part of Flutter community

  • @rajenderkatkuri7642
    @rajenderkatkuri7642 Год назад +7

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

  • @LearnCraftStudios
    @LearnCraftStudios 8 месяцев назад +1

    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
      @LearnCraftStudios 8 месяцев назад

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

  • @karimmahari3166
    @karimmahari3166 5 месяцев назад

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

  • @sonderbazz
    @sonderbazz Год назад +3

    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.

  • @johnnywest5445
    @johnnywest5445 Год назад +1

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

  • @merwx2010
    @merwx2010 Год назад +1

    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

  • @mohamedamer2552
    @mohamedamer2552 Месяц назад

    Really Nice bro. Thank you for this amazing tutorial.

  • @MiaomiaoShi-p6s
    @MiaomiaoShi-p6s 7 месяцев назад

    Really enjoyed this. I came from native ios design.

  • @ariyoayodejiifeoluwa65
    @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.

  • @johanperss1086
    @johanperss1086 Год назад +2

    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_
      @pablotorres_ Год назад +2

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

  • @pranav-io6vo
    @pranav-io6vo Год назад +3

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

    • @fabiano8888
      @fabiano8888 Год назад

      Thank you!

    • @whitesites
      @whitesites 3 месяца назад

      Even with that I still missing the Extract Widget Option

  • @kingswayhongkong
    @kingswayhongkong 7 месяцев назад

    Great video , having so much fun learning Flutters

  • @tingting-er8lr
    @tingting-er8lr Год назад +2

    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
      @kenonwillis6493 4 месяца назад

      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

  • @rubenfanucchi7347
    @rubenfanucchi7347 Год назад

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

  • @chenmarkson7413
    @chenmarkson7413 10 месяцев назад

    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) 😂

  • @swrrelio
    @swrrelio 4 месяца назад

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

  • @mkobuolys
    @mkobuolys Год назад +5

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

  • @Diamnds10
    @Diamnds10 Год назад +7

    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_
      @sg2_ Год назад

      Thanks for the comment, I was looking the same.

    • @KhanhFlutter
      @KhanhFlutter Год назад +11

      @@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
      @Btsarmy4life2931 Год назад +2

      @@KhanhFlutter Thanks i was looking for Same

    • @mattlongname
      @mattlongname Год назад +1

      @@KhanhFlutter saves the day!

  • @Unohdus
    @Unohdus Год назад

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

  • @cesarcmc
    @cesarcmc Год назад

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

  • @teknerds
    @teknerds 10 месяцев назад

    I'd expect better video quality, he should be on a tiny window at one of the corners of the screen with high fidelity of the content clearly made visible, but kudos for putting out a lesson on the topic

  • @NomadicBrian
    @NomadicBrian 8 месяцев назад

    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.

  • @martingauthier9714
    @martingauthier9714 6 месяцев назад

    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.

  • @kevinwan7023
    @kevinwan7023 7 месяцев назад

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

  • @lkvantaliani
    @lkvantaliani 10 месяцев назад

    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

  • @mohamedkarim-p7j
    @mohamedkarim-p7j Месяц назад +1

    Thank for sharing👍

  • @manipurihunabopa
    @manipurihunabopa Год назад

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

  • @dallas-cole
    @dallas-cole Год назад +1

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

  • @yash1152
    @yash1152 Год назад +2

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

  • @HardcoreSuperNoob
    @HardcoreSuperNoob Год назад

    Man this is a good tutorial. Props my guy!

  • @ChickenNoodle26
    @ChickenNoodle26 Год назад +1

    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.

  • @lexerquine3008
    @lexerquine3008 10 месяцев назад

    what a nice dude, i should say some stuff is a bit (tiny bit) different now to the video and even the doc but yeah i will try it and see if its a good option to add to my frontend skill ( which i hate what is wrong with the terminal? who needs gui?? let me be with my laravel and api and wrapper....)

  • @MarkPryor1
    @MarkPryor1 4 месяца назад

    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.

  • @AgathaPempho
    @AgathaPempho Год назад

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

  • @noufdesu
    @noufdesu 10 месяцев назад

    It was fun to build, thanks!

  • @Taggua
    @Taggua Год назад +1

    Welcome back Filip ♥️

  • @The_stoic_minset
    @The_stoic_minset Год назад +3

    I feel like copy pasting it and not feel like learning.

    • @Vichion
      @Vichion Год назад

      Thank you! I experience it the exact same way, it's tutorial hell.

  • @francknguemete6823
    @francknguemete6823 Год назад

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

  • @yazzindev
    @yazzindev Год назад

    Thank you so much for the overview!

  • @RashmisABCD
    @RashmisABCD 7 месяцев назад

    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

  • @sushmitha_c7
    @sushmitha_c7 2 месяца назад

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

  • @anggaarifandi
    @anggaarifandi Год назад

    Filip is back!

  • @jeremarques
    @jeremarques 9 месяцев назад

    Thank you so much for this tutorial!!

  • @kevinkkirimii
    @kevinkkirimii Год назад

    Very good introductory lesson

  • @sachindraragul1094
    @sachindraragul1094 Год назад

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

  • @TheAIEmpires
    @TheAIEmpires Год назад

    Thank you for the video, great style and tutorial

  • @ParinyaTeerakasemsuk
    @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.

  • @whitesites
    @whitesites 3 месяца назад

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

  • @evelouiselissok5090
    @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

  • @王新-f3x
    @王新-f3x 9 месяцев назад

    I hope to have more Chinese subtitles, which can help me learn more easily

  • @rongjiushi
    @rongjiushi 11 месяцев назад

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

  • @thefamousdjx
    @thefamousdjx Год назад

    Wow been struggling for hours with just running the default app and getting all sorts of errors and it couldnt run. I didnt know we always have to update the pubspec smh

  • @abasilis
    @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?

  • @victorcardozo7153
    @victorcardozo7153 Год назад

    Esse cara é Brasileiro, não tenho dúvidas

  • @SergeMatveenko
    @SergeMatveenko Год назад

    Filip is back! Yay! :)

  • @DennyFreak
    @DennyFreak Год назад

    What a fun walkthrough. Thanks Filip & Flutter Team

  • @adityaprakash5093
    @adityaprakash5093 Год назад

    Huge thank you for this tutorial!!!

  • @vrowmuria
    @vrowmuria Год назад

    Nicely explained. It helped. Thnx!

  • @gamedl7014
    @gamedl7014 29 дней назад

    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?

  • @flutterIgnite
    @flutterIgnite Год назад

    Awesome tutorial as always

  • @yeri_pratama
    @yeri_pratama Год назад

    Hi, thanks for the codelabs!
    Just a random question, I really like the font you use in the vscode editor, which one is it?

  • @maurice_chateau
    @maurice_chateau Год назад

    I'm learning flutter for a University subject but we are using another version of Dart that's not compatible for this Codelab. 😢

  • @codewithshaxi
    @codewithshaxi 2 месяца назад

    I am new to Flutter. Can you tell me how to fix the Gradle task assembledebug error because when I run flutter app on chrome then it's working but when I run on my real android device then it gives an error. How to solve the error?

  • @messido336
    @messido336 Год назад

    i just started flutter dev , do i need to learn dart programmin language completely? or can i continue learning flutter and i will learn dart on the way?

  • @benmatt8940
    @benmatt8940 Год назад

    Happy to see you again!

  • @HerrHafiz
    @HerrHafiz Год назад

    my first tutorial with flutter! congrats me!