Jonathan Filbert - A Very Gentle Introduction to Flutter

A deck I used as a material for a Flutter Workshop held by Google Developer Student Clubs @ University of Indonesia.

Transcript

1. A (very) Gentle Introduction to Flutter
2. Universitas Indonesia This is a long workshop. Let’s all be friends. Disclaimer
3. Universitas Indonesia This is a long workshop. Let’s all be friends.
4. Universitas Indonesia Learning takes time. Make the journey as fun as possible. Disclaimer
5. Universitas Indonesia
6. Universitas Indonesia Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter.dev What is Flutter?
7. Universitas Indonesia Google’s new way of developing applications for: Mobile Web (Project Hummingbird) Desktop Open Source! What really is Flutter?
8. Universitas Indonesia Build consistent native mobile apps with a single codebase. Hot reload == awesomeness! Easy to learn. Why Flutter?
9. Universitas Indonesia Without Flutter: 1. Inconsistent 2. Different looks for different platforms Build consistent mobile apps
10. Universitas Indonesia With Flutter: 1. Consistent 2. WYSIWYG to all platforms! Build consistent mobile apps
11. Universitas Indonesia No more restarts* *except when the state has been modified Hot reload
12. Universitas Indonesia Native Android Hello World Easy to learn
13. Universitas Indonesia Flutter Hello World Easy to learn
14. Universitas Indonesia Before we begin, make sure you have: Development Setup Android Studio Flutter SDK Android SDK & Emulator
15. Universitas Indonesia Check your flutter setup Development Setup ~ flutter doctor
16. Universitas Indonesia Start a development emulator Development Setup ~ flutter emulators PIXEL_API_V29 ~ flutter emulators --launch PIXEL_API_V29
17. Universitas Indonesia A typical development environment looks like this: Development Setup
18. Universitas Indonesia Initializing a Flutter Project Chapter 1
19. Universitas Indonesia Initializing a Flutter Project ~ flutter create dscapp ~ cd dscapp
20. Universitas Indonesia Open the project in your editor and run. Initializing a Flutter Project Android Studio VS Code
21. Universitas Indonesia Initializing a Flutter Project
22. Universitas Indonesia Initializing a Flutter Project
23. Universitas Indonesia Hello World Chapter 2
24. Universitas Indonesia Structure of a Flutter app
25. Universitas Indonesia Structure of a Flutter app Android & IOS Folder Holds a complete app for each respective platform. Use if you want to implement platform specific things. Lib folder Holds your dart code for your Flutter app Pubspec.yml Metadata about your apps (name, verson, etc) and dependencies
26. Universitas Indonesia In your main.dart import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: Center( child: Text("Hello World"), ), ), ), ); }
27. Universitas Indonesia In your main.dart
28. Universitas Indonesia Congrats!
29. Universitas Indonesia Widgets Widgets are a Data Type in Flutter that lets you build user interfaces. The central idea is that you build your UI out of widgets. Widgets describe what their view should look like given their current configuration and state. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next.
30. Universitas Indonesia Widgets
31. Universitas Indonesia Stateless vs Stateful Widgets A widget that is a collection of underlying widgets that describe its appearance more specifically. This happens all the way down until the root of all widgets, RenderObject.
32. Universitas Indonesia Stateless vs Stateful Widgets A widget that has a mutable state property. A state property is a mutable variable inside the widget, that when changed, will trigger a widget diffing process in the widget tree. This will result in re-rendering of the changed widget.
33. Universitas Indonesia Implementing a Stateless Widget . . . void main() => runApp(MaterialApp( home: MyApp(), ));
34. Universitas Indonesia Implementing a Stateless Widget class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: Scaffold( appBar: AppBar( title: Text('Startup Name Generator'), ), body: Center( child: Text("Hello World"), ), ), ); } }
35. Universitas Indonesia Implementing a Stateful Widget
36. Universitas Indonesia Implementing a Stateful Widget void main() => runApp(MaterialApp( home: MyApp(), )); class MyApp extends StatefulWidget { MyApp({Key key}) : super(key: key); @override _MyAppState createState() => _MyAppState(); }
37. Universitas Indonesia Implementing a Stateful Widget class _MyAppState extends State<MyApp> { int number = 1; @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Text(number.toString()), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { setState(() { number += 1; }); . . . .
38. Universitas Indonesia Pre-made Widgets https://flutter.dev/docs/development/ui/widgets
39. Universitas Indonesia Image in Flutter? Image( Image: NetworkImage('*URL*’) ),
40. Universitas Indonesia Asset Image in Flutter?
41. Universitas Indonesia Asset Image in Flutter?
42. Universitas Indonesia Asset Image in Flutter? Image( Image: AssetImage('PATH_TO_IMAGE’), ),
43. Universitas Indonesia Asset Image in Flutter? Image( Image: AssetImage('PATH_TO_IMAGE’), ),
44. Universitas Indonesia Startup Name Generator Chapter 3
45. Universitas Indonesia What we’ll create
46. Universitas Indonesia Identify the widgets! Scaffold AppBar(...) Row ListView Text Icon
47. Universitas Indonesia Let’s code in pairs!
48. Universitas Indonesia Using the package #pubspec.yml dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 english_words: ^3.1.0 # add this line . . .
49. Universitas Indonesia Using the package #main.dart import 'package:english_words/english_words.dart'; . . .
50. Universitas Indonesia Initializing the Scaffold class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: Scaffold( appBar: AppBar( title: Text('Startup Name Generator'), ), body: RandomWord(), . . .
51. Universitas Indonesia Creating the Random Worlds class RandomWord extends StatefulWidget { RandomWord({Key key}) : super(key: key); @override _RandomWordState createState() => _RandomWordState(); }
52. Universitas Indonesia class _RandomWordState extends State<RandomWord> { String wordpair = WordPair.random(maxSyllables: 2).asPascalCase; List<WordPair> _suggestions = <WordPair>[]; . . . Creating the Random Worlds
53. Universitas Indonesia . . . Widget _buildSuggestion() { return ListView.builder( padding: EdgeInsets.all(10.0), itemBuilder: (BuildContext _context, int i) { if (i.isOdd) { return Divider(); } int index = i ~/ 2; if (index >= _suggestions.length) { _suggestions.addAll(generateWordPairs().take(10)); } return _buildRow(_suggestions[index]); . . . Creating the Random Worlds
54. Universitas Indonesia . . . Widget _buildRow(WordPair wp) { return Center( child: ListTile( title: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text( wp.asPascalCase, ), Icon( Icons.favorite_border, color: Colors.red, . . . Creating the Random Worlds
55. Universitas Indonesia . . . @override Widget build(BuildContext context) { return _buildSuggestion(); } } . . . Creating the Random Worlds
56. Universitas Indonesia Refactor & Interactions Chapter 3 (cont.)
57. Universitas Indonesia Refactoring
58. Universitas Indonesia Refactoring import 'package:flutter/material.dart'; import 'package:english_words/english_words.dart'; . . .
59. Universitas Indonesia Refactoring . . . import "randomWord.dart"; . . . body: RandomWord(), . . .
60. Universitas Indonesia Interactivity class _RandomWordState extends State<RandomWord> { . . . List<WordPair> _saved = <WordPair>[]; . . .
61. Universitas Indonesia Interactivity Widget _buildRow(WordPair wp) { bool alreadySaved = _saved.contains(wp); . . .
62. Universitas Indonesia Interactivity . . . Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: Colors.red, ), . . .
63. Universitas Indonesia Interactivity ListTile( . . . onTap: () { setState(() { alreadySaved ? _saved.remove(wp) : _saved.add(wp); } ); }, ),
64. Universitas Indonesia You just built an app!
65. Universitas Indonesia Flutter build apk
66. Universitas Indonesia Flutter build ios Requires Xcode 9.0 +
67. Universitas Indonesia Questions?
68. Universitas Indonesia Flutter Interact
69. Universitas Indonesia @dsc.ui
70. Universitas Indonesia Thank you!