Flutter Basic Training - 12 Minute Bootcamp

welcome to flutter basic training by the end of this video you'll be shipping apps on ios android the web and desktop you will not laugh you will not cry you will learn by the numbers i will teach you flutter is quickly becoming the world's most popular cross-platform framework thanks to its awesome developer experience and ability to ship high quality apps on multiple platforms it's unlike anything else out there which also means that it has a steeper learning curve to get good at it you'll need to stop watching youtube and start building something i created a bunch of satisfying examples that will go through together designed to make you a productive full stack flutter developer there are certain things they don't tell you when you first get started like it's 100 times faster to refactor your code by hitting control period than it is to do manually we'll look at a ton of productivity boosters like this and at the end of basic training i'll give you a certificate that you can frame on your wall and if you want to go beyond the basics i just released a brand new flutter course available to pro members on fireship io there's an ephemeral discount in the video description to get started you'll need to use the most important skill for any developer following directions head over to flutter.dev and follow the install instructions for your system or if you want an easier way to get started dartpad allows you to edit and run flutter code in the browser now open the terminal and create a new project by running flutter create now open it in vs code and make sure to have the flutter extension installed at the bottom you'll see an option to select a device like windows chrome or a mobile emulator i'm going to run my app and android by running flutter run from the command line now find your application code in the main dart file read in between the lines to find a color or icon in your ui change one of these values to something else you'll notice that when you type after the period everything is auto-completed in the ide tooling is partly what makes flutter development so productive if you don't leverage it you are not going to survive basic training if you survive recruit training it will be a weapon save the file now type a lowercase r into the terminal that performs a hot reload allowing you to instantly see the changes in the ui without having to rebuild the entire app now take all the code in this file and delete it we're going to start from scratch first import the flutter material package at the top this gives you access to hundreds of pre-built widgets in your code ranging from low-level building blocks like text to complex ui elements like a page view that performs animation and layout as a flutter developer you'll need to learn how to combine these widgets together into a tree-like structure to create a complex ui but first we need a main function this is where the program will start executing flutter has a global function called run app it takes a single widget as its argument and will inflate that widget to the screen on whatever device it happens to be running on let's create a custom widget to represent the application type st into your editor and it should automatically give you a snippet for a flutter stateless widget hit tab to insert it then give it a name like my app notice how this class extends a stateless widget that's a class built into flutter that you use when creating a ui element that doesn't have any internal data in other words it's just a dumb widget that paints some pixels to the screen you'll notice it has a constructor with a key you don't need to worry about that for right now but if you hover over it you'll notice that it has a link to a youtube video explaining more because flutter's documentation is absolutely awesome the thing you do need to know about is the build method this method returns a widget and will be called anytime flutter needs to rebuild the ui like when your data changes the first widget we'll return is a material app it's used as the root of the application and allows us to configure themes and routes perform a hot reload and you should have a blank canvas to work with we can quickly add a screen to it by adding a scaffold to the home property a scaffold allows you to build screens with common ui elements like an app bar at the top every pre-built widget has a bunch of name parameters where you can customize its appearance put your cursor inside a widget then hit ctrl spacebar to bring up all the options go ahead and add a background color then add a title by creating a text widget now hot reload to check out your first flutter screen that's pretty cool but there's no time to celebrate now we need to talk about layout or how do i put widgets where they need to go in the screen the most fundamental way to layout a widget is with a container it's kind of like a div in html or a view in android it takes one child widget as an argument we can make that a text widget for now which will place it in the top left corner of the screen you can think of it being surrounded by a box and we can change the dimensions of that box by adding margin and padding we can also customize things like the height width and color we can also make the box look a lot cooler using the decoration property it takes a box decoration widget as its argument which allows us to customize things like the border gradient shape and shadow of the box containers do a lot but flutter has some other widgets that are more focused for example if you just want to center a widget in the middle of the screen you can do so by wrapping it with center now you could write that code manually but if you want to have a good time you'll right-click on the widget or hit control period to find the refactor tool then select the option to wrap with center to write that code for you automatically another tip is that if you're using a container to apply some padding use the padding widget instead or if you're creating a container with a fixed width and height use the size box widget instead but how do we deal with multiple related widgets like a row or column that's where flex layout comes in if you're familiar with css flexbox you'll be way ahead of the game here flutter provides row and column widgets used to layout multiple children horizontally or vertically unlike a container that takes only one widget as a child a column takes multiple children as a list create a column then add three icons inside of it you'll notice that each icon is laid out one after the other vertically change that widget to a row and now they flow horizontally the direction they flow is called the main axis while the opposite direction is the cross axis you can change the spacing and alignment between the children by modifying the cross axis and main axis alignment on the widget by default each child has a flex value of 1 which means that each sibling occupies the same amount of space if that's not desirable you can wrap a child in a flexible or expanded widget expanded tells a child to take up any available space and you can give it more space than the other children by modifying its flex value but in some cases you may want to have one widget overlap another like a button that floats on top of some other ui element in that case the widget we're looking for is a stack just like a rower column it takes a list of children as an argument and just one little side note here you'll notice that i'm using a trailing comma after every block of code the comma is not required but it keeps your code nicely formatted if you right-click and choose format document it will format it with multiple lines as opposed to one line when the comma is missing now in our stack we might have a container and an icon if we want to display the icon on top of the container we make sure that it comes after the container in the list now if we want to move things around we can use positioned to move a widget into a specific spot kind of like absolute positioning in css or if we want to modify its positioning relative to its parent we can use a line to move it to the top left bottom right or center those are your low-level building blocks for layout but flutter takes care of many ui elements out of the box for example if we add a floating action button to our scaffold that button magically appears down here at the bottom right the floating action button widget has an event handler called on pressed we can define an anonymous function here to handle the gesture if we then want to add a bottom bar to it we can use the bottom bar widget to add some navigation icons to the scaffold we also need a drawer that animates out from the left we can achieve that by simply adding a drawer to the scaffold that's pretty awesome but eventually you'll lay out your widgets and they will overflow the bounds of their parent which will summon the red screen of death or this black and yellow error tape when you get an error like this the terminal output will link you to flutter's built-in debugger that'll give you more information about layout to help debug things like this in this case the problem is that our parent is not a scrollable view things don't just scroll automatically instead you need to use a widget like list view it takes a list of children as its argument but will scroll between them it can scroll both horizontally and vertically and you can even tell it to garbage collect items that are no longer on the screen you'll notice that in this list we're adding each widget individually but in real life you'll often need to fetch a bunch of items from a database and then create each list item programmatically in flutter many widgets can be built dynamically using builders which is just a function that you define that can map a list of data to a list of widgets and that means you can create a scrollable list that is infinitely long where the children are rendered lazily keeping the ui smooth and fast now that you know how to build a ui we need to talk about state or the data that changes throughout the life cycle of the app a stateless widget has no state as the name implies to give this widget mutable data we need to convert it to a stateful widget which we can do by right-clicking going to the refactor tool and choosing the option to convert it that will break the widget up into two different classes that keeps the widget itself immutable while giving us a state class where we can play with mutable data it has a build method but we can also define variables on this class and then change them by using the built-in set state function somewhere else in our code like when a button is pressed we can create a counter app by defining a property called count then reference the value in the ui using a text widget when working with strings in dart you can interpolate a variable inside of it with a dollar sign now when our button is pressed we call setstate to change the value and the widget will automatically re-render to reflect the latest data another thing you might want to do in a stateful widget is initialize data like maybe fetch a record from a database the init state method is called once when the widget is first initialized and there's also another lifecycle hook called dispose that runs when the widget is removed from the ui now you should know that this is not the only way to manage state and flutter in fact there are many different approaches and many strong opinions out there about this topic in my full course i use a package called provider that allows us to share real-time data throughout the entire widget tree without ever needing to use a stateful widget at all there are also full-blown solutions out there like block and qubit the full course also contains a repo of the same app built with qubit i want to give a shout out to raleigh perez for putting that demo together if you're looking to hire a flutter developer you'll definitely want to get in touch with him now that we have a fully functional counter app the question becomes how do we navigate to a different screen well confusingly flutter has navigator 1.0 and 2.0 and all you need to know for basic training is 1.0 at this point go ahead and build two different stateless widgets then give each one of them a scaffold make sure that each scaffold has an app bar at the top in the first page go ahead and add a button to the body of the scaffold now think of your navigation like a stack where you can push and pop different screens onto it to add a new screen to the top of the stack we use navigator push with the build context then create a new material page route the route expects a builder function which then returns the screen that you want to render which in our case will be page 2. now do a full restart of the application by typing a capital r into the command line and you should be able to navigate back and forth between the two pages one magic thing that flutter is doing here is adding a back button to the app bar which under the hood is calling the navigator pop method that was easy but i want to finish things off with something really cool flutter has a hero widget that can animate elements from one screen to another so check this out on page 1 i have an icon button with an image as the background then on page 2 i'm showing the same image taking up the full screen that works but i think we could do a little better the magic comes into play when i wrap these images in a hero the only argument the hero needs is an id to identify it when it gets animated to the other page flutter will use the id to keep the image in the ui on both pages while the navigation is taking place now on the other screen we'll also use a hero widget with the image inside of it when we navigate to this route you'll notice the image itself is animated between the two screens automatically it makes the biggest impact when you have a list of images to navigate to not only does it look awesome but it would be extremely difficult to implement from scratch congratulations you just completed basic training for flutter take a screenshot of the certificate and frame it on your wall if you want to go beyond the basics become a pro member at fireship io to get access to the full flutter 2 course where we build a complex application with firebase thanks for watching and i will see you in the next one

Channel: Fireship

Views: 119,017

Keywords: webdev, app development, lesson, tutorial

Id: 1xipg02Wu8s

Length: 12min 8sec (728 seconds)

Published: Tue Nov 16 2021