Intro to Flutter SDK

Editor's Notes

• #3: Android and iOS Fuchsia - Open-source OS by Google… future devices like smartphones, tablets or even laptops will be powered by Fuchsia. Speculated as a ‘re-do’ of Android Dart - easy to learn programming language built by Google
• #4: Before we dive deep into Flutter… Let’s explore the Dart language
• #5: Before and After learning dart - more specifically after learning and experiencing Flutter.
• #6: Easy to Learn Language: Object Oriented Language - most of the time building and organizing codes in objects C-Style Syntax - similar to Java, C, Javascript Statically Typed - variables Runtime Environments: Compiled to machine code Transpiled to Javascript code for web JIT - Just in time compilation for fast development AOT - Ahead of time compilation for fast reliable releases -> compiles to native code Wide range of libraries included in Dart - i.e. JSON convert, crypto, Comes with Pub
• #7: Functions main() - is the default function that is first executed by Dart Example: myName Variables and Values Everything in Dart is an object Note on Types: Every variable has a type that it can reference Once variable has an associated type, the type cannot be changed Recommended to annotate type on the variables as good coding practice…. But Dart can actually figure it out Why use Types: Performance improved Easier to work on large projects - better idea on the code from another developer Find simple errors Less Unit Testing… no need to check the type of value returned by method Example of Types: String Int Double Dynamic - catch all String Interpolation $name and ${name.length}
• #9: - Run same UI on multiple platforms
• #10: The Apple iOS SDK was released in 2008 and the Google Android SDK in 2009. These two SDKs were based on different languages: Objective-C and Java, respectively.
• #11: Reactive web frameworks like ReactJS (and others) have become popular, mainly because they simplify the creation of web views through the use of programming patterns borrowed from reactive programming. In 2015, React Native was created to bring the many benefits of reactive-style views to mobile apps.
• #12: Flutter is not a ‘yet another Cross Platform SDK’... it is ‘The Cross Platform SDK’ Engine is shipped in SDK No bridge needed Doesn’t use OEM widgets Directly draws to canvas Ships SDK with the app, no fragmentation or compatibility issues Connects to System Services through plugins
• #16: In Flutter, almost everything is a Widget. Think of a Widget as a visual component (or a component that interacts with the visual aspect of an application). When you need to build anything that directly or indirectly is in relation with the layout, you are using Widgets.
• #17: Widgets are organized in tree structure(s). A widget that contains other widgets is called parent Widget (or Widget container). Widgets which are contained in a parent Widget are called children Widgets.
• #18: In short, think of a BuildContext as the part of Widgets tree where the Widget is attached to this tree. A BuildContext only belongs to one widget. If a widget ‘A’ has children widgets, the BuildContext of widget ‘A’ will become the parent BuildContext of the direct children BuildContexts. Reading this, it is clear that BuildContexts are chained and are composing a tree of BuildContexts (parent-children relationship).
• #19: From this statement we can derive that from a child BuildContext, it is easily possible to find an ancestor (= parent) Widget.
• #22: Stateless Widgets do not depend on anything else but their own configuration information, which is provided at time of building it by its direct parent Typical examples of such Widgets could be Text, Row, Column, Container…
• #23: We can pass some parameters to Stateless Widgets. Parameters might be anything from a decoration, dimensions, or even other widget(s). It does not matter. The only thing which is important is that this configuration, once applied, will not change before the next build process. A stateless widget can only be drawn once when the Widget is loaded/built, which means that the Widget cannot be redrawn based on any events or user actions.
• #24: The lifecycle of such Stateless widget is straightforward: initialization rendering via build()
• #25: There are Widgets that will have some data that will change during its lifetime. The set of those data is called a State. These Widgets are called Stateful Widgets. In our example, we have a Widget that adds a Another example of such Widget might be a list of Checkboxes that the user can select or a Button which is disabled depending on a condition.
• #26: As a State object is associated with a BuildContext, this means that the State object is NOT (directly) accessible through another BuildContext !
• #27: initState() - first method, maybe overridden with additional initializations. When finished State and context will be available and fully associated didChangeDependencies() - context is now available and this method can be overridden with listeners or other initializations that need the context build() - where the widget is built. This method will be called each time the State object changes dispose() - this method is invoked when the widget is discarded. Override this method if you need to do some cleanup
• #29: There are plugins that are not available yet or are still in development/preview phase.
• #30: Ships with “Pub” the dependency manager for Dart Official site is pub.dev Used to add plugins to Flutter applications
• #31: Ships with “Pub” the dependency manager for Dart Official site is pub.dev Used to add plugins to Flutter applications
• #35: You can set up a new flutter app via the Android Studio, but the best way to do it is through the command line (CLI)
• #36: When you create a new app, it will be the demo app that shows the basic capabilities of flutter
• #40: Name and Email
• #41: Follow Button
• #42: Same with the header… divide to Rows and Columns
• #43: The buttons can be made into Widgets so you DRY
• #44: Body section is straight forward
• #45: Uses Stack widget Clip Image Widget for the background CircleAvatar for the profile pic https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg Image.asset( 'images/lake.jpg', width: 600, height: 240, fit: BoxFit.cover, ),
• #47: Uses Stack widget Clip Image Widget for the background CircleAvatar for the profile pic https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg Image.asset( 'images/lake.jpg', width: 600, height: 240, fit: BoxFit.cover, ),
• #48: Uses Stack widget Clip Image Widget for the background CircleAvatar for the profile pic https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg Image.asset( 'images/lake.jpg', width: 600, height: 240, fit: BoxFit.cover, ),
• #49: Uses Stack widget Clip Image Widget for the background CircleAvatar for the profile pic https://raw.githubusercontent.com/flutter/website/master/examples/layout/lakes/step5/images/lake.jpg Image.asset( 'images/lake.jpg', width: 600, height: 240, fit: BoxFit.cover, ),