try! Flutter

potatotips #49 (iOS/Android開発Tips共有会) - connpass
https://potatotips.connpass.com/event/79165/

Google Slides
https://docs.google.com/presentation/d/1m7IB8pHnddzm3UNXI_D-t28TmG5ifwkqcHnySLT2X-w/edit?usp=sharing

Transcript

1. try! Flutter Rui Kowase @rkowase 2018/03/13 potatotips#49
2. Profile • Name: Rui Kowase / 小和瀬 塁 • Account: @rkowase 2 Skill: Flutter (1day)
3. What’s Flutter Flutter makes it easy and fast to build beautiful mobile apps. https://github.com/flutter/flutter
4. Expressive, beautiful UIs https://flutter.io/
5. Feature • Build beautiful native apps in record time • Fast development • Expressive, beautiful UIs • Modern, reactive framework • Access native features and SDKs • Unified app development https://flutter.io/
6. Flutter is now in Beta! https://medium.com/flutter-io/announcing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0
7. Get Started: Install on macOS $ git clone -b beta https://github.com/flutter/flutter.git $ export PATH=`pwd`/flutter/bin:$PATH $ flutter doctor https://flutter.io/setup-macos/
8. Get Started: Configure Editor • Install Flutter plugin (Preferences > Plugins > Browse repositories) • Restart Android Studio https://flutter.io/get-started/editor/
9. Hello World import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } https://flutter.io/get-started/codelab/
10. Hello World import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } https://flutter.io/get-started/codelab/ Immutable
11. Flutter / Android / iOS Flutter Android iOS Language Dart Kotlin / Java Swift / Objective-C Platform Android, iOS, Web Android iOS Build time 1-5 sec 1-5 min? 1-5 min?
12. Sample app Feature • Search GitHub repository http://github.com/ rkowase/flutter-sample
13. Simple Architecture! (Like a Fat Activity / VC)
14. Sample app - Layout return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new ListView( padding: const EdgeInsets.symmetric(horizontal: 16.0), children: <Widget>[ new TextField( decoration: const InputDecoration( hintText: 'Flutter', labelText: 'Query', ), maxLines: 1, controller: _controller, ), new Container( padding: const EdgeInsets.all(20.0), child: new RaisedButton( child: const Text('Search'), onPressed: _search, ), ), container,
15. Sample app - List new Container( height: 500.0, child: new ListView( key: _listViewKey, itemExtent: 50.0, children: _createWidgets(_items), ), ), Iterable<Widget> _createWidgets(List<GithubRepo> items) { var ret = new List<Widget>(); if (items == null) { return ret; } items.forEach((item) { ret.add( new ListTile( leading: new CircleAvatar( backgroundImage: new NetworkImage(item.avatarUrl), ), title: new Text('${item.name} / ⭐ ${item.starCount}'), ) ); }); return ret; }
16. Sample app - API Client class GithubClient { Future<List<GithubRepo>> get(String query) async { var url = 'https://api.github.com/search/repositories?sort=stars&q='; var httpClient = new HttpClient(); try { var request = await httpClient.getUrl(Uri.parse(url + query)); var response = await request.close(); if (response.statusCode != HttpStatus.OK) { return null; } var json = await response.transform(UTF8.decoder).join(); return GithubRepo.fromJson(json); } catch (exception) { return null; } } } async / await
17. Demo (Hot Reload)
18. Summary • Official Documents • Official Widgets • Multi Platform (Android, iOS, Web) • IDE Support • Hot Reload
19. Flutter == ときめきます (Tokimekimasu)
20. Error Screen Background #7C160E Text #FFFE7F
21. Link • https://flutter.io/ • https://twitter.com/flutterio • https://github.com/flutter/flutter • https://flutter.institute/ • https://startflutter.com/ • https://flutter.rocks/