try! Flutter

3be52a14c8c58209263d7f83204b8dc7?s=47 Rui Kowase
March 13, 2018

try! Flutter

3be52a14c8c58209263d7f83204b8dc7?s=128

Rui Kowase

March 13, 2018
Tweet

Transcript

  1. 2.
  2. 3.

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

    beautiful mobile apps. https://github.com/flutter/flutter
  3. 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/
  4. 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/
  5. 8.

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

    Plugins > Browse repositories) • Restart Android Studio https://flutter.io/get-started/editor/
  6. 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/
  7. 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
  8. 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?
  9. 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,
  10. 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; }
  11. 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
  12. 18.

    Summary • Official Documents • Official Widgets • Multi Platform

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