Vuoi uno sviluppo mobile più veloce? Flutter è la via!

Transcript

1. WANT A FASTER MOBILE DEVELOPMENT ? Flutter is the way Wilfried Mbouenda Mbogne
2. Story Time!
3. Content 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
8. 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.
9. The language
10. Dart is a general-purpose programming language originally developed by Google and later approved as a standard by Ecma — Wikipedia
11. 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
12. 2. The story “sky” → Flutter Alpha → Flutter Beta
13. 3. Tooling
14. 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.
15. 4. Widgets
16. In Flutter, everything is a widget
17. EACH WIDGET IS AN IMMUTABLE DECLARATION OF PART OF THE USER INTERFACE flutter.io
18. 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
19. Simple Widgets
20. text
21. Button
22. Other Widgets
23. Row and Column https://flutter.io/widgets/
24. Widgets tree
25. Column Text Text Image Row Text
26. Stateless versus Stateful Widgets
27. Stateless Widget   These one don’t changes. Example: A text Widget with a constant string.
28. Stateful Widget These one have a state and can change. When the state values changes, the Widget will be redrawn on the screen.
30. Platform Widgets
31. defaultTargetPlatform == TargetPlatform.iOS? Material Components Widgets Cupertino (iOS-style) Widgets
32. 5. Testing
33. Unit testing Tests are run on local Dart VM with a headless version of the Flutter Engine
34. Widget testing test a single widget.
35. Integration testing UI automated test. Espresso (Android) UI Automation (iOS)
36. 6. Use cases
37. Hamilton Hookle Bendometer
38. Bonus: Platform channels
40. Bonus 2: Flutter Plugins
41. https://github.com/flutter/plugins Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems flutter.io
42. Bonus 3: Learning Flutter 003 Kevin Segaud - Dart developer @kevin_segaud
43. 7. Example Flutter Quotes
45. Flutter Quotes - Technologies
46. Flutter Quotes - The widgets
47. 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'); }, ), ), ], ), );
48. 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,),),],),),
49. Flutter Quotes - The logic
50. bool _IsLoading; bool Logged; State _IsLoading _IsLoading true false Logged true impossible quotes Logged false progress login
51. Flutter Quotes - the code https://github.com/WillyShakes/MasterLogin
52. Flutter community @flutterio flutter flutter-dev flutter
53. Thanks for your attention!
54. Q & A @ewilly1 Wilfried Mbouenda Mbogne
55. WANT A FASTER MOBILE DEVELOPMENT ? Flutter is the way @ewilly1