Download to read offline
![HTML/CSS Analogs in Flutter
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
<div class="greybox">
Lorem ipsum
</div>
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Georgia;
}](https://image.slidesharecdn.com/chooseflutter-210626080551/85/Choose-flutter-14-320.jpg)
![[Alexandria Devfest] the magic of flutter](https://cdn.slidesharecdn.com/ss_thumbnails/egyptdevfestthemagicofflutter-181114115455-thumbnail.jpg?width=640&height=640&fit=bounds)
![Flutter_Workshop-_From_Zero_to_App_Hero[1]-1[1].pptx](https://cdn.slidesharecdn.com/ss_thumbnails/flutterworkshop-fromzerotoapphero1-11-251227081205-a99e85f6-thumbnail.jpg?width=640&height=640&fit=bounds)
Choose flutter
- 1. Choose Flutter Adetunji Samuel DSCMember @ Covenant University
- 2. What is Flutter? ASDK that makes building high-performing, native and beautiful apps Works for both Android and iOS An open-source toolkit, developed by Google
- 3. Who is Flutterfor? Designers converge on a brand-driven experience on Android and iOS Prototypers enjoy a high-fidelity and fast way to build working prototypes. Developers benefit from fantastic developer tools, an easy-to-use language, a rich set of widgets and great IDE support. Flutter frees up valuable time for working on features and delightful experiences.
- 4.
- 5. Natural look andFeel
- 6.
- 8.
- 9.
- 10.
- 11. What do yousee here?
- 12. Diagram the Layout -Look for rows and columns - Is there a grid? - Any overlapping elements? - Do we need tabs? - Padding, alignment or borders needed?
- 13.
- 14. HTML/CSS Analogs inFlutter var container = new Container( // grey box child: new Text( "Lorem ipsum", style: new TextStyle( fontSize: 24.0 fontWeight: FontWeight.w900, fontFamily: "Georgia", ), ), width: 320.0, height: 240.0, color: Colors.grey[300], ); <div class="greybox"> Lorem ipsum </div> .greybox { background-color: #e0e0e0; /* grey 300 */ width: 320px; height: 240px; font: 900 24px Georgia; }
- 15.
- 16. $ flutter doctor Checksyour environment and displays a report to the terminal window $ flutter upgrade Updates both the Flutter SDK and your packages
- 17. pubspec.yaml name: flutter_project description: Anamazing Flutter project using Firebase Auth dependencies: flutter: sdk: flutter firebase_auth: "^0.2.5"
- 18. pubspec.yaml name: flutter_project description: Anamazing Flutter project using Firebase Auth dependencies: flutter: sdk: flutter firebase_auth: ">=0.1.2 <0.2.6"
- 19. $ flutter packagesget Checks your environment and displays a report to the terminal window $ flutter packages upgrade Will retrieve the highest available version of the package
- 20. $ flutter format Automaticallyformats your code according to the Flutter-style $ flutter analyze Analyzes your code and help you find possible mistakes
- 21. Hot Reload Injecting updatedsource code files into the running Dart VM Stateful: App state is retained after a reload. Quickly iterate on a screen deeply nested in your app
- 23. Dart Observatory Statement-level single-steppingdebugger and profiler Automatically running when you start your app using flutter run See which lines of code have executed Check out memory allocations Debug memory leaks & fragmentation
- 24. The Power ofWidgets
- 25. Great looking andfast Widgets
- 26. Everything is aWidget
- 27. Goodbye, global layoutsystem new Center( child: new Text('Centered Text', style: textStyle), ) Local layouts: Every Widget defines it’s own layout. No need to tell the parent that it’s children are supposed to be centered.
- 28.
- 29. Customizing and extendingWidgets Flutter’s Widget system was designed to be easily customizable Composition: Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets class RaisedButton extends StatelessWidget { ... }
- 30. Each layer builds upon the previous layer SkiaDart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino
- 31.
- 32. Using platform channels allowsfor receiving method calls and sending back results
- 33. Example: Retrieving thebattery level* class MainActivity() : FlutterActivity() { private val CHANNEL = "samples.flutter.io/battery" override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) GeneratedPluginRegistrant.registerWith(this) MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> // TODO } } } * Example written in Kotlin for Android
- 34. Working with theresponse argument* MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result -> if (call.method == "getBatteryLevel") { val batteryLevel = getBatteryLevel() if (batteryLevel != -1) { result.success(batteryLevel) } else { result.error("UNAVAILABLE", "Battery level not available.", null) } } else { result.notImplemented() } } * Example written in Kotlin for Android
- 35. Flutter-side invocation ofplatform methods String _batteryLevel = 'Unknown battery level.'; Future<Null> _getBatteryLevel() async { String batteryLevel; try { final int result = await platform.invokeMethod('getBatteryLevel'); batteryLevel = 'Battery level at $result % .'; } on PlatformException catch (e) { batteryLevel = "Failed to get battery level: '${e.message}'."; } setState(() { _batteryLevel = batteryLevel; }); }
- 36.
- 37. - Compiles toNative Code - No reliance on OEM widgets - No bridge needed - Structural Repainting
- 38. Reactive Frameworks onthe Web Compare Update Real DOM Virtual DOM Application Platform R e n d e r Canvas Events
- 39. Reactive Frameworks onMobile Compare Update Platform Widgets Virtual Widgets Application Platform R e n d e r Canvas Events
- 40.
- 41.
- 42. - Sound typesystem - Tree Shaking - Rich core libraries - Multi-gen, lockless GC
- 43. - Single codebasefor Android and iOS - Rapid development cycles - Great tooling
- 44. “Running at 60fps, user interfaces created with Flutter perform far better than those created with other cross-platform development frameworks.” code.tutsplus.com/tutorials/developing-an-android-app-with-flutter--cms-28270
- 45. “Coding with Dartand Flutter rekindled the joy I had when I started with mobile dev way back when … No B.S.” traversoft.com/blog/2017/08/08/conference-app-flutter
- 46. "The UI isbutter smooth (when building a release version), I have never seen such a smooth Android app" Pascal Welsch, Speaker at Droidcon Berlin
- 47. Additional resources Blog: What’sRevolutionary about Flutter by Wm Leler: goo.gl/bZcFR9 Video: Flutter's Rendering Pipeline by Adam Barth: youtu.be/UUfXWzp0-DU Video: The Mahogany Staircase by Ian Hickson: youtu.be/dkyY9WCGMi0 And of course: github.com/flutter & flutter.io
- 48. References 1. The magicof flutter , Tim Messerschmidt 2. Hitchhiker's guide to the Flutter , Bhavik Makwana
- 49. Thank you! Adetunji Samuel DscMember @ Covenant University
Editor's Notes
- #4 Brand-driven == customized Internal teams at Google (CRM system) have managed to build functioning prototypes in a week. Designers with 0 coding experiences became productive with Flutter in weeks - allowing them to build prototypes in hours.
- #6 Gives the natural look and feel as per the system environment. Back arrow icons is different for the iOS and Android. Default Bounce effect in scrollview in iOS app.
- #7 Gives the natural look and feel as per the system environment. Back arrow icons is different for the iOS and Android. Default Bounce effect in scrollview in iOS app.
- #10 I’d like to concentrate on two parts of Flutter, that I especially admire
- #11 Allows to quickly build beautiful UIs - we will have a look at some of the Widgets later
- #12 When talking to a designer and a developer, you will most definitely receive two different answers, leading to different understanding of the same UI and effectively leading to confusion. We can avoid that by bringing in designers and developers early on and cooperate on the same language and same UI toolkit.
- #14 Try to place some of the implementation into functions to avoid deeply nested code
- #15 There is a whole section in the Flutter docs that deals with this and helps people familiar with HTML and CSS to quickly become productive designers with Flutter
- #19 If I wanted to limit the package to a specific range of versions, I could do that with the following syntax. Very similar to what Gradle offers you on Android.
- #21 Formatter also exists for IntelliJ using the Dart plugin Analyzer also runs automatically in IntelliJ with the Flutter plugin
- #22 The beauty of hot reload is, that even after fixing an error, state is still maintained - allowing to iterate and develop far quicker.
- #24 Also available via IntelliJ’s built-in debugger
- #26 The team analyzed popular apps and noticed a lot of custom widgets. So Flutter is designed to allow for that. Composition goes over inheritance
- #27 This could be centering a text (by wrapping it in a center widget) or putting three column items into a row (widget).
- #29 StatelessWidget is used for immutable elements that only rely on the object configuration information StatefulWidget is used for elements that can dynamically change based on state-changes in the system Everytime that state changes, setChange() is called by the object
- #30 RaisedButton combines a Material widget with a GestureDetector widget
- #31 Skia is the same graphics engine that Android uses. This one is built directly from source - compiled whenever you build Flutter The text engine is from Blink, the rendering engine from Chromium. Layout for text is terribly hard - think about right to left, displaying dates and more. Every layer of the Framework builds upon the layer below it. For instance, the Material and Cupertino layers compose basic widgets from the widgets layer, which itself orchestrates objects from the rendering layer. This also allows to customize the framework as you please. This part of the beauty of Dart’s tree shaking mechanism (eliminates dead code).
- #32 If you’re coming from Android: this is very similar to serialization of data and then sending it across a channel - similar to an event bus or Intent
- #34 Let’s focus on the blue bit for a second to understand how you’d do this on Android
- #35 This works completely analog on iOS using Swift
- #36 The call may fail – for example if the platform does not support the platform API (such as when running in a simulator), so we wrap the invokeMethod call in a try-catch statement.
- #38 Flutter comes with it’s own widgets and renderer No support library needed. Not depended on OEM updates. Thanks to composition, we can only redraw what changed Bit blitting moved items that didn’t change from Cache
- #39 The virtual DOM is immutable and needs to be rebuilt every frame - so 60 times per second when targeting 60fps
- #41 The app being in control of the renderer gives it more potential for controlling animations
- #42 Dart as a language is designed to be reliable. No surprises, no magic that can create confusion. Very familiar for people with background in Java, JS, C# and more
- #43 Coming with Dart 2: sound type system (static and runtime type checks) Used to be optional in Dart 1 Dealing with Reactive Views requires dealing with a lot of small objects Here’s where Dart’s GC is super helpful Tree shaking != dead code elimination It only includes what you need instead of eliminating what you don’t need Originally written in JavaScript and C++. Tested out about 20 languages until the team ended up with Dart. Compiles to native so C++ isn't even needed anymore.