Flutter in 100 seconds

Key Takeaways

flutter a UI framework for building apps on iOS Android the web and desktop at its core flutter combines a high performance graphics engine with the dart programming language in development dart provides full type safety and stateful hot reload to help you build reliable apps quickly in production dart compiles to native machine code which means your graphics will render beautifully on any platform install flutter then run flutter create to create a new project now open the main dart file this is where you build your app the UI is laid out as a tree of widgets and the framework provides hundreds of pre-built widgets to handle things like animations scrolling responsive layout and more you can build your own widget by extending the stateless widget class you then define your UI by overriding its build method now it's important to understand that everything in flutter is a widget this method returns a widget and it's children return widgets and their children return widgets giving us an expressive declarative UI structure which you can easily Traverse using flutters awesome tool whenever the input data to this widget changes flutter will rebuild the UI by calling your build method stateless widgets are immutable and don't have any internal data when you have an interactive widgets where the internal data might change based on user input you can extend a stateful widget properties defined on this class can be reactive for example we might have a counter that starts at zero then in our build method we have one of flutters built-in buttons that cause a function whenever it's pressed it increments the counter by coin set state which tells the framework that the widgets data has changed causing the UI to re-render with the latest data you can now play with this app on a real device using the flutter run command that's cool and all but let's make some changes we'll go back to our source code and Center the button on the middle of the screen instead of writing code just click on the button and hit control shift R then wrap your button with a center widget next change the color of the button and notice how flutter previews that color directly in your IDE now too hot reload the app simply type or into the command line it only took a few milliseconds to build a new version of our app and notice how the state of the counter was unchanged that's what I like to call an awesome developer experience this has been flutter in 100 seconds if you want to learn more check out my newly updated flutter fire based course on fire ship i/o thanks for watching and I will see you in the next one you