Examples Flutter code

B8117b63a3ee26533bc5980d8134d1e7?s=47 sho5nn
April 18, 2018

Examples Flutter code

Flutter Documentation
https://flutter.io/docs/

Flutter Cookbook
https://flutter.io/cookbook/

B8117b63a3ee26533bc5980d8134d1e7?s=128

sho5nn

April 18, 2018
Tweet

Transcript

  1. Examples Flutter code 2018/04/18 Flutter Meetup Tokyo #1 @sho5nn 1

  2. • twitter : @sho5nn • Android ΞϓϦ։ൃ͕ϝΠϯ • ࠷ۙ͸ ReactNative

    • Flutter ͸झຯͰ 15h ΄Ͳ 2
  3. https:/ /flutter.io/docs/ • Flutter ެࣜυΩϡϝϯτ 3

  4. https:/ /flutter.io/docs/ • αϯϓϧίʔυ͕ॆ࣮͍ͯ͠Δ • ͦͷதͰ΋ Cookbook ͱ͍͏ίʔυϨγϐ͕ࢀߟʹͳΔ 4

  5. https:/ /flutter.io/docs/ • ๛෋ͳαϯϓϧίʔυ͸ɺॳֶऀʹͱͬͯ͋Γ͕͍ͨʂ • αϯϓϧίʔυΛ৮ͬͯ Flutter ʹ׳Ε͍ͯ͜͏ !!! 5

  6. Agenda • Cookbook ͷ঺հ 6

  7. Cookbook https:/ /flutter.io/cookbook/ • ࣮૷ύλʔϯผʹίʔυϨγϐ͕ ༻ҙ͞Ε͍ͯΔ • ίϐϖͰ΋͍͍࣮ͩͨߦՄೳ 7

  8. Cookbook • UI • SnackBar, Tab & ViewPager • Images,

    Lists, Animation • Navigation, Forms, Handling Gestures • Networking • Persistence 8
  9. Cookbook • UI • SnackBar, Tab & ViewPager • Images,

    Lists, Animation • Navigation, Forms, Handling Gestures • Networking • Persistence 9
  10. Displaying SnackBars 10

  11. class SnackBarPage extends StatelessWidget { @override Widget build(BuildContext context) {

    return new Center( child: new RaisedButton( onPressed: () { final snackBar = new SnackBar( content: new Text('Yay! A SnackBar!'), action: new SnackBarAction( label: 'Undo', onPressed: () { // Some code to undo the change! }, ), ); // Find the Scaffold in the Widget tree and use it to show a SnackBar! Scaffold.of(context).showSnackBar(snackBar); }, child: new Text('Show SnackBar'), 11
  12. class SnackBarPage extends StatelessWidget { @override Widget build(BuildContext context) {

    return new Center( child: new RaisedButton( onPressed: () { final snackBar = new SnackBar( content: new Text('Yay! A SnackBar!'), action: new SnackBarAction( label: 'Undo', onPressed: () { // Some code to undo the change! }, ), ); // Find the Scaffold in the Widget tree and use it to show a SnackBar! Scaffold.of(context).showSnackBar(snackBar); }, child: new Text('Show SnackBar'), 12
  13. class SnackBarPage extends StatelessWidget { @override Widget build(BuildContext context) {

    return new Center( child: new RaisedButton( onPressed: () { final snackBar = new SnackBar( content: new Text('Yay! A SnackBar!'), action: new SnackBarAction( label: 'Undo', onPressed: () { // Some code to undo the change! }, ), ); // Find the Scaffold in the Widget tree and use it to show a SnackBar! Scaffold.of(context).showSnackBar(snackBar); }, child: new Text('Show SnackBar'), 13
  14. Networking / Fetch data from the internet 14

  15. Networking / Fetch data from the internet Add the http

    package to pubspec.yaml dependencies: http: <latest_version> 15
  16. appBar: new AppBar( title: new Text('Fetch Data Example'), ), body:

    new Center( child: new FutureBuilder<Post>( future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return new Text(snapshot.data.title); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } // By default, show a loading spinner return new CircularProgressIndicator(); }, 16
  17. appBar: new AppBar( title: new Text('Fetch Data Example'), ), body:

    new Center( child: new FutureBuilder<Post>( future: fetchPost(), // original method, return Future<T> instance builder: (context, snapshot) { if (snapshot.hasData) { return new Text(snapshot.data.title); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } // By default, show a loading spinner return new CircularProgressIndicator(); }, 17
  18. appBar: new AppBar( title: new Text('Fetch Data Example'), ), body:

    new Center( child: new FutureBuilder<Post>( future: fetchPost(), builder: (context, snapshot) { // lambda if (snapshot.hasData) { return new Text(snapshot.data.title); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } // By default, show a loading spinner return new CircularProgressIndicator(); }, 18
  19. appBar: new AppBar( title: new Text('Fetch Data Example'), ), body:

    new Center( child: new FutureBuilder<Post>( // extends StatefulWidget future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return new Text(snapshot.data.title); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } // By default, show a loading spinner return new CircularProgressIndicator(); }, 19
  20. appBar: new AppBar( title: new Text('Fetch Data Example'), ), body:

    new Center( child: new FutureBuilder<Post>( // extends StatefulWidget future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return new Text(snapshot.data.title); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } // By default, show a loading spinner return new CircularProgressIndicator(); }, 20
  21. ·ͱΊ • Flutter ৮Γ࢝Ίʹ Cookbook Λࢀߟʹ͢Δͷ͸༗ޮ • ͦͷଞʹɺϦετදࣔɺσʔλ ӬଓԽɺը໘ؒͷσʔλड͚౉ ͠ͳͲͷίʔυ΋͋Γɺ͋Γ͕

    ͪͳ࣮૷͸·͋·͋Χόʔ͞Ε ͯͯخ͍͠ • αϯϓϧίʔυͰ Flutter ʹ׳Ε͍ͯ͜͏ ✌ 21