Want a faster mobile development ? Flutter is the way

Flutter is a Framework developed and used by Google using Dart and a C++ engine to create Mobile Applications writing code only once. With Flutter you can write code only once and release it in the appstore and in the playstore. With Flutter you prototype, develop and release faster. This Talk will teach us the importance of Flutter, its most important features and finally how it works. The talk will end with an example of a simple application developed in Flutter.

Transcript

1. WANT A FASTER MOBILE DEVELOPMENT ? Flutter is the way Wilfried Mbouenda Mbogne
3. 1. What is Flutter ? 2. The story 3. Tooling 4. Widgets 5. Testing 6. Use Cases 7. Example
4. Senior Android Engineer and public speaker. @ewilly1 @be.betr.codr Wilfried Mbouenda Mbogne
5. 1. What is Flutter ?
6. 1. mobile UI framework 2. made by google 3. helps to craft high-quality native interfaces on iOS and Android 4. free and open source 5. Fast Development experience
7. What do you need to setup Flutter? • Operating System of 64 bit (Windows, MacOs, Linux) • Disk Space: Windows — 400 MB, MacOs — 700 MB, Linux — 600 MB • Tools: Windows (git), MacOs-Linux (bash, mkdir, rm, git, curl, unzip, which) • Get the Flutter SDK • run “flutter doctor” on command prompt or POWER SHELL.
8. The language
9. Dart is a general-purpose programming language originally developed by Google and later approved as a standard by Ecma — Wikipedia
10. 1. Dart language is a cool language: 2. it’s familiar and easy to learn for developers 3. it’s Class-based and optionally typed 4. It has a cool Asynchronous Library (Future and Stream) 5. Dart helps to create an easy to understand layout for your UI
11. 2. The story “sky” → Flutter Alpha → Flutter Beta
12. 3. Tooling
13. Flutter CLI doctor: Show information about the installed tooling. This command is vital to know if there is something dependencies missing. logs: Show log output for running Flutter apps. screenshot: Take a screenshot from a connected device. test: Run Flutter unit tests for the current project. trace: Start and stop tracing for a running Flutter app. With this command you can trace and measure wall/CPU time.
14. 4. Widgets
15. In Flutter, everything is a widget
16. EACH WIDGET IS AN IMMUTABLE DECLARATION OF PART OF THE USER INTERFACE flutter.io
17. A widget can define: • a structural element (like a button or menu) • a stylistic element (like a font or color scheme) • an aspect of layout (like padding) • ... flutter.io
18. Simple Widgets
19. text
20. Button
21. Other Widgets
22. Row and Column https://flutter.io/widgets/
23. Widgets tree
24. Column Text Text Image Row Text
25. Stateless versus Stateful Widgets
26. Stateless Widget   These one don’t changes. Example: A text Widget with a constant string.
27. Stateful Widget These one have a state and can change. When the state values changes, the Widget will be redrawn on the screen.
28. Platform Widgets
29. defaultTargetPlatform == TargetPlatform.iOS? Material Components Widgets Cupertino (iOS-style) Widgets
30. 5. Testing
31. Unit testing Tests are run on local Dart VM with a headless version of the Flutter Engine
32. Widget testing test a single widget.
33. Integration testing UI automated test. Espresso (Android) UI Automation (iOS)
34. 6. Use cases
35. Hamilton Hookle Bendometer
36. Bonus: Platform channels
38. Bonus 2: Flutter Plugins
39. https://github.com/flutter/plugins Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems flutter.io
40. Bonus 3: Learning Flutter 003 Kevin Segaud - Dart developer @kevin_segaud
41. 7. Example Flutter Quotes
43. Flutter Quotes - Technologies
44. Flutter Quotes - The widgets
45. widget = new Padding( padding: new EdgeInsets.all( 32.0), child: new Column(children: <Widget>[ new Flexible( child: new FirebaseAnimatedList( query: reference, sort: (a, b) => b. key.compareTo(a. key), padding: new EdgeInsets.all( 8.0), reverse: true, itemBuilder: (context, DataSnapshot snapshot, Animation<double> animation,int x) { //new return new Quote( snapshot: snapshot, animation: animation ); }, ), ), new Align( alignment: const Alignment(0.0, -0.2), child: new FloatingActionButton( child: const Icon(Icons. add), onPressed: () { Navigator. of(context).pushNamed( '/add'); }, ), ), ], ), );
46. new Form( key: _formKey, autovalidate: _autovalidate, onWillPop: _warnUserAboutInvalidData, child: new ListView( padding: const EdgeInsets.symmetric(horizontal: 16.0), children: <Widget>[ new TextFormField( decoration: const InputDecoration( icon: const Icon(Icons. person), hintText: 'Author', labelText: 'author *', ), onSaved: (String value) { _author = value; }, validator: _validateName,), new TextFormField( decoration: const InputDecoration( icon: const Icon(Icons. note), hintText: 'Your quote', labelText: 'Quote',), maxLines: 3, keyboardType: TextInputType. emailAddress, onSaved: (String value) { _quote = value; }, validator: _validateName,), new Container( alignment: Alignment. center, padding: const EdgeInsets.symmetric(vertical: 16.0), child: new RaisedButton( child: const Text('ADD'), onPressed: _handleSubmitted,),),],),),
47. Flutter Quotes - The logic
48. bool _IsLoading; bool Logged; State _IsLoading _IsLoading true false Logged true impossible quotes Logged false progress login
49. Flutter Quotes - the code https://github.com/WillyShakes/MasterLogin
50. Flutter community @flutterio flutter flutter-dev flutter
51. Thanks for your attention!
52. Q & A @ewilly1 Wilfried Mbouenda Mbogne
53. WANT A FASTER MOBILE DEVELOPMENT ? Flutter is the way @ewilly1