30 Days of Flutter - Kick Off - #30DaysOfFlutter

[Music] hello hello i think we're hello there we go that's better scott you muted the the the uh phrase of the phrase of the year right you are muted hey everyone welcome right after there's a widget for that right so uh we're gonna be introducing a few people uh but first uh we have some guidelines to go through and some points and we'll introduce ourselves um so let's get started so uh my name is simon lightfoot i'm a community leader and also cto at dev angels in london we're a small developer agency at scott i am scott stahl i am a also a community leader and organizer of gdg cleveland which is a google developer group yeah it's kind of like a meetup group but better because we get pizza from google [Laughter] and hello from my side my name is majid hajian a community leader and a google developer expert for flutter and i'd like to actually welcome everyone my new friend old friend karen friend everyone now in the stream and to this live stream before we start uh simon let me mention our code of conduct first so that's this is our tradition before starting any events we mention a few points which is basically saying be nice to each other and and that's it and i'm i i know that all of you are we just try to mention it once more and with that said so we'd like to tell you what do we have for you today right simon and scott most definitely so let's bring us back on the screen here so we we've we've kind of been working on a schedule um which if i find it that'd be great so um so first of all um we would like to to we'll be introducing some members of the flutter team and they can introduce you about the event as a whole and then we'll be speaking to kate lovett about why it's flutter and a bit more we'll go for a bit more detail then scott what do we have after that well let's see here after kate we also have an introduction to community resources what the flutter community can do for you and then we also have the flutteristas as our special guests whoa whoa whoa yeah we're having coffee with the flutteristas then we're going to have a little bit of a break and then tomek and nash are going to walk people through a number of resources that we have for this and last but not least simon is going to do the obligatory live coding disaster yeah we're going to tell you something while he shows you how to install flutter whoa so i think we forgot one one thing simon though and we've got we have two amazing people from google neloy and nikita on the screen yeah yeah please yeah yeah yes um go ahead well everyone knows nelai and none of us would be here without nikita hi hi oh one sec all right am i still echoing am i good you're good okay hi everyone okay sorry hello hello hi oh my god this is so exciting we are so excited to have you we are so excited to have you here and uh i think a lot of people are i see the number here it's so nice and yes i think they are impatient waiting for you to tell about this 30 days of water what it is let us know please we'll leave you to it yes of course i think nikita tell us okay i hope i'm audible now because i'm wearing my headsets um so hello everyone i have one more person joining with me today that's my friend dan hey hi so uh you all know nilay but uh a brief introduction about myself i'm nikita and i manage the gdg program in india and just like you i really really love flutter and hence i coordinated with many folks at the flutter team and the flutter community to plan a journey that can help you as beginners or app developers hailing from different tech start tech stacks to get started with flattop and just like simon mentioned i'm honestly overwhelmed with the response maybe it's start of the week for someone while it's end of the day for many of us in asia and other continents but i'm really really thankful for everyone who joined us today uh if you're worried what's there for you next um just hold on uh there are ample of them who are going to share what's next for you uh so stay tuned with us there's plenty of content that's curated for you and to support you to get started with flutter and if you're stuck somewhere do not worry there are flutter gdes and other community enthusiasts who are ready to help you as much as they can um well speaking about help uh i think nilay has something more to add so over to you nilay yeah of course thank you nikita and hi everyone my name is nilai and i work in the flutter team at google and i work with nikita on this 30 days of flutter thing actually nikita did this before for 30 days of google cloud 30 days of kotlin and she's like oh i love vladimir and let's do this for fun and i was like okay why not let's do that so i joined a full other team three years ago and it was also when the flutter was just like going out it was a new technology and when i joined the team three years ago the things the questions we are getting from the community is that okay what is this water thing or why or like why this now and after three years right now like so of course so many companies and startup and developers started using flutter and of course kate is going to tell you about what flutter is if you don't know but three years later the things i am hearing from the communities right now hey we are looking for a flutter developer someone shared on twitter like there are over like 5 000 job openings a bit flutter on linkedin right now if you go and search just it's a lot and it's like okay how like we should get more new flooded developers and feel this fill this gap right and this is why we decided to do this 30 days of flutter and it's like okay let's go back to three years ago what we did before let's start from the beginning because there are a lot of awesome people like you who they want to learn flutter and let's do this together and think this 30 days is on not just learning flutter itself but this is also an introduction to flutters all communities and places that you can get help the places that you can ask your questions or places that you can help other people because full other is a really great technology it makes your life much easier to build applications but also flood this community is really amazing that everyone is really eager to help you simon can i get the slide please on this screen so you will see in a second that there are already so many people are starting their own things to help you um like the local flutter meetup groups they started their own local study groups if i can get it on the screen or there are people who is just like who posted on twitter hey i'm a flutter gd and i am here to help you my dm is open so it is also important to learn how to find help when you need help because you know when learning things things won't be great it won't be easy sometimes uh okay they say you don't have slides okay it's like uh that's fine um uh you know this is livestream it happens so if you go to twitter and search for 30 days of flutter hashtag you will see a lot of people posted oh we have this spanish-speaking community local community and this is we have a study group for 30 days of full other join us or that our gda say my dm's are open help us or that are full of restaurants they are like hey we are here to help you so it is important to find out those places as well so you can get help when you need when you need also you know that like things are different right now right this year and last year like i i want to talk about the happy things but we are not able to do the things uh no this is not the slide but it's fine it's okay we can we can take that it is fine um so we are not able to do the things that we have been doing in the past but on the other hand there are like so many things available like there is this new netflix show or there is this new cooking class or this isn't a yoga class like it's like okay it's so hard to stick with something and this is why it's like we have this 30 days of flutter challenge and just keep it simple we are sharing some content with you every week and just study with that just one hour every day just spend one hour every day and let us know how it goes and there are a lot of people to help you and i want to share one last thing is that i i've never done yoga in in my life before and i'm not really a workout person but my friend told me that hey nilai let's start with this 30 days of yoga thing and then i was like okay and every day we are messaging each other and saying that hey i've done today oh yeah great awesome okay i'm doing mine let's do it so we are really motivating each other um so this is why if you need help or if you need someone um find that help in those local communities or share with us on twitter share with us what you did today or if you need help or if you are willing to have and yes this is the slice and you will see a lot of people in the community already creating uh created a lot of great things for you and we didn't ask for this this is really the beauty of the flooded community for example farida created a 30 days of calendar that you can use to mark every day or the philippines community they created their own uh philippine special 30 days of flutter study group next slide you can make a show of the next slide and you see the spanish for other spanish community they created a channel on their slack for just like spanish-speaking people who are in this challenge or take scare and next slide please and then our gdes or individual community members everyone is here to help you so and it's okay if you can't uh do one hour today or tomorrow but come back tomorrow because like this is uh this is this is will this will be awesome with uh all of us here so we are here to help and in this 30 days you will have you will receive a content every week and then what we ask is just spend one hour every day study that content read the docs watch the videos uh or do the code labs and then but if you also have your own study materials it is fine it is just just spend one hour with either that materials or the ones we send and we are so excited to see what's what's gonna happening in at the end of 30 days so thank you for joining us thank you very much how uh for the lovely introduction i must say that we have a hashtag which is up here somewhere feel free to use it in all your social media yeah and um i also need did you say the the the registrations are now open again oh yes okay that's the surprise for all everyone here who is watching the live stream so we closed the forum registration last night but we got a lot of message hey i want to join so just for you today the form is open again if you go to website you will see it you will still have one day to register and we are for sure closing it tomorrow okay um thank you for joining us by the way and uh we'll hope to see you back on the stream again okay thank you thank you thank you very much bye everyone good luck everyone bye very nice uh i think i'm very excited simon scott just think of it one month of flutter and people are going to going to do a lot of things and at the end of the month probably we'll see a lot of amazing apps i i i think depending on the content we might see if we can get some screenshots and get them on the on the closing ceremony the very final thing show us what people have been doing absolutely definitely and i you know if you run out of ideas just take a look at dribble or any of the other sites where designers put up their portfolios and it will get you some inspiration you know you can absolutely take a look find something you want to make and do not forget about the hashtag and if you need more content subscribe there yes actually in the description there's a link to the event page where you can find uh we will actually right now on the third tab is um resources content resources tab where you'll find lots more information and links to more content and we'll be going through that later on in the stream so uh we have another guest from the flutter team uh kate will you join us please drop roll hey hello kate hello good to see you all thanks for having me look at that look at that beanie i'm so jealous yeah it's actually uh it's snowing here where i am i'm not sure if it's knowing where you all are yeah the the first day of 30 days of flutter coincides with the snow day coincidence i think not you know i'm ready to stay inside and uh all day um just happy to be here it's great to have you nice so um we wanted to find out a bit more about you know what it what is flutter um kind of for the beginners what is flutter what can it be used for yeah that's that's a really great place to start and of course i i can tell you right off the top of my head that flutter is an open source ui toolkit that makes beautiful easy fast apps uh that are natively compiled that can run on multiple platforms from android and ios to the web and we're even you know rolling out more and more desktop features as we go every day uh being open source you know we are on github and we are completely out in the open so uh anyone can contribute if uh you know they go through all of our processes for becoming a contributor to flutter uh i personally love being the the welcome wagon for new contributors to flutter um and really what what does all that mean i'm gonna see if i can break it down even a little bit more simply i've been working on flutter for two years now uh as of a couple weeks ago and before that uh i was actually finishing up all right i didn't i met you over in there just before google didn't i last year yeah yeah you just joined yeah yeah yeah um and just before i joined the flutter team i was finishing up my degree in computer science um and i was working as an ios developer uh for for my university i know i was working on a legacy code base in objective c with new features coming in in swift uh and we had a parallel team working on the android version of the application and it's difficult uh you know for the very common place in the industry yeah yeah uh i first studied graphic design and so when i started getting into uh computer science i couldn't wait to find out how do i actually make these apps how do i actually put these elements together like i love talking about algorithms and data structures and finding elegant efficient solutions and that's all great but how do i actually make something that people are going to use and they're going to see and they're going to enjoy um and whether you were painting with python or objective c or a little bit of swift it was complicated and difficult and you know if you're going to try storyboards uh i mean it's been a while since i've done it uh but back when i used to use storyboards developing with ios if you don't have enough ram you're gonna have a whole lot of grief um it just reminds me as well like i'm sorry to talk to that point like you know i used to do android for like 10 years and when you're doing android uh there's certain there's ways the the operating system works and behaviors that you have to learn as a developer right so so just the ways you go around development has to be sort of pre-prescribed and it has so much legacy right so like you know you're dealing with things are in the platform since version one still and that's the thing that really breaks my heart and that it's as an operating system they have a obligation shot but as a ui talk here with flutter we can ship a new version of flutter with each release of an application meaning that we really do get the latest and greatest and we're not having to keep the compatibility so much with the very first versions of the system yeah and and the the fact that it's so easy to kind of put a ui together you know um i could i i could sit down and and spend about an hour putting together a really simple ui in in ios but in the same amount of time i could probably put together the the simple skeleton for a whole application and flutter you know putting together widgets is just so simple and easy that you know i think the first time that i sat down to use flutter and start learning flutter i was shocked that like oh you want an app bar you just you just create an app you just use the app bar widget and i'm pretty sure that i'm hoping at least i'm really hoping that people the new the new beginner flutter developers that just joined they've never tried it before they're going to experience that hot reload the hobby start and just fall in love straight away because it is so brilliant when making your eyes just just turning around and making incremental changes oh yeah absolutely and and for me it was like oh this is a dream come true i've always wanted to like just have a really simple easy experience you know connecting all the pieces together and creating an experience for users um and it it's it's easy and it's wonderful and the fact that you know you're working with a single code base that runs on multiple platforms means the other thing that i would experience when i was an ios developer were these um kind of reconciliation meetings where the ios team and android team would get together and we kind of see what we came up with and try and reconcile and and try and make sure we're providing the same the same ui the same experience for our users and um you know there's always little deviations that happen and you have to go back to the drawing board and make changes and none of that is needed with flutter because it's all the same code base absolutely it's also something i feel is inherently just easier i mean even if even in in a native platform if you had to redo some widgets or rechange some structure you have to change so much code under the hood that would link to the ui and to manage it so whereas with the with the flutters decorative ui system you just make your changes and your eyes changed it's it seems so much more direct yeah can i ask a question okay oh yeah um a lot of our people a lot of people that are watching us right now probably they are newcomers to the community which we welcome them very warm and they may ask right now they may want to know like uh if they want to start like you said lottery is very easy and we know we love it absolutely so how can they start and you pointed out about contribution so maybe you should also tell them how they can even start contributing if they want to contribute how you know so maybe you should tell a little bit about that okay well there are a lot of different ways to contribute to flutter uh one of which is you know just filing an issue if there's a feature that you think is is missing or lacking or a bug that you come across i hope not um then going to github and filing an issue in the flutter photo repository is incredibly helpful you know we usually ask for a reproducible code sample so we can see what's going on and and you know an understanding of which you know flutter version you're using um but this is also something else i i did want to say about flutter is that since we're out in the open the feedback that we get from the community and when you join the community i hope that you participate in in this is invaluable um there were some big features that i landed just before the holidays in december uh and i landed them on a friday and on monday morning i had actionable feedback from the community who had already started using it and discovered you know hey have you thought about this or this configuration and i was able to make the feature even better before it even made it to like a stable release so feedback is a great way to contribute to flutter [Music] uh one little thing sure file issues but search the issues first don't make new issues if there's already existing issues for these things so search and if you find one put either thumbs up to the very first comment the the the description of the issue ticket because that will allow the faculty to know which ones we'd find more important as a community to get fixed first and you will not be the lucky 25th person to file the same issue you will not win a prize yes yes that that that is also a very very good asterisk right there on the end uh we do have uh some folks that try and help us manage our issue database and dedupe and and make sure our votes get uh to the right place but also scott mentioned documentation that's also my second favorite um gateway contribution uh method that i like to tell people about um it's how i started um because contributing to open source uh you know on github or or wherever can be really really intimidating you know and and for me personally when i first thought about you know contributing to open source code i was like well who's gonna want my code um so writing sample code or improving our documentation is incredibly low risk you don't have to worry about breaking anything you don't have to worry about you know adding a bug or or a feature that won't work uh you can just write a little bit of documentation that makes something a little bit clearer if if you found that the documentation wasn't super understandable or you could write a snippet of sample code that shows how a widget works and if you look in the code base we actually have a little embed tags that actually puts the sample code into interactive dart pads in the api docs um and in november they had an adopt-a-widget campaign where they did a lot of these uh samples i was gonna ask what the result was of that because i heard like they all they all got adopted really quickly yeah yeah i think i think i'm not sure how many they had to start but they had like a a list of ones that folks could adopt um and within i think the first day or two all of them were gone um and it really took off and we're still getting adopt-a-widget uh pull requests um it's kind of become this persisting thing where people will label them adopt a widget and uh and and it's great because these are things that folks come across when they are looking at our documentation and they use these tools to learn how to use flutter so that's another great way to get started contributing another contribution that button in the top right for like see the documentation source code you can just submit a pull request right there edit if there's a spend a mistake or some issue fix it submit a pr straight from within github no problems and another thing too what you were saying the tools for people to learn one thing i found invaluable when teaching workshops is the fact that you can use dart pad combined with gists in order to set up a uh sorry a flutter ui on dart pad and also by combining a test file with a main file this is for some of you more advanced folks you can hide the stuff that your students don't need to see and put in maine all the things they do need to see which what this really does for you beginners it lets you try out flutter without ever installing it you can go over the dart pad and fire it up with a flutter ui and start playing around right there correct uh one more question uh but before that let me also mention we talked about dart pad we i think beginner should know that they can also try uh flutter on codepen so they don't need to install anything they can just go to codepen and try it out that's amazing one more question i have personally actually um it's nice to know like as a software engineer who is working on flutter which feature of flutter do you like the most wow that's a really hard question yeah yeah like like but but at the same time i feel like i should have like an answer ready for that um gosh uh i would have to say uh hot reload uh but actually no no i'm gonna take it one step further i'm gonna say heart hot restart uh because hot reload gets gets all the shine and sparkle uh which which is fantastic because it is wicked fast uh but if you're working with a really complicated app and there's lots of state going on and and you want to make sure that you know you get everything especially with animations and stuff like that hot restart is just as mind-blowing and it starts you right over from the beginning and and it's just ah it's i can't sing it enough praises but i think everybody knows that and if you didn't first if you have not heard about hot reload and hard restart you'll see at least by enough today so i think i mean we don't want to run behind schedule but i love i love the chat we've had um i'm sure we'll be hearing from you again at some point and thank you for joining us of course thank you so much for having me have fun on your 30 days and hey they can always go a little bit longer than 30. yeah right have fun everyone yes thank you very much thanks kate see ya hi so scott i think me and majid are going to leave you so you can get started on the next segment um i do want to just mention though that we have got coming up an installation guide we'll walk you through installing flutter and we'll also get you going on the first code lab so stick with us and we're just going to go for some community stuff and then we'll be back on i really appreciate that it's going to help me out quite a bit good luck thank you thank you alrighty what we've got coming up next is a little bit of an intro into some of the things that can help you as flutter developers we all get stuck we all need to know where to turn we all sometimes want to look around and see what's new and flutter community has spent the last three years building a collection of resources and a support structure that is second to none so with all this i'd like to introduce a few folks here jay hi there jay runs our flutter community github then we have nash nash runs the medium hello mark is one of the people who whips reddit in the line hello groovin chip hey hey there hi right here from the discord and one of the original flutter gdes randall schwartz hey everybody welcome randall thanks for coming on the stream yeah thank you so we have all these different resources for people to work with flutter now one of them i'll just blow my own horn and get out of the way here but a while back we realized that it would be beneficial for the flutter community as a whole worldwide to have a slack so we created the flutter community slack you can get to it from flutter.dev forward slash community in fact you can get to all these things from right there okay not from randall but what's below further down further down yes yes thank you for passing that along but flutter.dev community is where you can find all these things you'll find a link to the slack and you can also find links to great things like well what that guy's doing yeah um so hi everybody uh i'm jay um and uh at uh the flutter community i run the github that we have um so the github has a couple different facets to it um but mainly we have a uh a community organization uh the flutter community organization that you can visit right now um and what we do is we collect packages that are made by the community so by people like you and me um and the lovely people on this call and we collect them and make sure that they're easy to find and in one place uh now that's not the only thing that we do one problem that we see in a lot of open source uh uh repositories and projects in general is that multiple people will try to solve the same thing and so you'll have multiple packages that all try to do the same thing in different ways and one will break and the other is incompatible stuff like that they won't get updated um and now that really bothered us so what we try to do is um we collect packages that the community makes and then we put them all in the community repository and we make sure that they keep being maintained and that there is a standard of code quality to them not just that if a maintainer at some point thinks like hey i don't really want to maintain this package anymore then we put it up for adoption just like the flutter team did so yeah oh there you go um so um yeah just like that we we put it up for adoption so that uh so that another maintainer can take over make sure it gets updated and it has a steady release date and all that issues are getting handled properly um and yeah i mainly manage that uh together with some other lovely people so yeah that's what i do uh so please check it out at some point if you want to at fluttercommunity.dev github you can read everything there and see a list of all our packages all righty well hey why don't we just keep on passing it right down the line we'll go over jay to nash nash you have been spearheading the medium for a long time now so what's going on there and uh tell us a little bit about it now apparently nash's camera froze didn't ash freeze his wi-fi just died okay i got a message from him okay so we're going to skip right now to randall now randall um fortunately i have other ways of getting messages from nash sometimes in the middle of the night but anyway randall uh i have it on good authority that you might be familiar with a book that came out a long time ago called beginning pearl programming pearl but yes programming pearl yes so because and the reason that i bring that up back around october 2017 you and i were having a conversation and you told me that when pearl came out you had a feeling about it right and then you were going on to what you felt about flutter yes yes so when pearl first came out it was solving a lot of problems for me and that worked really well i stayed really intensely with it with the community i still am sort of uh slightly on the fringe of the community but still tracking that really well but the key thing is is that you know i heard about dart 10 years ago started playing with a little bit or whatever it was ten nine years ago forget now and then flutter came along and i went oh my goodness this is amazing because within a few hours of me discovering it i had an app on my phone and i had not any intention of learning all the stuff it takes to do the vendor tools for my phone that just seemed like way too much to learn but i had an app on my phone written in flutter within a few hours of discovering this stuff and i was excited about it i think this has legs i have been committing at least an hour or two a day i've got to tell you making my rounds so uh just to let you all know that you can get questions answered 24 by seven uh you we're going to talk about the the getter channel for this we're going to talk about uh how you can post questions to stack overflow with a dart or flutter tag there's about 150 questions a day coming through that channel reddit has some subreddits that are really good if i'm reading all those i'm answering as many of those as i can but also by answering the questions i'm learning even more so my knowledge keeps going up faster and faster i'm also doing my own screencast we'll have the link to that somewhere else um but this this is exciting for me this is in fact a whole new arena and i if it comes out anywhere as good as pearl did which uh some of you will pooh but that's okay uh i don't mind um clutter is amazing and the more platforms it ends up on the fancier it gets the more the guys at google headquarters keep breaking it down and i also want to uh follow up that the what kate said about issues was great uh you can you can contribute to flutter you can read the stuff that's there you can contribute to the packages that are available in pub which we'll talk about shortly um it's so amazing it's such a wonderful community but yes we are there for you we have answers for questions and uh 24x7 awesome hey one other thing i want to point out real quick before we keep going i noticed somebody asking in the chat about t-shirts please remember i i don't work for google neither do any of these guys okay we are with the flutter community the reason i've got the really cool shirts is because there are nice people at google who kind of like you know slip them to me out the back door but all right before we lose them again nash yes has been working on the medium again uh for what about three years now yeah there abouts so um it wouldn't be live if someone didn't have internet problems so unfortunately i'm that person today um so uh the photo community medium is really great uh so we started it in 2018 june 2018 so about three years now and there is content there from everything from design to backend to advanced flutter beginner content and it's really a repository of really great articles written by members of the community over the last three years on pretty much everything flutter related so during this time during this month you can go over to medium.com flutter hyphen community and check out our getting started page which has a lot of curated beginner content to help you get up and running with flutter and if you're in more advanced developers there's over a thousand articles in there so there's something in medium for everyone so go on over check it out and we hope that you learned something um with one of the articles that we've written so i'm going to pass i'm going to keep this going before my internet dies again and i'm going to pass this over to uh mark mark yeah thanks nice um so i'm just going to give a brief introduction into reddit i'm sure a lot of people have heard of reddit and what exactly it is um scott i've been trying to tell you for a long time to head over to the reddit.com maybe i'll convince you sometime but the great thing about reddit and especially the flutter community on reddit is that we have over 60 000 developers who are constantly posting new content every single day and this content is extremely useful um whether it's for new developers or it's the seasoned veterans and the type of content you can expect to see there would be newsletters such as the flutter force or it could be the flutter developer weekly but not only that you can find yourself uh seeing links towards uh really useful flutter youtubers and i know for example um generic typing has been featured there before jay so that was actually how you discovered jay's content on the very start and it was thanks to reddit and and this is the thing i try and drills everyone is if you're new to flutter or if you your seasons you know you have to share content there or you just learn from there it's just an excellent resource um but not only that i i always encourage people if they've got like a brand new package one of the best things they can do to get an eyes and get flutter developers using it is to share it to reddit and you know it just gets people talking about it and also using it and giving feedback which is excellent um but yeah what i want to say to everyone is you know you have to check out reddit and what you're really waiting for just head over there reddit.com flutterdev alrighty chip hey so i would leave you i'll be i'll try to be really brief uh given that i'm last here um so i co-moderate uh the flutter dev discord group as well as the um the flutter dev subreddit um it is a really great group i actually got started um with the discord group you know after google i of 2018 i saw talk on flutter and i went to search on reddit for flutter found the flutter dev subreddit john went to the discord from the sidebar and uh it's history from there i've been working with flutter just about every day since then i'm now working as a flutter developer full-time wonderful community very supportive i learned so much from that group um and i'll just briefly mention as well that uh the flutter dev subreddit has a sort of sister subreddit called flutter help which is where beginners and people can ask questions uh specifically for asking questions and getting answers um the flutter dev subreddit is a little bit more for general content and discussion um so uh yeah i'll uh i'll pass it off well hey thanks a lot for all that chip um a couple other things too to let you know is there are some people who have not been able to be with us today and they do fantastic work on youtube one of them you can look them up on youtube as mtech viral pawan pk does awesome content and another one that is great for the arab world especially learning dart and i know i'm going to ruin his name here but his name is ralph rashid and i really don't think i got that right but in english his name is r-a-o-u-f-r-a-h-i-c-h-e already well hey thanks guys for all of that and now we are going to shuffle people around a little bit backstage and uh we are about to start coffee with the flutteristas there we go oop this is what happens when you have two people adding now daniella rona and the wall enjoy yourselves and take it away awesome hello everyone and welcome to the 30 days flutter challenge event we're so glad to have you with us tonight today we have rona danielle and first me to chat about the futuristics while having our coffee so let's start off with rona rona could you please introduce yourself and your experience with the photoresponse sure uh my name is rona and i've been building with flutter for the last two plus years i heard about and joined the flutters in early 2019 but we've actually been around since 2018 we are a group for folks who identify as female or non-binary and obviously you have to have a passion for flutter so i identify as female and i have a passion for flutter so flutteristas spoke to me and i i wanted to get in on that fun awesome thank you so much rona i'd like to have now danielle as well to introduce herself and to talk about her experience as being one of the organizers and fathers hi sure well we were actually created by a uh a ghouler as as as a being a safe or comfortable place for uh you know women and non-binary folk to get together and it's turned out to be that because i think most of us that fall in that category find ourselves usually the only one in the room like that so we've done that and with the flutteristas i've been a member since i i've learned about flutter which was january of uh 2019 almost two years i guess a little over two years now um but real quickly what we do is we have a slack channel where you can kind of have our own little group of smaller you know smaller group of people that we talk with and stuff like that um you can ask questions you can share your triumphs things like that we have monthly meetups with uh usually with googler like like kate has done one before our last one was one of the devrel and he was talking about the animations with flutter and we are working toward our conference on march 27th um so that's gonna be great it's gonna be uh run by flutters and uh we hope it'll be a great experience for everybody you don't have to be a flutter easter to attend and we hope that you will um we have an email for you to join i will put that up on the screen in a little bit but that's flutteristas f-l-u-t-t-e-r-i-s-t-a-s gmail.com and now i'd like to kind of kick it back to nawal and ask her you know why why did you join florestas you're a muted noise well here we go again okay thanks danielle i'm currently working on a flutter project that focuses on delivering telemedicine services now back to your question which is a great question i remember a former googler announced that there is a flatteristus group back in what 2018 so i thought it would be a great idea to join a flutter group that focuses on empowering uh those who identify as women and underrepresented groups while having fun building uh such our applications now uh just note that the platystas is part of the flutter community so at the end at the end of the day we both communities share the same invaluable outputs that's great so so i definitely would assume that that if someone is identifies as female or non-binary and they like flutter you'd recommend they join [Music] uh yes definitely i think it's the ultimate goal of any developer in 2021 and onwards to definitely join that's great um and i let's see okay thanks noel uh so hopefully everyone has learned a little bit about the flavoristas we're trying to keep it short i know we've got some some folks ready to dive right into flutter um but we we have one little pitch to get you to join flutters we have over 100 members from all over the world but we want to keep growing so if you identify as female or non-binary and love flutter or want to get into flutter please join us don't hesitate to email us at flutterys gmail.com and of course if you have any questions feel free to give any one of us a shout on twitter you'll see our handles on the screen and we hope everybody has a great 30 days of flutter have fun yeah bye thank you for joining us uh scott you we here with us i think i've lost to scott here um oh hang on where is he there we go you're muted scott there we go so technically oh i'm not you're adding me i'm removing me you're adding me i'm removing me so um what is next i think i mean we were talking about doing a short break and then actually getting into what was what we're here for um how does how does that sound uh sounds great we are running a little bit behind schedule apologies for that folks but there's so much available to help you out hopefully it's worth taking an extra few minutes and uh go ahead grab a drink go uh hit the lavatory and we will see you in about five yeah see you in five [Music] oh [Music] [Music] [Music] [Music] so [Music] foreign [Music] [Music] [Music] do [Music] [Music] right here we are we're back after the break uh and i'm going to hand over to majid here who's going to introduce sonic speakers hey oh hello and welcome back i hope that you enjoyed this little black i think it was needed and you know okay let's get back to the stage so when it comes to resources uh about learning flutters it's gonna be a lot you know to learn so of course and we have uh or lots of team actually prepared a lot of content for you and resources and community as well i'd like to introduce tomic and nash with me on stage and they will walk you through the resources that you can go and review and learn flutter even better nash and thomas stage is yours over to you thank you yeah so hello again everyone um i'm nash i'm back this time hopefully my internet um cooperates with me again and today with me i have tomic who is my favorite friend from poland so atomic why don't you tell us a bit about yourself hey everybody so i don't want to go into too much detail about mr itself because we didn't go into too much technical details during this live stream and this changes now so me and nash will introduce you the resources that you can use and you the nerdier you are the more useful their those resources will be for you okay could you start so maybe one thing maybe so this you got already this link in your email and here is a nice list of what we will go through so nash please let's get started yes now this event is all about flutter but before we can get started with clutter i think it's important for us to learn a bit about the language behind flutter and of course i am referring to dart now darts if you're new to flutter and you're not familiar with dart that's totally fine um the guides for this event takes into account um beginners and people who are new to the dart language so there are lots of examples and um snippets on the dart website that you can follow along so even if you're new to programming um there is stuff like variable declaration control flows functions there's an overview of everything that you need to know on the dart website now um if if you're a beginner and you're getting started with flutter installing a new language onto your computer can be a bit difficult and sometimes tedious so if you're like me and you like to try stuff out before you install there's a really great tool called dark pad now dart pad is an online dart editor which allows you to quickly write and run your dart code directly in your browser now okay there we go atomic is playing around with dark pad and the cool thing about dart pad is it also allows you to run your flutter code so here you can see you have your code on the left and your preview on the right so it allows you to quickly get your hands up and running with some flutter and some dart code so you can go to darkpad.pad.dev i know right it's fun today to quickly try out and run dart in your browser now if you're coming from another language then don't worry dart is a very familiar language if you're coming from javascript as a web developer or android and java then the syntax of turret will be very familiar to you but if you're like me and when you're first getting started you might be have some questions you're like why dart why did flutter 2 start and to tell us about this tomic is going to give us a brief overview yes that's a really good question and probably here there are plenty of advanced developers thinking like flutter nice framework but there are so many more languages why flutter has to use dart so you can read all about it in under this link but one of the reasons is the hot restart and reload they are using the darts just in time and ahead of that time compilation to achieve that there are also some other reasons but if you want to geek out on this please do check out this link okay i saw in the chat so many people saying how to install flutter how to install flutter okay now we are getting to the point so here is the link on the guides to install flutter but i would wait a second because today after our talk simon will be doing the live session regarding the installation of flutter so this link is mainly if you get lost at some point you can get back on track okay but after our talk when you will be installing flutter so nash what what they can do yeah so atomic uh you and i we know how tedious it can be to install a new sdk um it's a very time consuming process depending on your internet and different factors like your computer but don't worry flutter has you covered there are lots of different things you can look at or try out while you are downloading and installing fodder the very first thing you can try out is actually the flutter documentation so if you go to flutter.dev docs it's a really really good way for new developers to get up and running quickly with fodder so here you can see there are different sections and categories for getting started which is like a very basic from installation to writing your first widget then there is stuff that is more advanced like a cookbook so if you're coming from another platform the cookbook might be beneficial for you especially if you have like prior programming experience you can take a look at how things are done in flutter and you can try to follow along and everything is really documented step by step and broken down in a way for you to understand now the cookbook also have um information on animation design networking and a bunch of different topics so if you're adventurous and you and you're eager for some technical know-how go ahead check out the cookbook it's really good now if you're really bored or you're like me and you're just curious you can check out the widget catalog and widget catalog is a really nice overview of the different components you can play with and try out while um while your flutter installation is going so it's really cool because you can go in here pick a widget that you like and then go to dart pad and run your dart code in your browser and have everything update um on chrome so that's really really good now not everyone likes reading i am one of those i'm definitely one of those developers who learn and enjoy visual content so for me something that i would love to do is watch videos now luckily the flutter theme have put together some really really great content on the official flutter youtube channel and flutter community has some great content on the flutter community youtube channel so if you're eager to learn more um check out the widget of the week series on the flutter dev youtube channel which is a really nice breakdown of common widgets and a step-by-step guide of how to use them in your application but if you're like tomic and you're more technical then check out the flutter community the flutter community channel where their talks on different technical content from past events and uh other things so atomic uh we've we've talked about people coming from other platforms um why don't you show us some of the resources we have to help out these uh individuals sure sure so probably there are some developers here that have learned some different ui platforms for example like me i used to be android developer and for me it's the best way to learn is to have a comparison between android and flutter for example what are the similarities what are differences and how to do different things there and if you are android ios react native web or xamarin developers those are really good resources for you to have basically the comparison between those those multiple frameworks okay and finally we have a set of some other resources for example this is a really good video saying saying telling us uh how flutter differs to different cross platform frameworks i saw today already in the chat like code push that some other cross platform uses and this is one difference but apart from difference there are similarities one of the similarities with the some cross platform framework is a hot reload so nash could you tell us something about hot reload in flutter yes yes so if you're here earlier um you would have seen the session with kate and she said um hot reload and hot restart is one of our favorite parts of flutter and it's actually one of the secret sauce of flutter it's what makes flutter really really amazing and sets it out from the rest now hot reload the way i like to think about it it's magic you make your code changes in your ide you save and it updates into your emulator in under one second it's really really great you can change colors you can change um you can swap widgets in and out and if you're making larger changes such as you're changing an entire widget or you're extracting a bit of logic you can do a hot restart which reruns um your dart code but actually it doesn't rebuild the app so it still gives you that really fast iterative development lifecycle which is really really great and really powerful now atomic the best part about a development experience is having everything tied together and where flutter stands out is the flutter plugin for intellij nvs code actually combines um hot reload and into the tooling so making changes into in your ide such as intellij and hitting save can automatically trigger a hot reload on your emulator making for a really really nice fluid development experience and don't worry for you cli developers out there who love running your tool chain in the command line you can actually just type r in your terminal hit enter and watch your pixels paint to life so that's really really great now while tomic and i were presenting some of these resources we're mentioning um widgets and declarative quite a lot so flutter uses the declarative format to define how a layout will look so tommy why don't you tell us what declarative ui is and how splutter uses it yeah sure i will but first i would like to add one more thing about hot reload my favorite one of the favorite features of flutter so hot reload not only works on the code that you you wrote but also it works on the framework code on the flatter so you can go into any widget or flatter change code there and live save it and live you will see the entire everything change you can mess up your list images everything so it's really nice for learning because the more you break the more you'll learn okay so this was about the hot shield and let's talk about flutters and the declarative ui so if you are not familiar with what is declarative and imperative way of creating let me give you a quick example with my favorite beverage coffee if you want to create now make coffee in an imperative way you need to give it steps like in recipes so for example i would put you need to pour put some instant coffee into the cup boil some water add water to the cup and wait for one minute or a two so this is imperative like giving you a steps but the declarative of way of creating things is you describe it the end result so for example coffee is a hot beverage made of coffee beans and this is the difference between creating declarative way which you describe stuff versus imperative you say exactly these steps and you can read more about declarative ui in flutter in this link okay nash can you tell us something about widget intro oh widgets widgets are my favorite thing in flutter um so everything in flutter is a widget you can think of text text as a widget you can think of alignment alignment as a widget widgets are like lego blocks you use different widgets and there you go use different widgets to stack together and build and compose your ui so you can think of mixing different widgets and matching different patterns to bring your ui to life and like we showed earlier in the in the flutter documentation there's a really great catalog of different widgets that are available to you pre-made as a flutter developer so go on in there choose some widgets mix them match them and uh try building something awesome and of course there's a more in-depth document on uh on widgets on the photo.dev website so feel free to check out both resources to learn more about widgets thank you and still if anybody has some questions please go to the frequently asked questions section because most of them will answer your queries and with rest we can handle it on twitter okay nash are we done no we're getting to the fun part tonic um now as part of today's event we have two really great code labs for you to check out um they're part one and part two of the same code lab and part one is actually a step-by-step guide on getting flutter up and running in on your machine it covers everything from install all the way up to building your very first flutter application so everything that we've talked about today um declarative ui hot reload and mixing and matching different widgets to create an application this collab is going to give you a refresher on everything so go on check it out and when you're finished tweet us a picture of of the app that you've built using the 30 days of flutter hashtag on twitter so we can't wait to see what you build yes that will be really exciting but if you are so excited in learning even more because you want a bit more in-depth uh knowledge here are a good thing further readings for example how the layouting system works on flutter but if this is a bit too advanced to you as we mentioned before flutter community medium has like plenty of uh articles on different skill level so hopefully you will enjoy the resources that flatter provides to you yes and don't forget if you're stuck and you need some help then tweet us on on twitter use the hashtag 30 days of flutter and there are members of the community who will be happy to help you out so uh whether you're you know doing the code lab or you're experimenting or you're you know trying to trying something more advanced um come out come on twitter say hello and we'll be really happy to um to help you out so before we close there's actually one bit of trivia that i'm going to leave you with and that is flutter is an open source technology that was born at google now does anyone know when the first public commits for flutter was made if you think you know the answer come tell us on twitter using uh 30 days of flutter so we're looking forward to all of your answers and your questions so with that said i'm going to hand us over i'm going to hand the stream over back to majid all right thank you very much uh scott are you with me yes i see scott there but he's muted yes very good very very thank you very much uh nash and tomik it was uh a lot of good content of course and you know perhaps we need to have you know we need to give some time to you know people just go through it and you know build something and tweet us so this is the hashtag there and do not forget to let us know what you are doing we are super duper excited to see what you are doing uh thank you very much nash and tell me okay bye pleasure we get started on that real quick we have a reward for those of you who stuck around we have a lot of people who left the stream but for those of you who are left want to let you know that this wednesday in two days at the same time when we started we're going to have a special program we're going to have some googlers in for interviews and also it's a program that is a new version of what we call hump day q a now hump day is slang for the middle of the week being wednesday the middle of the work week if you work monday to friday like we do in the western world so then what we're going to be doing after the google interview is q a and that is an open q a any questions you're having about problems if your rows and columns are exploding if you're trying to figure out semantics whatever you need help with come on to the stream it's hump day q a we used to do this live with everyone in zoom it got a little too popular to keep that up so now we're going to move it to a stream but uh because you stuck around you're here to hear it so with that said um i think simon is about ready to blow up some yeah and have it all go wrong i think everyone is impatiently waiting for you simon what do you have for us well um i've created a vm here it is here guys and uh we're going to attempt and i say attempt because this is this has been a long time since i've installed flutter myself we're going to try and attempt to uh install flutter and try and get an android app working uh in front of us right now in a very short amount of time so uh talk amongst yourselves please uh give me feedback you know obviously if you've had problems in similar places we'd love to hear about it and we we're always trying to sort of streamline this approach so first of all uh get started now i've got windows virtual machines so we're gonna set up windows here and uh let's see here get the flutter sdk right so uh whilst that's grab once that's downloading i pre-prepared a few downloads so i went ahead to um and installed sublime just as a an editor we had to have git installed oh well you don't have to have the install but uh it's preferable so let's let's install that and hope that uh the demo gods are with us and we're not going to have any uh failures um i'm trying to take you through from the very very beginning here so that you really get an understanding of if you have not got any development tools installed this is how we do it so we're just gonna kind of just sort of keep going all the way through this and and you know do all the defaults i don't really there we go and uh let's see if we can get two installs going so i'm going to use um ida which is just android studio really stripped down version of android studio as my development environment so fingers crossed and now i was uh let's see opening the opening this and we're just gonna try try very very uh um quickly here to try and get everything installed so i'm just gonna extract flutter to the hard drive here if things want to behave now um when you install uh when you install flight you can check out from the repository since i don't have get installed i'm not going to run this command here but you know those that have get installed can can just check out the stable branch so um one of the important bits do we don't want to release the release notes let's get these installs going and again i didn't really want to come pre-prepared because i wanted to sort of walk you through all of the steps here as a completely brand new developer to flutter [Music] okay so um one of the things that we want to do since we now have flutter on our hard drive here i just put in c drive you can put wherever you want is this bin folder right here this bin folder has the tooling that we're going to use and uh we need to put this in the path and this is so uh your command line uh on windows or your terminal and other in other operating systems can see things so um i've just typed environment here and search which will pop up with edit your environment variables now there are two there's path here and this path down here if you order the path and system variables you require a logout or a reboot to get that in the user variables each time you launch an app this will be uh use the latest one so we're just going to pop that in there and i'm going to move it to the top so it takes priority that should be it and i'm just now i'm sorry i don't mean to interrupt but there is kind of one important thing if you don't do that correctly or a sign you didn't do that correctly is when you try to run any command that starts with flutter in your command line such as flutter doctor it's going to turn around and say it can't find it so that right there tells you that the path isn't set so um since i've added to my path it should be found here and if you want to check there's uh there's i think it's where we're going to find them find out if that works there we go and where is telling us where it's found flutter you can see it's found it in the right folder now if you type where flutter and it doesn't find anything that means you haven't added to your path correctly so um we you can there's this is going to be recorded so if i'm going too quickly for you i do apologize but we are running a little bit behind right now so uh if you do uh come back to the recording you can follow us through uh as you can see here it guides you through all these steps i'm talking about right here um so the first step so so we've extracted we've added to a path and then the next command that we want to run is flutter doctor so uh let's go to the command line and say flutter [Music] doctor and here we go now it's found that i don't have the sdk storage it's going to download it and then um here we go and it's also going to download the the sdk it's going to download um anything that's required for development really so whilst it's doing that let's check back on our installs okay our community edition of intellij is running so let's boot that up simon can i ask a question maybe some people have a question here so you installed actually intellij uh maybe my other people wants to use like vs code or android studio is there any like prefer preferred ide to use for flutter or i so so this is it like like every developer has their way in their setup for their ide and the buttons that they like so choose the idea that's right for you uh if you've used vs code or you have vs code continue using vs code if you have android studio already installed because you're an android developer for example go ahead and use that i prefer just to take a step back and use intellij which means i'm not using anything specific for any one platform um all these tools are supported on android mac and uh windows so you haven't really uh sorry linux mac and windows so you haven't really got a problem there um yeah i mean yeah there's not really really a preference was my preferences intelligent right another thing too would a lot of people never talk about intellij all it really is is android studio is built on intellij it just has a lot of extra things thrown on it for android and since some of us don't need those extra things we just use intellij okay so here i am to spoon up intellij now um you might think we just do a new project however we don't have anything to do with flutter installed in intellij so what we actually want to do is click on this little down little icon down here that would be the one time they've changed it on me plugins there we go they moved it that's fine so we want to go to the marketplace and look for flutter and there's the official flutter one with 7.7 million downloads let's install that and that's going to tell us that it requires dark plugin to install so we'll just install that um each ide has its own set of um plugins available [Music] this is exactly the same as white would be for android studio by the way so that's going to restart that and let's check our download here we go so it's in it's building so uh to be clear it's actually it's it actually builds the flutter tool the command line tool on your computer so it's always guaranteed to work for your computer and here we go it's going to download all the other dependencies in the background so we need to have this installed before we can start now the i'm going to go back to our 30 days of flutter content here where you guys can find it here is the code lab and if everything goes well so setting up your flutter environment this this kind of takes us through some of these steps um and i would always refer to the flutter.dev website um you can see here this is the the special line that you add to to enable web we're not going to be doing that right now uh okay so here we go so let's close that close that and run flutter doctor once more to get a clean screen okay what do we have okay so now it's picked up that we have we have flutter installed it's unstable one two two on windows we're missing the android tool chain aha so that's the next thing we're gonna need to do and then we also have uh it says we have android studio installed that's fine we're using intellij instead and if we had vs code when we're missing that which again we're not going to be using that so we can ignore these warnings right on my machine right here but hopefully in your machine you'll get green ticks all the way down so let's install the android sdk and set up the path environment variable as it says here and the android sdk root so um i did try and download our command line tools we're going to see what happens here this is going to be interesting so let's see how far we get here so we want to look at sdk manager i think it is oh look our first bug our first bike we don't have java installed so android when you're doing when you're dealing with android development which we are going to be doing here we require this i'm actually wondering now maybe we should use web and this will allow us not to worry about using the android sdk right this minute you can store the android sdk and java in your own time so i'm going to and nate i'm going to follow the guide here and we're going to run as it suggests we need to switch to the beta channel so simon i think you should explain uh like what is these channels and how many channels flutter has because many people probably don't know okay sorry uh so so the repository which is dealing with right now has has several branches um there's there's three major branches sorry there's four major branches you have stable beta dev and master master is the one that has the most breaking changes so as the flutter team start making code changes and putting them in that's master then you've got dev that's normally on a weekly release cycle and there is more information about the release cycle and how often these branches change and how often you can use flutter upgrade however the flutter tool when you run your app it will tell you if you're out of date and it will suggest you run flutter upgrade that we see right here um so so it's master then dev and that will be less breaking changes but more recent changes beta branch which i vaguely remember is monthly or it might be quarterly i forget but uh that will that will have all the beta features this is ready for you to you if you wanted to you could release with this it's your choice but the stable this next branch above that's stable that's the one we recommend you really turn your relationship apps under because with stable you're getting well the most stable version of flutter and if there's any hot fixes from newer if they find problems after releasing stable they will hop fix it back in that means they pull just a little bit of change that they've done back into the stable branch you get the most stable version of flutter and we recommend that's what you release your apps with so flutter upgrade now what this is going to do here we go again so um there is um so this is going to download the sdk version that's for the beta channel okay now uh there is a tool out there called uh flutter version manager or fvm that allows you to run multiple versions of flutter this is not a beginner thing so i don't recommend it right now however if you find yourself changing these branches very often it's very advantageous to to install flatter version manager you can have multiple versions of flutter installed and running again not for beginners so hopefully we'll get this installed so the reason that you change to beta right now is because web is supported in beta right yes web web is only supported in beta i see [Music] let's see hopefully one other point about that i am getting asked an awful lot uh is web ready for production or there are a lot of companies assuming web is already ready for production and that's not what the flutter team is saying but if people want to run ahead and grab it and try to run with that ball that's fine so yes i'd say it's exactly that right i mean uh it's beta which basically means there can be there can be changes uh uh there can be bugs and uh and it's not stable yet so so you know it's it's pick or choose but to be honest for myself i've used it before and we used it in the flutter hackathon and that was an event with multiple thousands of people attending and we also had um we've also used it to great success as a web app back end for our mobile apps so as like a cms or content management system or crm con uh relationship manager i can't remember it stands for but um that notion that that it's a standalone thing it's not it's not necessarily released to millions of people right um but you know it's becoming stable more more every day and the flutter team are making huge strives to uh improve the web experience so um let's see here we go flutter is already up to date we're on the beta channel we have a version and as you can see here it tells us that the framework that is the underlying system that was released three weeks ago so we're very up to date that's the revision and we have dart 212 and that's how you can well we'll get that's for null safety we'll get there another time anyway right so flutter config enable web oh i think you missed the dash enable dashboard correctly right yeah there you go okay enable web is set to true you need to restart any editors so while we have gone yet it's open but now what we're going to do is find intellij there we go let's add it to us pin to start so we can find it again launch intellij and uh here's where we hope so what what's next here uh can i also mention that if any one of you right now has a question you can ask in the chat or use this hashtag here so we will pick your question and ask either today or other days so ask your question do not be shy so uh here we go so we have the id installed we have flutter installed and it's on our path and we can run it from the command line it's very important so new project now if any if at any point you you do these things that we're doing here and it doesn't work go back to your terminal and type in flutterdoctor and that'll tell you if you've got any problems okay that's your first point of call so here we go flutter uh he wants the sdk path let's let's uh i haven't said that yet so i'm just gonna type that [Music] come on there we go and hit next this is the again the first time i've actually the first time i actually have seen that for many for a good couple of years now okay project name let's go back to our starter example so start uh enter startup namer instead of flutter app for the project name okay we can do that let's see if i can bring these a bit on the screen so let's call it what startup startup namer okay that's a description and you know if you had a domain name this is what you call a package path but normally it's domain name backwards right for each component so you can see here this would be example.com it's backwards and we're just going to leave it as that for now if you have your own domain name highly recommend you use that because it makes it specific for you and for what you're doing there won't be any uh collisions in the namespace right so uh we're going to leave a kotlin swift log i'm going to use those and we're going to tick web here to enable web support and as you can see here if we wanted windows desktop or linux desktop or one of these it tells you the little instructions flutter config enable linux desktop now the desktop is still in alpha and i think uh mac is the mac desktop is in beta right now okay so you can all get started on that if you want to right here we go uh finish let's see what magic happens crane flutter project fingers crossed should we drum roll come on come on [Laughter] time to go quickly and he goes slow right yeah right do you guys remember when you stole flutter i'm kind of curious yeah well actually um in the company that i worked um we had a flutter web production app in the production yeah so um i should say that although it's in beta but uh many times depends on your application you may use it and you may not even see any problem so go and test no companies that's what their focus is really with flutter web also it's come to my attention that the flutters email is getting a lot of 30 days of flutter questions please don't direct them to the flutters what you want to do is you mainly are going to want to put them on twitter with the hashtag 30 days of flutter any one of the other channels right i mean that's what it is i mean the reddit the slack this is why we went over all of that earlier go to flutter.dev forward slash community and there are plenty of places you can get help that's why we went over all of this stuff and made it take so long before we could get to the install okay so so it looks like we've got our project open it's creating it's crazy startup thing i gave you a bit of i left the idea a little bit because the very first time you set up flutter the very first time you start a project you'll try and index the files and make things more efficient to use so i'm going to close the readme since we don't we're not going to be following that and over here on the left i can expand the project and the lib folder and find my very first uh dart file main door by me main dot dot and here it is here now you can see here says the dot decay is not done so i just need to tell it where it is again first time so normally this is auto detected i think it's because i haven't set up the flutter root folder in my uh environment variables but anyway c drive flutter bin cache sdk okay that's the folder that you want and then you guys detected the version correctly and you can even uh have it uh uh check what's what uh branch you're on of the dynasty care as well anyway so give it a second then we should get enabled.support there we go so it's picked up the dart version and it's going to start indexing and now we get tabbed on the bottom dart analysis and that allows us a really good tip here that will tell you if you have any bugs in your code and what the bugs are before you even press play so on the right hand side we have the flutter outline which is used for helping you do layouts we have the performance monitor so if you run your app in profile mode you can you can verify the performance and eek out every little uh so every little problem you can and the main one that we probably look at is flutter inspector and that gives you the the access to the layouts so this is simon i think you pointed the good things right now here maybe some people ask right now what is profile mode and what is debug mode can you just elaborate a little bit more okay so so when you when you start your app up your your um i don't wanna keep this simple but when you start your app up um there's it builds it with debug capabilities that means that the debugger can be attached that's your ide it can be attached to the program and then you can put breakpoint and stop your app like pause it pause it in time and step through line by line of your code and it's the best way to find bugs as much as we have print statements when you can pull your app at a point and see the variables that is really the key to getting a good debug experience and that's the debug version now when you release your app to the public to the app stores um or a website or such you're not going to need those capabilities and it's very specific because we don't want to load all this extra data uh your app doesn't have to load for supporting debugging so what we call the symbols which all these little names in front of you so in front of me should i say here so right now let's uh let's choose a device at the top and you can see here well edge we're not going to use edge but chrome chrome web now if you had a an android device plugged in there's um there's you can go look at the android developer information and we actually have a flutter for android developers i think might list this and that is you can enable uh what's called developer settings on your phone plug in your phone into your computer and it'll pop up in this list right here if you have the android sdk installed and you can run apps on your mobile phone which is very exciting it's a little bit more complicated with with um with apple but uh there are guides online this is completely separate from from flutter so okay so it's already got main.dart so i don't know let's hit well let's hit the debug so the little little bug here is debug play is just play normally again that's the difference between release and debug and as uh sorry magenta said there is a profile mode a profile mode is kind of a mix between the two just down the center it's enough to connect up to the computer and it will record lots of statistics about uh how long each frame of graphics takes and uh how many widgets are being created and this helps you work out where you might have slow downs in your app okay yeah okay so let's run debug and see what happens let's go wow exciting moment drum roll i've got something else exciting too is going to spot them for me for a moment and you're going to like that a lot better because she's a lot cooler than i am sorry i'll be back or do worry because i'll be back hello hi i wanted to tell you how it's going it's getting there i mean i mean we're we're fine i mean this has been a long stream we've done a lot of talking but we're finally at that position where people are kind of going to see something happen which is the main thing and hopefully giving this time we're going to get there yeah so exciting am i in the most exciting moment i think so exactly exactly we have any problems okay while you are fixing the problem so like we still have a lot of people watching thanks for staying up this late or sticking with us this long so and if you think this is so overwhelming so don't be scared um so the everything simon walk through today is in the also documentations we sent you so if you feel like oh this is so many things i am so overwhelmed right now you can just go in and then read the docs later but for today it is really we wanted to introduce the flutter world and flutter things and for other people for our community and it might be a bit a lot so but that this is the greatness of the flooded world uh there there's a lot going on there are a lot of people uh but just don't think that oh this is too much and you can continue tomorrow just reading the documentations this is why we are sending you that weekly content [Music] okay it looks like it's running hey hey this is our first father amp this is the very first template most people see which is our uh counter the counter app so it's really straightforward so you see this debug banner don't worry your app won't see that in production that's just there to tell you you're in the slower version shall we say because you've got the debug stuff added to it so if you press increment yeah we see the number i count up it's amazing yes so obviously not that amazing but we we uh we'll get there we'll get there so all right i think this is great i can go you can keep going if you like and also just like i wanted to remind simon and my tutor also this might be too much for you so don't get tired we will have a lot of time okay sure all right thank you see ya thank you see ya all right very nice simon very exciting um i mean you know let's let's uh let's just just go back to the code lab and tell people where they can go from here so if we we open up let's get rid of the console here's the code lab it says right before you go there do you want to show people like if you change something how it works hot reload sure yeah so that's the most exciting part so we have lots of comments in here and i'm and i'm gonna delete some of these comments just just for brevity hope is the font size okay or do i need to make the font size bigger bigger better bigger better uh can i quickly change it and the answer is no hang on i have an idea uh appearance presentation mode let's see if oh that's fantastic and see if i can get it on the right hand side hang on bear with me guys gals there we go and there we go so what we're going to do is i know this is really really basic but we're going to change the primary color from blue to red and hit save and literally just press save and this is reloading and cross our fingers be the time that i want it to work and this do i do i look oh no there we go it's usually faster than this i think probably it's the first time everything else running the screen capture it's running a bit slower my friend but exactly anyway so so you know we could actually just um let's go down to here to to um [Music] obviously all these comments are in here just for for um to show you around so so for example let's go down to where we have that counter number it's in a it's in a column i believe let's just give these comments a bit much okay so it's in a column and then underneath that we could add a raised uh oh or nearly did it elevated button ah you're wonderful and this is gonna tell us right here that uh that we're missing some parameters and uh unpressed is the function that's going to happen when you press it and i'm just going to have it uh actually you know what let's have it do what change in a second and then the child we're going to have as a text that says legit yay permanently in history now in the recording um good luck with that scaffold messenger [Music] and this is show snack bar this is a bit much i know but uh it will visit if you don't know this stuff don't worry so you will learn everything and if you again actually i'll show you this right now if you're curious about any one of the little things from from from flutter the the you can get to it from the main flutter website uh somewhere i forget but the website address is api.flutter.dev and in here you'll get all of the information about all the widgets inside if i type in scaffold oh maybe the one time that's making a fool of me um we'll just say scaffold for now and um and here you will see examples in the web page sample code uh it's a bit small on my screen sorry um so in here you'll see the sample code about various things with copying and you even have it running in your browser and hopefully if i can get down to it further down past all this you get all the little bits of information about how it works where things are and all the parameters and absolutely everything and if you if you see this is the constructor this is the thing that actually runs we just read which we're just working with and that tells you the parameters uh okay very nice let's get rid of that let's get back to here and do something fun well finish and then once you are doing that i want to add tomat back to screen hello thomas hey guys so i saw that there are plenty of questions in the chat in the youtube chat so i will be monitoring those and while uh simon is not talking we might answer the interesting ones i was gonna hit say you can see it says hot reloading let's see that uh uh hopefully um there we go so now we have buttons there we go whoa and the question is if i tap on it what happens hello hello screen it's amazing and you can drag it down and uh obviously it's very much a mobile experience but there's no reason you can't create web experiences the widgets are are very uh sort of varied should we say [Music] very nice simon can i ask you a question why are you doing it on web instead of like emulator on or desktop so so uh well there's two things one i think there might have been problems connecting to the android virtual machine inside another virtual machine which which we're using for the stream here today but also uh the installation of android tooling requires java and that's going to take us more time and just it's not worth it for for a moment in time but this is definitely something without any extra like you don't have to have any of the ios tooling any of the the android tooling or any of these other ids or things installed you can just install it hit play and run it in your browser and that's a really good thing uh just to get going and as we spoke about earlier just to mention there is codepen which is another way of doing things online the the i feel that the relative experience in the browser is not as nice as in the ide where you get the the you know all the information links and and again a good example here if i control if i uh command click if it will work the one time i want it it won't there we go it will take you into the source code even and you can look around the source code and see how they're doing things and what the comments are and so on so um yeah i mean like it gives you a more a better i feel development experience than just a browser but if you're just getting started you have code pen and you have dark pad and both of these really uh really will get you going so i think again you know follow the code lab and i'll just bring it back up on the screen for a second uh if you follow the code lab and it tells you here you copy and paste this if i was literally to copy paste this here like this and go into my project paste it in place of everything i have in there and hit save [Music] and it's going to hot reload and we're going to see a completely different screen hopefully from the code lab and the one time you wanted to go quick it doesn't want to go quick so um there we go finally we're going to fly okay so working through um here tells you here you can format the document but there's that example you just saw running on an iphone and an android device and if you work through this you don't have to spend all your time you know an hour a day as we're suggesting uh or whatever time that you can find follow these guides we'll walk your way through it and you'll you will really make something happen and um and it'll get you started in the world of dartmouth for sure okay all right enough of me talking yes let's have scott and randall and everyone on the screen so uh we what a day right you agree yes i'm sure everybody's still got questions don't forget yes that thing use the hashtag we will capture all of these questions and we're gonna have several other you know session uh in this month later next session is actually in two days or three days right so we will answer this question yeah wednesday so uh again meet us uh live on one of these events ask your question everyone in the community is going to be happy to answer your question for sure do you agree with me we're already very active in the slack channel that you were you were given the link when you got your welcome email but there's already 400 people there and i'm answering a bunch of questions for everybody so uh feel free to join that right after this show because i'll be there yeah in fact that's right they're answering questions already for quite a while yes oh simon you're muted thank you very much we actually had a question here and i instead hang on there we go is there going to be a session tomorrow [Music] that's enough what do you think i'm kind of like you know every single day i'll be in all the normal places i'd be every day but uh i don't think we have an organization but yeah i mean it's and if you have a question again i mean we've got reddit we've got the google group which we didn't even mention the google group itself is an awesome place to be i've i've even seen eric seidel the lead engineer on the flutter team answering questions in that google group right okay so the information you get there is it's really good from the source but reddit is awesome slack you know and if you want to research stuff medium let's get a few some questions because i'm sure everyone's got some questions uh it's one can we make windows desktop apps using flutter yes okay in short yes so you do need to have visual studio and use a visual studio community edition which is free and not for commercial use so you can't release your apps under that you have to get a license i believe caveat go check it for yourself um but yes you can make windows desktop and it is very much alpha and uh i know that the some members of the community and the flutter team themselves are very hard at work to produce what's called uwp which is universal windows platform and that's so that you can release your apps and not only that those apps that you build can then go to xbox and some other things so that's that's in the future it's coming but uh oh never know go on come on next segment i want to add one thing because you were specifically talking about windows but of course you can do native mac os and linux application without problem i have been doing those for one and a half years and i'm pretty happy still my all ui tests are running against like dockerized linux who are not who know what this means on all three of those platforms keep in mind you can do both gui things with the full screen and command line stuff so you can use this to replace all your other magic scripts that you write you can put them all in dart and just have a great time so we have another question here are we going to learn the flutter from basics and uh i think the idea of the content resources that we've supplied is to take you through step by step from the very very beginning i know we rushed to some stuff today but follow the content resources follow the follow the code labs and you'll get started from the ground up not knowing anything about programming at all even okay so uh please try one other one i'm seeing quite often is whether or not there's going to be a certificate this is not an actual course per se it's a collection of code labs and tutorials so no there's not a certificate also someone was asking about the discord you can find links to everything at flutter dot dev forward slash community it's the official flutter website there's a link to their community page you can find links to the slack the discord just about everything except for flutter community medium you know you can find that through this little thing called google um so i do want to cover this do we get any technical links all together or do we get started with flutter any starter guys do we have uh do we have who are refreshers and new to flutter um there's there is actually some guides in there so if you're not a beginner and you're coming from android or react native or one of the other platforms in the content resources we've supplied there are links in there for if you're already an android developer how to get started with flutter and if you're in an ios developer how to get started with flutter so they come from that angle it's very good resources very nice so um uh there's so many um well there's someone asking if they can make an actual website you could there's no reason why not in fact we did that with uh it's flutterhackathon.com if you want to go check out flutter website that's running right now yeah okay we have another one here which back-end databases are we going to use our father well what whatever uh there is no limit so flutter one of the nice things about flush is it doesn't limit you right it actually because it runs its own environment should we say i won't go into the technical details you have everything open to you and if you go to pub.dev that is the package manager that's when you add extra code that you did not write to your project you go find mysql you could go find uh one of the very popular ones to use with with flutter right now is a cloud firestore so you can adapt to your project and follow the tutorials around cloud firestore and there's lots and lots of options and and content available that kind of opens the door to something that i i like to stress at uh events sorry but it's important to understand what flutter is and what it is not okay flutter is a ui toolkit what flutter is not is an operating system so it can interface with just about anything through plugins but as far as databases go things like that pick whatever you want as far as working with cloud you can work with azure you can work with gcp you can work with aws it's up to you flutter is a ui toolkit dart has a fantastic ability to do your back end in the same language that you're writing your front end in and you have a lot of plugins to access things like bluetooth camera storage oh but all of those things are in the realm of the operating system which leads us to another question that we get a lot is flutter going to replace android android's an operating system flutter is a ui toolkit if you tried to replace android with flutter what operating system are you going to be running because you're not going to have one anymore i've got a couple of interesting questions here actually um here's one that's quite kind of relevant hello pascal welcome hello so uh which 3d graphics can be used with flutter does opengl work um so you can use opengl but it's very limited obviously the device uranus your flash drive has to support it there are some packages out there but nothing's really firmed up to be something that is not completely multi-platform support by everyone however uh thomas burkhart has been working towards a brilliant 3d package right now and in development so hopefully we'll be seeing that soon um this this is kind of a question we get quite often can i use any other languages than dart with flutter pascal here here's one for you can we use another line absolutely as long as as it compiles down to dart you can use any language so you can write some code generators in kotlin and compile it to dart and then compile it to native people sure but i think the the question is no the artistic quest dart is the language for flutter and it is designed it is the language which is best designed for declarative development with flutter the dark team or the flutter team initially looked at various languages and in then decided to go with dart but i as a i have a background as android developer and i love kotlin like many developers do because kotlin is a wonderful language but um we cannot have the good things of kotlin in dart but i tried to do my best and i ported um a big chunk of the standard library from kotlin over to dart so that we can use all the cool extension functions the project is called kt dart of course and um yeah it really got popular when extension functions hit the dart land and yeah we could finally use all the cool extension functions which exists in the um kotlin echo system and can i ask at one more thing about that so android developers do you know what is instant run this feature that should work exactly like hot reset but it never to work for with for me and that's why dark is really right come come again let's go it's much better than it used to be it's much better but with flutter it works and this is because how just in time compilation works with that more advanced topic but so not for everybody now hey scott here's one for you where will we be after those 30 days well if you haven't bought a new house you're probably going to be in the same place you're at right now but after 30 days really the main goal is not to have built anything in particular the main goal is to understand flutter well enough to build anything you can think of okay because flutter as they say it's about never having to tell your designer no if you can see it you can build it and if you can't actually build the thing that you're thinking of you can usually build something that fakes it well enough that nobody can know the difference and i had one thing here if you are done is scott uh okay so um i think after 30 days well it depends on how much effort you put into it right so if you work 30 minutes a day well you know but if you work i don't know a couple of hours a day you will get something very you know somewhere that you even don't imagine so it really depends on you how much you work and and you should have an expectation from yourself probably also of course from the community and flutter team but then expect from yourself what you want to see at the end of the 30 days and we are here to help i'm gonna i'm gonna quickly rush through a few questions here just so we get them in before we have to end the stream uh can i build a static website with flutter well flutter web does exactly that it compiles to javascript css and html and then you can just upload it to firebase hosting for free for example or other hosting providers and it works just as well you i'm sure github pages just works just as well um do we support deep learning models and can you use tensorflow lite um we're not going to work on it we're not going to show you how to do that during the 30 days however there is a tensorflow like package on pub.dev and you can go find that and explore their their samples and their examples and try getting up a tensorflow uh tensorflow lite uh learning mod deep learning model on your on your own app on your own device perfectly possible we never told what pub.gov is but pub.dev is the package manager that's where you get external code from the there's code made by other people and i bring it into your project so you can take advantage of that so examples pascal just mentioned katie dart his package that he made to give you kotlin style um lists and so on and mutablelist and so on uh in dart so why is it called pop you're the gps that's your microphone you're fine why is that a child question so why is it called pub.dev can you tell us because you use darts in a pub right yeah yeah it was a great way to meet people and have a community and thought about it yeah that was that was how i was explaining me the first time i heard it so i oh right it must be true randall says it's true yeah i've been around or maybe they want to test it your microphone pop you know you have a pop filter or not a pub filter so i i've i've lost a question that was there just a minute ago but um someone said does the performance of like does an android app and ios app work just the same when built with flutter yes in short um they're they're the same code running on both same platforms literally is the same machine code working on both so uh they were they work and perform exactly the same slight caveats in terms of some performance aspects that um that flutter team will work on currently on the latest set of devices but and this would be the same with with most situations like this so there's no um yeah it works just the same yes flutter is compiling down to arm code on the mobile platform so it is actually as fast as anything you'll build potentially as fast as anything you build with kotlin or java or any other things yeah well there's all these other languages objectives can machines hashtag 30 days of flutter thank you for using the hashtag um slowly apparently yeah i mean there should be no reason why it doesn't work um but if you're running a virtual machine for like a virtual phone or anything like that it's going to take more resources from your computer so in a low-end machine when you're developing a mobile app i would recommend you plug in a separate mobile device and develop against that mobile device so that should hopefully uh free up resources on your computer but it is still better to develop a flutter app than a native android app because the compilation for flutter app you don't have to compile it you can use hot reload so it takes saves a lot of time oh yeah definitely yeah i mean if you try and build a feature i mean i tried to do an android i was like why am i waiting so long for gradle it takes forever and speaking of low end just to toss something out there real quick one of the reasons that flutter is really catching on especially in a lot of the third world is that you can write apps for things all the way back to ios 6 and i'm sorry iphone 6 ios 8 and android kitkat which means you can write apps that will run on phones that are a lot older in places where people can't afford to change their phones all that often and that is uh that can be a very underserved market all right i'm gonna the will flutter always be open source uh i don't see any reason why it wouldn't be and even i mean there is a question here and it's always been asked to us i mean we've heard it for two years now what happens if google drops a port for flutter i mean any company could right but there's already big people big providers in the industry that are are using flutter and so what what why what happens on other open source projects is that foundation is made from lots of companies and that foundation would take ownership over the open source project and people from all of these companies would contribute as open source so we'll always remain open source but who manages it might change in the future but honestly the the the growth of flutter we've seen and everything else it's a star project it's not going anywhere anytime soon so um this i've seen a few times now in the chat why do flood taps have a lot more size compared to native apps in fact they're smaller um what you're seeing is called a fat apk normally which is one application that's shipped for lots of different devices and it's made as one thing you put up to the play store so it seems bigger on your computer when you're developing it but when it goes if you look at once you've uploaded the play store if you look at the download size on the play store you'll find it's very very small not as big as the one that you uploaded okay so um there are app bundles and various other things that kind of separate things off but it's always bigger when you upload and it's smaller when you download okay so so you cannot think about your size of your app from what you see on your computer at the end of the day okay and uh add one thing uh to that because with if you are shipping apk like with flutter you are shipping entire framework not a small sliver of application like on android or ios so the minimum size of uh android application i think it's four megabytes now like the plane or hello i honestly i i couldn't tell you what the minimum is but i can tell you what i have seen recently and that is when you add the support library and you add firebase and you had all these other things suddenly you've added 20 megabytes to your app right whereas there's a nice advantage that we get with flutter and dart and it's it's called a tree shaking compiler i'll go into the details but it basically means any code you don't use in dart you're not compiling an entire entire flash sdk into your app you only compile the only compiles the bits you actually use so this is very this means that you only get the smallest possible output in your app okay does that kind of hopefully that makes sense to people that haven't gone too technical but you only use you only get uh what you use in your app and not all this other stuff which you would do on some of the other platforms even though you can remove it on android and so on it's a lot more difficult to do it after the fact than the compiler does it before i just play slightly with what tomorrow's saying i know we're out of time but um you're not with your flutter app you're not using the built-in vendor provided ui you're basically all the ui is being done by flutter which also means you have control of everything all the way down to every single bit on the screen you don't get that with this vendor ui not even close so that's why it has to ship it has to kind of bring its own uh bring its own ladders along so you can climb up to the display you want i mean let me just have one more quick question about this though why are people complaining about three or four meg sometimes when the average phone right now is running what at least 128 gig well i will say that there are some old old devices that are used in in in other countries right we we talk about things as being these big devices but they're older our old are older smaller devices and the great thing about flatus it does ship a lot smaller does not use the resources that other native apps would use so so it does perform a lot better we've seen on the lower end devices um okay so i think we've run out of time now we actually are way over scheduled i apologize for keeping everyone so um all of these questions please we want to hear about all your questions so please leave them in the comments down below and uh what what's that line don't forget to like comment and subscribe and uh yeah by the way one good thing if you've made it all the way through here thank you so much there's also one other thing you can really really do to help us out that is follow us on twitter yes okay so i don't know what you just did that took away all of our names follow us on twitter and also twitter followers could do so much for my resume also there is a there is a point here uh use the hashtag 30 days of flutter people from around the curcumin are going to help you answer your questions and whatever questions we don't answer right now we will get to your questions we will try to get most of your questions been so many it's overwhelming but uh please ask your questions in the comments and down below with your hash with a hashtag and in the next stream on wednesday and following streams this month we will get back to your questions and give you some very complete and concise answers okay yes hump day q a we'll see you on wednesday thank you everyone for joining us and we'll hope we'll hear from you soon bye bye see ya so [Music] [Music] so [Music] [Music] do [Music] [Music] it's [Music] this [Music] foreign [Music] [Music] [Music] you

Channel: Flutter Community

Views: 69,915

Keywords: 30DaysOfFlutter, Flutter, Google, Developers, Programming, Dart

Id: -feG_q_0j3Y

Length: 134min 16sec (8056 seconds)

Published: Mon Feb 01 2021

Reddit Comments

[u/MarkOSullivan]

Big welcome to all who are new to the sub 👋

[u/PestoPastah]

This was a really great intro! Looking forward to the next 29 days 👨🏻‍💻

[u/LovingLightForever]

I Love Flutter!

[u/vector79]

I've just started using Flutter. Will it be worth it to watch it?

[u/Holmetis]

I assume if we're not able to tune in live the videos will be available to rewatch afterwards?

[u/Pigna1]

Waiting 👨‍💻