[Flutter Meetup Tokyo #1] 雰囲気でFlutterやってみた

Da5a59469ce3ebb55619ce34f85f8c4f?s=47 syarihu
April 18, 2018

[Flutter Meetup Tokyo #1] 雰囲気でFlutterやってみた

Flutter Meetup Tokyo #1 の発表資料です。

Da5a59469ce3ebb55619ce34f85f8c4f?s=128

syarihu

April 18, 2018
Tweet

Transcript

  1. 10.
  2. 11.
  3. 12.
  4. 13.
  5. 14.
  6. 18.
  7. 20.
  8. 22.
  9. 27.
  10. 28.

    AppBar void main() => runApp(new MyApp()); class MyApp extends StatelessWidget

    { @override Widget build(BuildContext context) { return new MaterialApp( title: '愛工大シャトルバス時刻表', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: '愛工大シャトルバス時刻表 '), ); } }
  11. 29.

    AppBar void main() => runApp(new MyApp()); class MyApp extends StatelessWidget

    { @override Widget build(BuildContext context) { return new MaterialApp( title: '愛工大シャトルバス時刻表', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: '愛工大シャトルバス時刻表 '), ); } }
  12. 30.

    AppBar void main() => runApp(new MyApp()); class MyApp extends StatelessWidget

    { @override Widget build(BuildContext context) { return new MaterialApp( title: '愛工大シャトルバス時刻表', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: '愛工大シャトルバス時刻表 '), ); } }
  13. 31.

    AppBar void main() => runApp(new MyApp()); class MyApp extends StatelessWidget

    { @override Widget build(BuildContext context) { return new MaterialApp( title: '愛工大シャトルバス時刻表', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: '愛工大シャトルバス時刻表 '), ); } }
  14. 32.
  15. 33.

    AppBar class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) :

    super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); }
  16. 34.

    AppBar class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) :

    super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); }
  17. 35.

    AppBar class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context)

    { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center(), ); } }
  18. 36.
  19. 39.

    TabBarView return new DefaultTabController( length: 2, child: new Scaffold( appBar:

    new AppBar( title: new Text(widget.title), bottom: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), body: new TabBarView( children: _pages, ))); } }
  20. 40.

    TabBarView return new DefaultTabController( length: 2, child: new Scaffold( appBar:

    new AppBar( title: new Text(widget.title), bottom: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), body: new TabBarView( children: _pages, ))); } }
  21. 41.

    TabBarView return new DefaultTabController( length: 2, child: new Scaffold( appBar:

    new AppBar( title: new Text(widget.title), bottom: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), body: new TabBarView( children: _pages, ))); } }
  22. 42.

    TabBarView return new DefaultTabController( length: 2, child: new Scaffold( appBar:

    new AppBar( title: new Text(widget.title), bottom: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), body: new TabBarView( children: _pages, ))); } }
  23. 43.

    TabBarView final List<Widget> _pages = <Widget>[ Column( children: <Widget>[ Padding(

    padding: const EdgeInsets.all(32.0), child: new Text("widget1"), ) ], ), Column( children: <Widget>[ Padding( padding: const EdgeInsets.all(32.0), child: new Text("widget2"), ) ], ), ];
  24. 45.
  25. 46.
  26. 47.
  27. 50.

    CustomTabBar class CustomTabBar extends StatelessWidget implements PreferredSizeWidget { final TabBar

    tabBar; final String currentDate; final String currentTimeTable; CustomTabBar({ this.currentDate, this.currentTimeTable, this.tabBar }) : super();
  28. 51.

    CustomTabBar class CustomTabBar extends StatelessWidget implements PreferredSizeWidget { final TabBar

    tabBar; final String currentDate; final String currentTimeTable; CustomTabBar({ this.currentDate, this.currentTimeTable, this.tabBar }) : super();
  29. 52.

    CustomTabBar class CustomTabBar extends StatelessWidget implements PreferredSizeWidget { final TabBar

    tabBar; final String currentDate; final String currentTimeTable; CustomTabBar({ this.currentDate, this.currentTimeTable, this.tabBar }) : super();
  30. 53.

    CustomTabBar class CustomTabBar extends StatelessWidget implements PreferredSizeWidget { final TabBar

    tabBar; final String currentDate; final String currentTimeTable; CustomTabBar({ this.currentDate, this.currentTimeTable, this.tabBar }) : super();
  31. 54.

    CustomTabBar @override Size get preferredSize => new Size(0.0, 90.0); @override

    Widget build(BuildContext context) { return new Column( children: <Widget>[ createCurrentStatus(), tabBar ], ); }
  32. 55.

    CustomTabBar @override Size get preferredSize => new Size(0.0, 90.0); @override

    Widget build(BuildContext context) { return new Column( children: <Widget>[ createCurrentStatus(), tabBar ], ); }
  33. 56.

    CustomTabBar @override Size get preferredSize => new Size(0.0, 90.0); @override

    Widget build(BuildContext context) { return new Column( children: <Widget>[ createCurrentStatus(), tabBar ], ); }
  34. 57.

    CustomTabBar @override Size get preferredSize => new Size(0.0, 90.0); @override

    Widget build(BuildContext context) { return new Column( children: <Widget>[ createCurrentStatus(), tabBar ], ); }
  35. 60.

    CustomTabBar Widget createCurrentStatus() { return Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[

    createExpanded(currentDate), createExpanded(currentTimeTable), ], ); } Widget A (currentDate) Widget B (currentTimeTable)
  36. 61.

    CustomTabBar Expanded createExpanded(String text) { return new Expanded( flex: 1,

    child: new Container( decoration: new BoxDecoration( border: new Border.all(color: Colors.white) ), child: ...
  37. 62.

    CustomTabBar Expanded createExpanded(String text) { return new Expanded( flex: 1,

    child: new Container( decoration: new BoxDecoration( border: new Border.all(color: Colors.white) ), child: ...
  38. 63.

    CustomTabBar Expanded createExpanded(String text) { return new Expanded( flex: 1,

    child: new Container( decoration: new BoxDecoration( border: new Border.all(color: Colors.white) ), child: ...
  39. 64.

    CustomTabBar child: new Padding( padding: const EdgeInsets.all(2.0), child: new MaterialButton(

    onPressed: () {}, child: new Text( text, style: new TextStyle( color: Colors.white ), ), ), ), ), ); }
  40. 65.

    CustomTabBar child: new Scaffold( appBar: new AppBar( title: new Text(widget.title),

    bottom: new CustomTabBar( currentDate: "2018年4月16日(月)", currentTimeTable: "Aダイヤ", tabBar: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), ),
  41. 66.

    CustomTabBar child: new Scaffold( appBar: new AppBar( title: new Text(widget.title),

    bottom: new CustomTabBar( currentDate: "2018年4月16日(月)", currentTimeTable: "Aダイヤ", tabBar: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), ),
  42. 67.

    CustomTabBar child: new Scaffold( appBar: new AppBar( title: new Text(widget.title),

    bottom: new CustomTabBar( currentDate: "2018年4月16日(月)", currentTimeTable: "Aダイヤ", tabBar: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), ),
  43. 68.

    CustomTabBar child: new Scaffold( appBar: new AppBar( title: new Text(widget.title),

    bottom: new CustomTabBar( currentDate: "2018年4月16日(月)", currentTimeTable: "Aダイヤ", tabBar: new TabBar( tabs: <Widget>[ new Tab(text: "愛工大ゆき"), new Tab(text: "八草駅ゆき"), ], ), ), ),
  44. 70.
  45. 71.

    ListView static List<String> createDataList() { List<String> list = List(); for

    (int i = 0; i < 100; i++) { list.add("test$i"); } return list; }
  46. 72.

    ListView static List<String> createDataList() { List<String> list = List(); for

    (int i = 0; i < 100; i++) { list.add("test$i"); } return list; }
  47. 73.

    ListView static List<Card> createCards(List<String> list) { List<Card> cardList = new

    List(); list.forEach((s) { cardList.add(new Card( child: Padding( padding: const EdgeInsets.all(16.0), child: Text(s), ))); }); return cardList; }
  48. 74.

    ListView static List<Card> createCards(List<String> list) { List<Card> cardList = new

    List(); list.forEach((s) { cardList.add(new Card( child: Padding( padding: const EdgeInsets.all(16.0), child: Text(s), ))); }); return cardList; }
  49. 75.

    ListView static ListView createListView() { return new ListView( shrinkWrap: true,

    padding: const EdgeInsets.all(20.0), children: createCards(createDataList()), ); }
  50. 76.

    ListView static ListView createListView() { return new ListView( shrinkWrap: true,

    padding: const EdgeInsets.all(20.0), children: createCards(createDataList()), ); }
  51. 78.
  52. 81.
  53. 82.

    http.getで取ってくる Future<Destinations> fetchPost() async { final response = await http.get(

    'http://api.syarihu.net/ait_timetable/timetables/'); final responseJson = json.decode(response.body); return new Destinations.fromJson(responseJson); }
  54. 83.

    http.getで取ってくる Future<Destinations> fetchPost() async { final response = await http.get(

    'http://api.syarihu.net/ait_timetable/timetables/'); final responseJson = json.decode(response.body); return new Destinations.fromJson(responseJson); }
  55. 84.

    http.getで取ってくる Future<Destinations> fetchPost() async { final response = await http.get(

    'http://api.syarihu.net/ait_timetable/timetables/'); final responseJson = json.decode(response.body); return new Destinations.fromJson(responseJson); }
  56. 85.

    結果をWidgetに反映 static FutureBuilder<Destinations> createFutureBuilder( int destination) { return new FutureBuilder<Destinations>(

    future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return createListView( snapshot.data.destinations[destination].timetables); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } return new CircularProgressIndicator(); }, ); }
  57. 86.

    結果をWidgetに反映 static FutureBuilder<Destinations> createFutureBuilder( int destination) { return new FutureBuilder<Destinations>(

    future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return createListView( snapshot.data.destinations[destination].timetables); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } return new CircularProgressIndicator(); }, ); }
  58. 87.

    結果をWidgetに反映 static FutureBuilder<Destinations> createFutureBuilder( int destination) { return new FutureBuilder<Destinations>(

    future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return createListView( snapshot.data.destinations[destination].timetables); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } return new CircularProgressIndicator(); }, ); }
  59. 88.

    結果をWidgetに反映 static FutureBuilder<Destinations> createFutureBuilder( int destination) { return new FutureBuilder<Destinations>(

    future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return createListView( snapshot.data.destinations[destination].timetables); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } return new CircularProgressIndicator(); }, ); }
  60. 89.

    結果をWidgetに反映 static FutureBuilder<Destinations> createFutureBuilder( int destination) { return new FutureBuilder<Destinations>(

    future: fetchPost(), builder: (context, snapshot) { if (snapshot.hasData) { return createListView( snapshot.data.destinations[destination].timetables); } else if (snapshot.hasError) { return new Text("${snapshot.error}"); } return new CircularProgressIndicator(); }, ); }
  61. 90.

    結果をWidgetに反映 class _MyHomePageState extends State<MyHomePage> { final List<Widget> _pages =

    <Widget>[ new ConstrainedBox( constraints: const BoxConstraints.expand(), child: createFutureBuilder(0), ), new ConstrainedBox( constraints: const BoxConstraints.expand(), child: createFutureBuilder(1), ), ];
  62. 91.

    結果をWidgetに反映 class _MyHomePageState extends State<MyHomePage> { final List<Widget> _pages =

    <Widget>[ new ConstrainedBox( constraints: const BoxConstraints.expand(), child: createFutureBuilder(0), ), new ConstrainedBox( constraints: const BoxConstraints.expand(), child: createFutureBuilder(1), ), ];
  63. 93.
  64. 97.

    NOW & FUTURE TechBooster • Android • Flutter • Swift

    • Kotlin のコルーチン の動作原理など モバイル技術に注目した 解説書です