The document provides an overview of cross-platform mobile development using Flutter and Dart, highlighting key features such as Dart's object-oriented, statically typed nature and Flutter's ability to create native apps with high-performance animations. Installation instructions for different operating systems and a comparison between Flutter and React Native are included, along with resources for further learning. It emphasizes Flutter's rapid development capabilities and its integration with Google's technologies.

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