Slide 1
Slide 1 text
BuildContext
について調べてみた
Flutter Meetup Tokyo #2
@STAR_ZERO
Slide 2
Slide 2 text
BuildContext
Slide 3
Slide 3 text
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'),
);
}
}
Slide 4
Slide 4 text
BuildContext
https://docs.flutter.io/flutter/widgets/BuildContext-class.html
Slide 5
Slide 5 text
BuildContext
• WidgetツリーでのWidgetの位置
• StatelessWidget.buildやState.buildメソッド
に渡される
• WidgetごとにBuildContextを持っていて、
buildメソッドで返されるWidgetの親になる
(？)
• buildメソッドのBuildContextとbuildメソッド
が返すBuildContextが同じではない(？)
• (英語怪しいので間違ってるかも）
Slide 6
Slide 6 text
よく分からないので
SnackBarで確認
Slide 7
Slide 7 text
SnackBar
var snackBar = new SnackBar(content: new Text("Hello!!"));
Scaffold.of(context).showSnackBar(snackBar);
Slide 8
Slide 8 text
Scaffold.of
https://docs.flutter.io/flutter/material/Scaffold/of.html
Slide 9
Slide 9 text
うごく
Slide 10
Slide 10 text
うごく
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(),
),
);
}
}
Slide 11
Slide 11 text
うごく
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'),
);
}
}
Slide 12
Slide 12 text
うごかない
Slide 13
Slide 13 text
うごかない
class SnackBarParent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new SnackBarChild(),
);
}
}
Slide 14
Slide 14 text
うごかない
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'),
),
);
}
}
Slide 15
Slide 15 text
うごかない
ScaffoldがBuildContextに無い
Slide 16
Slide 16 text
debug(うごく)
Scaffoldがある
Slide 17
Slide 17 text
debug(うごかない)
Scaffoldが見つからない
Slide 18
Slide 18 text
buildメソッド
• buildメソッドに渡されるBuildContextには
buildメソッドで作るWidgetは含まれていない
• buildメソッドでreturnしたWidgetが子のbuild
メソッドのBuildContextに含まれる
Slide 19
Slide 19 text
SnackBarを表示するには
必ず子Widgetが必要？
Slide 20
Slide 20 text
方法１
Builder
Slide 21
Slide 21 text
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'),
);
}),
);
}
}
Slide 22
Slide 22 text
debug(Builder)
Slide 23
Slide 23 text
方法2
GlobalKey
Slide 24
Slide 24 text
GlobalKey
class SnackBarChild extends StatelessWidget {
final _scaffoldKey = GlobalKey();
@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'),
),
);
}
}
Slide 25
Slide 25 text
まとめ
Slide 26
Slide 26 text
まとめ
• BuildContextを使うときは、何が含まれている
かを意識する必要がありそう
• BuilderやGlobalKeyを利用したほうが良さそう
Slide 27
Slide 27 text
おわり