This is the presentation to go along with the talk for the 2019 South Dakota Code Camp by Harshith Keni https://2019.southdakotacodecamp.com/schedule/sessions/mobile-development-with-flutter-and-dart/

1. Getting Started with Cross-Platform Mobile
Development with Flutter and Dart
Harshith Keni

2. About Me

3. SEARCH MILLIONS. FIND ONE.
Sponsors

4. SEARCH MILLIONS. FIND ONE.
• Object Oriented
• Statically Typed
• C-Style Syntax
• Multiple Runtime Environments
• Transpiled into JS to run in the browser
• Runs in the ‘Dart VM’ when executed from a
command line
• Compiled to machine code to run on mobile
devices
• Strong Standard Library
What is Dart
void main() {
print('Hello World!');
}

5. SEARCH MILLIONS. FIND ONE.
• Cross-platform UI SDK
• Native apps for mobile, web and desktop
• Native Performance
• Compiled to native machine code
• 120 FPS animations
• Powerful UI widgets
• Material Design (Android Style)
• Cupertino Widgets (iOS Style)
What is Flutter
import 'package:flutter/material.dart’;
void main() => runApp(HelloWorldApp());
class HelloWorldApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello World App’,
home: Scaffold(
appBar: AppBar(
title: Text('Hello World App’),
),
body: Center(
child: Text('Hello World’),
),
),
);
}
}

6. SEARCH MILLIONS. FIND ONE.
MacOS
• Download and setup SDK
• Install XCode and setup the iOS Simulator
• Install Android Studio and SDKs
• Setup an editor:
• VSCode with Flutter and Dart Plugins
• Android Studio/IntelliJ with Flutter and Dart
Plugins
Setup
Setup Instructions at: flutter.dev
Windows/Linux
• Download and setup SDK
• Install Android Studio and SDKs
• Setup an editor:
• VSCode with Flutter and Dart Plugins
• Android Studio/IntelliJ with Flutter and Dart
Plugins

7. SEARCH MILLIONS. FIND ONE.
• Build and compose widgets that control UI elements on the screen
• Flutter has a lot of default widgets – Text, Column, Container, Appbar, and many more
• https://flutter.dev/docs/development/ui/widgets
• Widgets are similar to Components in React
• Stateless Widgets ~ Function Components
• Stateful Widgets ~ Class Components
Flutter Fundamentals

8. SEARCH MILLIONS. FIND ONE.
Flutter
• Created by Google
• Smaller enthusiastic
community support
• Great Documentation
• Easiest to get started
• Open source
Background and Community
React Native
• Created by Facebook
• Huge community support
• Documentation average at
best
• Fairly easy to get started
• Open source
Native
• Platform specific
• Huge but scattered
community support
• Proprietary

9. SEARCH MILLIONS. FIND ONE.
• Flutter web and desktop support in active development
• Flutter apps open you up to Fuschia OS
• Fuschia could be Android’s replacement in the future
• Flutter apps are Fuschia-ready
• Major support from Google behind it
• Dart 2.6 just released with support for compiled self-contained native executables
Future

10. SEARCH MILLIONS. FIND ONE.
• Dart: https://dart.dev/
• Flutter: https://flutter.dev/
• DartPad: https://dartpad.dartlang.org/
Resources

11. Thank you PS: Carsforsale.com is hiring