Examples Flutter code

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

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

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