Downloaded 77 times
Intro to Flutter SDK
- 1. Intro to FlutterSDK The Future of Mobile Development
- 2. What is FlutterSDK? ● A cross-platform mobile app SDK for: ○ Android ○ iOS ○ Fuchsia ● Uses Dart Language ● Rich Widget Catalog ● Modern, Reactive Framework Learn more: www.flutter.dev
- 3. Hold on… whatis Dart?
- 4. BEFORE DART AFTERLEARNING DART
- 5. What is Dart? ●Object Oriented Language ● C-Style Syntax ● Statically Typed ● Runtime Environments ● Supports JIT and AOT compilation ● Built-in Libraries Learn more: www.dart.dev
- 6. Dart Basics Dart PadEditor: dartpad.dartlang.org ● Functions ● Variables & Values ● Types ● Classes
- 7. Ok, Back toFlutter SDK...
- 8. Why Flutter SDK? ●Beautiful UIs that is consistent across devices and manufacturers ● High-performance apps that feel natural on different platforms ● Up to 120fps ● Fast development - Hot Reload Learn more: www.flutter.dev
- 9. Platform SDKs (Androidand iOS) Platform
- 10.
- 11.
- 12.
- 13.
- 14. Everything is aWidget!
- 15. What are Widgets? ●Building blocks of UI in Flutter ● Even the App itself is a widget ● Advanced widgets are made by combining basic widgets ● Can represent: ○ UI Element ○ Layout Element ○ New Screens
- 16.
- 17. BuildContext - reference tothe location of a Widget within the Widget Tree structure - Belongs to one widget
- 18. BuildContext Visibility - ‘Something’is only visible within its own BuildContext or in the BuildContext of its parent(s) BuildContext - An example: Theme.of(context)
- 20.
- 21. Stateless Widgets ● Immutable ●Once created, it doesn’t change
- 22. Stateless Widgets ● Canpass parameters to Widgets, but once applied, it will not change until the next build process
- 23. Stateless Widgets -Lifecycle ● Initialization ● build()
- 24. Stateful Widgets ● Havea “State” ● State - set of data held by a widget that can change in its lifetime
- 25. Stateful Widgets -State ● State defines the information on how to interact with the Widget in terms of: ○ Behaviour ○ Layout ● Any changes to State will trigger the Widget to rebuild ● State is associated with BuildContext ● A State is considered mounted only when the State is associated with the BuildContext
- 26. Stateful Widgets -Lifecycle ● initState() ● didChangeDependencies() ● build() ● dispose()
- 27. Integration With ThePlatform
- 28. Native Plugins ● Allowaccess to Native API ○ Bluetooth, geolocation, sharedPrefs, etc. ● Official and Community-driven plugins available ● Still some missing plugins or still in early stage ● Add package if it is available, otherwise, build a custom plugin
- 29. Dependency Management ● Pubpackage manager ● Official site https://pub.dev ● Can use Git repo for custom dependencies
- 30. Example Package ● AddPackage in pubspec.yaml dependencies: battery: ^0.3.0+3 ● Add import package to Dart file import 'package:battery/battery.dart'; ● Use class from the Imported Package Battery _battery = Battery(); final int batteryLevel = await _battery.batteryLevel;
- 31.
- 32. Getting Started ● Downloadinstallation bundle ● Unzip to desired directory
- 33. Getting Started... ● Addflutter/bin to your PATH ● Run Flutter Doctor to check for next steps ● Platform Setup: ○ Android ○ IOS ● Setup your IDE ○ Recommended: Android Studio ○ Install plugins for your IDE
- 34. Creating A NewFlutter App ● Go to your workspace directory ● Enter the ‘flutter create’ command ● Open the project on the IDE
- 35.
- 36. Demo - BuildingLayouts ● Create a simple Flutter Screen Please download files: https://bit.ly/2HXShzS
- 37. Demo - BuildingLayouts Diagram the Layout
- 38. Demo - BuildingLayouts Title Section Further diagram the layout by dividing the section into Columns and Rows
- 39. Demo - BuildingLayouts
- 40. Demo - BuildingLayouts
- 41. Demo - BuildingLayouts Button Section
- 42. Demo - BuildingLayouts
- 43. Demo - BuildingLayouts Body Section
- 44. Demo - BuildingLayouts ● Header Image
- 45. Demo - BuildingLayouts ● Header Image - Adding Images to your Flutter Project ● Save the images on the assets directory then edit pubspec.yaml
- 46. Demo - BuildingLayouts ● Header Image - Background Image
- 47. Demo - BuildingLayouts ● Header Image - Avatar ● Adding Image From a URL:
- 48. Demo - BuildingLayouts ● Header Image - Stack Widget
- 49. Demo - BuildingLayouts Put them all together
- 50.
- 51. Adding Interactivity ● Addingsimple interactivity to the favorite button
- 52.
- 53. Resources ● Flutter WidgetsCatalog https://flutter.dev/docs/development/ui/widgets ● Dart Language Tour https://dart.dev/guides/language/language-tour ● Effective Dart https://dart.dev/guides/language/effective-dart ● Flutter Resources https://digitaljoni.com/resources/flutter/
- 54. Cheers! To yourFlutter Journey!
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, ),