Save 37% off PRO during our Black Friday Sale! »

BuildContextについて調べてみた / Flutter Meetup Tokyo #2

BuildContextについて調べてみた / Flutter Meetup Tokyo #2

80a3a3857a55f154d23acb705eff72cc?s=128

star_zero

May 31, 2018
Tweet

Transcript

  1. BuildContext について調べてみた Flutter Meetup Tokyo #2 @STAR_ZERO

  2. BuildContext

  3. BuildContext class MyApp extends StatelessWidget { @override Widget build(BuildContext context)

    { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(title: 'Flutter Demo'), ); } }
  4. BuildContext https://docs.flutter.io/flutter/widgets/BuildContext-class.html

  5. BuildContext • WidgetツリーでのWidgetの位置 • StatelessWidget.buildやState.buildメソッド に渡される • WidgetごとにBuildContextを持っていて、 buildメソッドで返されるWidgetの親になる (?)

    • buildメソッドのBuildContextとbuildメソッド が返すBuildContextが同じではない(?) • (英語怪しいので間違ってるかも)
  6. よく分からないので SnackBarで確認

  7. SnackBar var snackBar = new SnackBar(content: new Text("Hello!!")); Scaffold.of(context).showSnackBar(snackBar);

  8. Scaffold.of https://docs.flutter.io/flutter/material/Scaffold/of.html

  9. うごく

  10. うごく class SnackBarParent extends StatelessWidget { @override Widget build(BuildContext context)

    { return new MaterialApp( home: new Scaffold( appBar: new AppBar( title: new Text('SnackBar'), ), body: new SnackBarChild(), ), ); } }
  11. うごく class SnackBarChild extends StatelessWidget { @override Widget build(BuildContext context)

    { return new RaisedButton( onPressed: () { var snackbar = new SnackBar(content: new Text('Hello!!')); Scaffold.of(context).showSnackBar(snackbar); }, child: new Text('Show SnackBar'), ); } }
  12. うごかない

  13. うごかない class SnackBarParent extends StatelessWidget { @override Widget build(BuildContext context)

    { return new MaterialApp( home: new SnackBarChild(), ); } }
  14. うごかない class SnackBarChild extends StatelessWidget { @override Widget build(BuildContext context)

    { return new Scaffold( appBar: new AppBar( title: new Text('SnackBar'), ), body: new RaisedButton( onPressed: () { var snackbar = new SnackBar( content: new Text('Hello!!')); Scaffold.of(context).showSnackBar(snackbar); }, child: new Text('Show SnackBar'), ), ); } }
  15. うごかない ScaffoldがBuildContextに無い

  16. debug(うごく) Scaffoldがある

  17. debug(うごかない) Scaffoldが見つからない

  18. buildメソッド • buildメソッドに渡されるBuildContextには
 buildメソッドで作るWidgetは含まれていない • buildメソッドでreturnしたWidgetが子のbuild メソッドのBuildContextに含まれる

  19. SnackBarを表示するには 必ず子Widgetが必要?

  20. 方法1 Builder

  21. Builder class SnackBarChild extends StatelessWidget { @override Widget build(BuildContext context)

    { return new Scaffold( body: new Builder(builder: (BuildContext context) { return new RaisedButton( onPressed: () { var snackbar = new SnackBar( content: new Text('Hello!!')); Scaffold.of(context).showSnackBar(snackbar); }, child: new Text('Show SnackBar'), ); }), ); } }
  22. debug(Builder)

  23. 方法2 GlobalKey

  24. GlobalKey class SnackBarChild extends StatelessWidget { final _scaffoldKey = GlobalKey<ScaffoldState>();

    @override Widget build(BuildContext context) { return new Scaffold( key: _scaffoldKey, body: new RaisedButton( onPressed: () { var snackbar = new SnackBar( content: new Text('Hello!!')); _scaffoldKey.currentState.showSnackBar(snackbar); }, child: new Text('Show SnackBar'), ), ); } }
  25. まとめ

  26. まとめ • BuildContextを使うときは、何が含まれている かを意識する必要がありそう • BuilderやGlobalKeyを利用したほうが良さそう

  27. おわり