Flutter with Dart

Check out Google's new Reactive Framework for building beautiful mobile / native / web apps. The next big thing in development gives you the tools of a web developer and native developer all in one. This is a high level overview of the Flutter framework and Dart lang, with resources to help get you started

Transcript

1. Flutter with Dart Google’s new Reactive Framework for building beautiful mobile apps
2. Flutter ➔ Completely open source ➔ Write cross platform mobile apps ➔ Code written in DART ➔ Comes with a full set of widgets ◆ Material Design (Android) ◆ Cupertino (IOS) ➔ Completely Widget Based ◆ Structural Elements ◆ Style Elements ◆ Layouts ◆ EVERYTHING!!!!!! ➔ Hundreds of Flutter specific packages ◆ Firebase (serverless) ◆ Images ◆ HTTP Requests ◆ Everything you need! ➔ How does it compare to other hybrids ◆ Most like React Native but… ◆ No JS bridge - NO context switching ◆ No Web View ◆ Compiles to Native (ARM) code ➔ Is the default UI for Fuchsia (Google OS)
3. What is DART? ➔ 2 different types of compiling ◆ JIT compilation - Hot Reload for Dev. ◆ AOT compilation - Fast uptime for Prod. ➔ Because of AOT compilation ◆ Runs animations at 60 FPS! ◆ Tree shaking at compile time ➔ Is BOTH a static and dynamic language ➔ Built by the team who worked on V8 ➔ Compiled to JS for web use (up to 70% code reuse) ➔ Single threaded but can run asynchronous code using ‘Isolates’ to run multiple services like ‘web workers’ in JS ➔ Has advanced garbage collection system ➔ Can be used on the server! ➔ Completely open source ➔ Part of the ECMA standard ➔ OOP Language like: ◆ Java, JS, Swift, Kotlin, C# ➔ Declarative language ➔ Everything is Widget based ◆ Avoids the need for declarative layout language like JSX or XML ➔ Focus on composition over inheritance ➔ Strongly typed language ➔ 3000 packages in public Dart Package Repo
4. Examples
5. Everything is a widget!
6. Everything is a widget!
7. ❖ Dependencies add very similar to npm in the pubspec.yaml file ❖ Widgets are created like classes with the ‘new’ keyword ❖ ‘Import’ packages at top of file like in react ❖ Uses fat arrow functions ❖ Stateful vs stateless widgets ❖ Calling setState() triggers a call to build() method resulting in UI update ❖ Prefixing variable with an underscore ‘_’ ENFORCES privacy in Dart Language ❖ Uses ternary operators for conditionals ❖ First-class functions ❖ async/await ❖ Function decorators: eg. @override ❖ Uses Closure Similarities
8. For IOS ❏ macOS ❏ Xcode 9+ ❏ iOS simulator or iOS device For Android ❏ macOS, Windows, or Linux ❏ Android Studio ❏ Android Emulator or Android Device Setup
9. Setup $ flutter doctor Checks your environment and displays a report to the terminal window $ flutter upgrade Updates both the Flutter SDK and your packages $ flutter packages get Checks your environment and displays a report to the terminal window $ flutter packages upgrade Will retrieve the highest available version of the package $ git clone -b beta https://github.com/flutter/flutter.git $ export PATH=[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin:$PATH
10. ➔ Set up VSCode || Android Studio || IntelliJ IDEA ➔ Install extensions / plugins ➔ $ flutter doctor to validate setup Setup OPTION 1 - TERMINAL $ flutter create myapp $ cd myapp $ flutter run Note: this runs flutter in debug mode… runs it in a VM to implement hot reloading OPTION 2 - VSCode 1. Command Palette 2. ‘Flutter: New Project’ 3. Project name 4. Specify location 5. Press F5
11. Resources FLUTTER • https://flutter.io/ - Lots of good info - follow the getting started part • https://www.infoq.com/news/2018/03/flutter-mobile-cross-ui-beta • https://hackernoon.com/flutter-5-reasons-why-you-may-love-it-55021fdbf1aa • https://www.theverge.com/2018/2/28/17064298/google-flutter-sdk-app-development-ui-fram ework-beta • https://pub.dartlang.org/flutter/ - packages Themes • https://docs.flutter.io/flutter/material/material-library.html • https://docs.flutter.io/flutter/material/ThemeData-class.html TUTORIALS • https://flutter.io/get-started/codelab/ • https://codelabs.developers.google.com/ - Search for ‘Flutter’ Dart • https://hackernoon.com/why-flutter-uses-dart-dd635a054ebf • https://dartpad.dartlang.org/ - Online Repl for Dart • https://www.dartlang.org/