How I met Flutter

Slides of my introductory talk about Flutter, kept at Droidcon NYC 2017

Transcript

1. how I met Flutter
2. how I met your Flutter
3. What is Flutter?
5. ⚡Fast development
6. Beautiful UI
7. Native features and SDKs
8. Suits everyone*
9. IntelliJ integration
10. Has a doctor
11. ⚡Fast development
12. ⚡Fast development
13. ⚡Fast development by Hot reload CHANGES DART VM UPDATE UI
14. How does this work?
15. Engine
16. Engine Framework and apps
17. Engine Framework and apps SKIA DART TEXT FOUNDATION ANIMATION PAINTING GESTURES RENDERING WIDGETS MATERIAL CUPERTINO
18. ⚡Hot reload is stateful
19. class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); }
20. class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { ... } }
21. class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { ... }
22. StatelessWidget StatefulWidget VS
23. Thought to be extended
24. What about UI?
25. @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ],
26. @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ],
27. @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ],
28. @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ],
29. @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ],
30. @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ],
31. @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ],
32. new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), ); }
33. new Text( 'You have pushed the button this many times:', ), new Text( '${_counter}', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), ); }
34. Routes and Navigator
35. Routes and Navigator
36. class Page2 extends StatefulWidget { Page2({Key key, this.title}) : super(key: key); static const String routeName = "/Page2"; final String title; @override _Page2State createState() => new _Page2State(); }
37. class Page2 extends StatefulWidget { Page2({Key key, this.title}) : super(key: key); static const String routeName = "/Page2"; final String title; @override _Page2State createState() => new _Page2State(); }
38. class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Hello Flutter', theme: new ThemeData( primarySwatch: Colors.red, accentColor: Colors.blueAccent), home: new MyHomePage(title: ‘…’), ); } }
39. class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { var routes = <String, WidgetBuilder>{ Page2.routeName: (BuildContext context) => new Page2(title: "Page2") }; return new MaterialApp( title: 'Hello Flutter', theme: new ThemeData( primarySwatch: Colors.red, accentColor: Colors.blueAccent), home: new MyHomePage(title: ‘…’), routes: routes, ); } }
40. var routes = <String, WidgetBuilder>{ Page2.routeName: (BuildContext context) => new Page2(title: "Page2") }; routes: routes,
41. Navigator.pushNamed(context, Page2.routeName); /Page2
42. Navigator.pop(context);
43. Docs & info @ flutter.io
45. open.nytimes.com @nytdev github.com/NYTimes developers.nytimes.com
46. Thank you @_tiwiz
47. how I met Flutter
48. how I met Flutter bit.ly/howImetFlutter