try! Flutter

Transcript

1. 1.

   try! Flutter Rui Kowase @rkowase 2018/03/13 potatotips#49

2. 2.

   Profile • Name: Rui Kowase / 小和瀬 塁 • Account:

   @rkowase 2 Skill: Flutter (1day)
3. 3.

   What’s Flutter Flutter makes it easy and fast to build

   beautiful mobile apps. https://github.com/flutter/flutter
4. 4.

   Expressive, beautiful UIs https://flutter.io/

5. 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. 6.

   Flutter is now in Beta! https://medium.com/flutter-io/announcing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0

7. 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. 8.

   Get Started: Configure Editor • Install Flutter plugin (Preferences >

   Plugins > Browse repositories) • Restart Android Studio https://flutter.io/get-started/editor/
9. 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. 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. 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. 12.

    Sample app Feature • Search GitHub repository http://github.com/ rkowase/flutter-sample

13. 13.

    Simple Architecture! (Like a Fat Activity / VC)

14. 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. 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. 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. 17.

    Demo (Hot Reload)

18. 18.

    Summary • Official Documents • Official Widgets • Multi Platform

    (Android, iOS, Web) • IDE Support • Hot Reload
19. 19.

    Flutter == ときめきます (Tokimekimasu)

20. 20.

    Error Screen Background #7C160E Text #FFFE7F

21. 21.

    Link • https://flutter.io/ • https://twitter.com/flutterio • https://github.com/flutter/flutter • https://flutter.institute/ •

    https://startflutter.com/ • https://flutter.rocks/