Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile focused 75th DevClub.lv

1,017 views

Published on

Maintaining multiple code bases for the same application is often a pain in the neck for mobile developers. In the recent years, different frameworks have appeared in the market that aim to reduce the workload of developers by offering them a write-once-run-everywhere approach. In this session, Wei-Meng will take a quick look at the different frameworks available – Xamarin, React Native, and Flutter. He will focus on using Flutter and see how it makes your life as a mobile developer easier.
(Language – English)

Wei-Meng Lee is a technologist and founder of Developer Learning Solutions (http://www.learn2develop.net).

Published in: Technology
  • Be the first to comment

Cross Platform Mobile Development using Flutter by Wei Meng Lee at Mobile focused 75th DevClub.lv

  1. 1. Getting Started with Cross Platform Development using Flutter Wei-Meng Lee Developer Learning Solutions www.learn2develop.net @weimenglee weimenglee@learn2develop.net
  2. 2. README
  3. 3. Agenda • Cross-Platform Development Frameworks • Getting Started with Flutter • Demos!
  4. 4. Developing for the Mobile Platforms • Two dominant platforms • iOS • Android • Others have come and go • Symbian • Windows Phone • Blackberry OS • Bada and Tizen • Sailfish
  5. 5. ?
  6. 6. New Platform? • Huawei’s own mobile OS - HongMeng • Rumored to be built with the help of former Nokia engineers • Gradually replace Android; used on smartphone, tablet, TV, automobile, wearable; compatible with all Android apps • Uphill task • Needs a lot of traction to succeed • Necessary to have a strong tool chain for developers • Open up to the non-Chinese speaking world • Needs a strong app-store • Microsoft and Amazon have struggled for years 鸿蒙
  7. 7. Cross Platform Development
  8. 8. Cross Platform Development Solutions • Hybrid Apps / Web Apps • PhoneGap, Ionic, PWA • True Native Apps • Xcode, Android Studio, Xamarin, React Native, Flutter
  9. 9. Xamarin • Founded by the same people who created Mono • Uses C# • Now owned by Microsoft • Has the following components: • Xamarin.iOS • Xamarin.Android • Xamarin.Mac • Xamarin.Forms
  10. 10. How Xamarin Works Shared Code Database Access Web Services Access Business Logic Android UI Code iOS UI Code Xamarin.Android Xamarin.iOS
  11. 11. Xamarin.Forms Shared Code Database Access Web Services Access Business Logic Xamarin.Forms • UI rendered based on the platform’s UI widget
  12. 12. React Native • React Native is a JavaScript framework for writing native iOS and Android apps • based on React, Facebook's JavaScript library for building UI • React Native apps are written using a mixture of: • JavaScript • CSS • JSX (Javascript Extension) = JS + XML • React Native translates your UI markup to native UI elements, hence your app is a pure native app
  13. 13. How React Native Works render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); } iOS Android ??? Metro Bundler <View> UIView View React Native iOS Android JavaScriptCore JavaScriptCore http://localhost:8081/index.bundle?platform=android• http://localhost:8081/index.bundle?platform =ios • UI rendered based on the platform’s UI widget
  14. 14. Flutter • Google’s portable UI toolkit for building natively-compiled mobile, web, and desktop apps • Uses Google’s Dart programming language • It has the following major components: • Flutter engine - written in C++, provides low-levels rendering support using Google’s Skia graphics library • Foundation Library - written in Dart, provides a base layer of functionality for apps and APIs to communicate with the engine • Widgets - basic building blocks for UI
  15. 15. Platform Widgets • Unlike Xamarin and React Native, Flutter does not use the platform’s native widgets • Instead, Flutter provides a set of widgets (including Material Design and Cupertino (iOS) widgets), managed and rendered by Flutter’s framework and engine
  16. 16. How Flutter Works Dart Widgets Render Engine Platform Channels Canvas Events FlutterApp Platform Camera Audio Location Sensors Platform APIs • Flutter does not rely on the device’s OEM widgets - it renders every view component using its own high-performance rendering engine • Widgets are rendered onto a Skia canvas and sent to the platform. The platform shows the canvas and sends events back
  17. 17. Comparing the Frameworks iOS Android Xamarin React Native Flutter From Apple Google Microsoft Facebook Google Language Objective-C/ Swift Java/Kotlin C# ECMAScript Dart IDE Xcode Android Studio Visual Studio Visual Studio Code Visual Studio Code Package Manager Swift Package Manager/ CocoaPods Gradle/Maven Nuget npm pub UI Native Native Native Native Rendered
  18. 18. Dart • Dart is a programming language developed by Google • Similar to Java, C#, Swift, Kotlin • For development, Dart uses JIT (Just In Time) compilation • For release, Dart uses AOT (Ahead Of Time) to compile to fast native code • Dart can also be compiled to JavaScript, to be used on the web
  19. 19. Download the Dart Cheat Sheet • http://bit.ly/2uCSLE3
  20. 20. Demo • Creating a Flutter Project • $ flutter create hello_world
  21. 21. Structure of a Flutter Project • lib/ • Contains code for your app • pubspec.yaml • Stores the list of packages needed by your app • ios/android • Code specific to iOS and Android; sets permission for your app, e.g. location, Bluetooth, etc
  22. 22. Running a Flutter Project • $ flutter emulators • $ flutter emulators --launch apple_ios_simulator • $ cd hello_world • $ flutter run
  23. 23. A BareBone Flutter Project import 'package:flutter/material.dart'; void main() => runApp( Text( 'Hello, Riga!', textDirection: TextDirection.ltr, ), ); runApp() has a widget argument This argument will become the root widget for the whole app Hot-reload has no effect on the root widget Text is a widget
  24. 24. Widgets • In Flutter, UI are represented as Widgets • Widgets was inspired by React • Widgets describe how the view should look like, given its current configuration and state • When the state changes, the widget rebuilds its description, and the framework compares it with the previous description to determine the minimal changes needed to update the UI
  25. 25. Center import 'package:flutter/material.dart'; void main() => runApp( Center( child:Text( 'Hello, Riga!', textDirection: TextDirection.ltr, ), ) ); Center is a widget that aligns another widget
  26. 26. Container void main() => runApp( Center( child: Container( margin: const EdgeInsets.all(10.0), color: Color(0xFFFFBF00), width: 100.0, height: 100.0, ), ), ); Container is a a convenience widget that combines common painting, positioning, and sizing widgets.
  27. 27. Child within a Container void main() => runApp( Center( child: Container( margin: const EdgeInsets.all(10.0), color: Color(0xFFFFBF00), width: 300.0, height: 100.0, child: Center( child:Text( 'Hello, Riga!', textDirection: TextDirection.ltr, style:TextStyle( color:Color(0xFF000000), fontSize:32, ) ), ), ), ), );
  28. 28. MaterialApp void main() => runApp( MaterialApp( title: 'Material App Demo', home: Scaffold( appBar: AppBar( title: Text('Material App Demo'), ), body: Center( child: Text('Hello Riga'), ), ), ) ); • The MaterialApp class represents an application that uses material design • It implements the Material design language for iOS, Android, and web.
  29. 29. Adding Widgets to the Bodyvoid main() => runApp( MaterialApp( title: 'Material App Demo', home: Scaffold( appBar: AppBar( title: Text('Material App Demo'), ), body: Center( child: Container( margin: const EdgeInsets.all(10.0), color: Color(0xFFFFBF00), width: 300.0, height: 100.0, child: Center( child:Text( 'Hello, Riga!', textDirection: TextDirection.ltr, style:TextStyle( color:Color(0xFF000000), fontSize:32, ) ), ), ), ), ), ) );
  30. 30. CupertinoApp • The CupertinoApp class represents an application that uses Cupertino design • It implements the current iOS design language based on Apple's Human Interface Guidelines. import 'package:flutter/cupertino.dart'; void main() => runApp( CupertinoApp( title: 'Cupertino App Demo', home: CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: const Text('Cupertino App Demo'), ), child: Center( child: Text('Hello Riga'), ), ) ), );
  31. 31. Types of Widgets • Stateless widgets • Changing the properties of stateless widgets has no effect on the rendering of the widget • Stateful widgets • Changing the properties of stately widgets will trigger the life cycle hooks and update its UI using the new state
  32. 32. Creating a Stateless Widget • To create a stateless widget: • Name the new Widget class • Extend the class from StatelessWidget • Implement the build() method, with one argument of type BuildContext and return type of Widget class MyCustomWidget extends StatelessWidget { @override Widget build(BuildContext context) { return null; } }
  33. 33. Defining the Stateless Widget class MyCustomWidget extends StatelessWidget { // all properties in stateless widget must declare with final or const final String name; // class constructor MyCustomWidget(this.name); @override Widget build(BuildContext context) { return Center( child: Container( margin: const EdgeInsets.all(10.0), color: Color(0xFFFFBF00), width: 300.0, height: 100.0, child: Center( child: Text( 'Hello, $name!', textDirection: TextDirection.ltr, style: TextStyle( color: Color(0xFF000000), fontSize: 32, ) ), ), ), ); } }
  34. 34. Using the Stateless Widget void main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Hello, world!', ), MyCustomWidget("Riga"), ], ), ), ), );
  35. 35. Using the Stateless Widget void main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Hello, world!', ), MyCustomWidget("Riga"), MyCustomWidget("Singapore"), ], ), ), ), );
  36. 36. Hot Reload@override Widget build(BuildContext context) { return Center( child: Container( margin: const EdgeInsets.all(10.0), color: Color(0xFFFFBF00), width: 300.0, height: 100.0, child: Center( child:Text( 'Welcome!, $name!', textDirection: TextDirection.ltr, style:TextStyle( color: Color(0xFF000000), fontSize:32, ) ), ), ), ); }
  37. 37. class MyCustomStatefulWidget extends StatefulWidget { MyCustomStatefulWidget({Key key, this.country}) : super(key: key); final String country; @override _DisplayState createState() => _DisplayState(); } class _DisplayState extends State<MyCustomStatefulWidget> { int counter = 0; @override Widget build(BuildContext context) { return Center( ... ); } } Stateful Widgets Doesn’t contain state or UI representation Contains the state and UI • Stateful widgets do not exist by themselves; they require an extra class to store the state of the widget
  38. 38. class _DisplayState extends State<MyCustomStatefulWidget> { int counter = 0; @override Widget build(BuildContext context) { return Center( child: Container( margin: const EdgeInsets.all(10.0), color: Color(0xFFFFBF00), width: 300.0, height: 100.0, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ... ], ), ), ) ); } }
  39. 39. ... children: <Widget>[ Text( widget.country, textDirection: TextDirection.ltr, style:TextStyle( color: Color(0xFF000000), fontSize:32, ) ), Center( child: GestureDetector( onTap: () { setState(() { ++counter; }); }, child: Container( decoration: BoxDecoration( shape: BoxShape.rectangle, color: Color(0xFF17A2B8), ), child: Center( child: Text( '$counter', style: TextStyle(fontSize: 25.0), ), ), ), ), ), ], ...
  40. 40. Using the Stateful Widget import 'package:flutter/material.dart'; void main() => runApp( Directionality( textDirection: TextDirection.ltr, child: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Hello, world!', ), MyCustomStatefulWidget(country: "Riga"), MyCustomStatefulWidget(country: "Singapore"), ], ), ), ), );
  41. 41. GestureDetector Center( child: GestureDetector( onTap: () { setState(() { ++counter; }); }, onLongPress: () { setState(() { --counter; }); }, child: Container( … • The GestureDetector widget doesn’t have a visual representation but instead detects gestures made by the user • When the user taps the Container, the GestureDetector calls its onTap callback • You can use GestureDetector to detect a variety of input gestures, including taps, drags, and scales.
  42. 42. Using the Stateful Widget in a Material App void main() => runApp( MaterialApp( title: 'Material App Demo', home: Scaffold( appBar: AppBar( title: Text('Material App Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Hello, world!', ), MyCustomStatefulWidget(country: "Riga"), MyCustomStatefulWidget(country: "Singapore"), ], ), ), ), ) );
  43. 43. Combining Stateless and Stateful Widgets void main() => runApp( MaterialApp( title: 'Material App Demo', home: Scaffold( appBar: AppBar( title: Text('Material App Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Hello, world!', ), MyCustomStatefulWidget(country: "Riga"), MyCustomStatefulWidget(country: "Singapore"), MyCustomWidget("Latvia"), ], ), ), ), ) );
  44. 44. Packages • Flutter supports using shared packages contributed by other developers • Some commonly used packages: • http • location • google_maps_flutter • flutter_local_notifications
  45. 45. Demos
  46. 46. Thank You!

×