Getting Started with Cross-Platform Mobile Development with Flutter and Dart
1 like88 views
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.
Getting Started with Cross-Platform 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