try! Flutter

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/