厳密には、new Text('Hello')だけ返してみた。
**Flutter**を使い始めてみました。
チュートリアルに沿って遊んでいたのですが、ふと、
MyAppのbuildのなかでいきなりTextだけを返したらどうなるんだろ、、、と思いまして、やってみました。
結論から言えば、
- Flutterのログが優秀(他のは分からないけど)
- Text widgetを使うには、textDirectionを指定しないとビルド通らない
- DirectionalityというwidgetのchildにText widgetを指定してもOK
- 親としてMaterialAppなどのwidgetを持てば、その子供たちの間ではdirectionを指定する必要がない
という、振り返れば当たり前のことが分かりました。
あとはまぁ、DirectionalityとかMaterialAppとか、AndroidJavaで言うViewのAttributeとか、Applicationとかに相当するものが全部widgetとして捉えられているというFlutterフレームワークの特徴を、改めて実感しました。
まず、MyAppのなかでTextだけ返してみる。
import 'package:flutter/material.dart';
void main() {
runApp(new MyApp());
}
class MyApp extends Statelesswidget {
@override
widget build(BuildContext context) {
return new Text('Hello');
}
}
すると以下のエラーがコンソールに吐き出された。
flutter: ══╡ EXCEPTION CAUGHT BY widgetS LIBRARY ╞═══════════════════════════════════════════════════════════
flutter: The following assertion was thrown building Text("Hello"):
flutter: No Directionality widget found.
flutter: RichText widgets require a Directionality widget ancestor.
flutter: The specific widget that could not find a Directionality ancestor was:
flutter: RichText(softWrap: wrapping at box width, maxLines: unlimited, text: "Hello")
flutter: The ownership chain for the affected widget is:
flutter: RichText ← Text ← MyApp ← [root]
flutter: Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the
flutter: top of your application widget tree. It determines the ambient reading direction and is used, for
flutter: example, to determine how to lay out text, how to interpret "start" and "end" values, and to resolve
flutter: EdgeInsetsDirectional, AlignmentDirectional, and other *Directional objects.
まずは
No Directionality widget found.
要するに、**文章の向きが分からないよ！**と。
次に
The specific widget that could not find a Directionality ancestor was:
RichText(softWrap: wrapping at box width, maxLines: unlimited, text: "Hello")
**RichText**というwidgetが、向きを決めるDirectionalitywidgetを親に持っていないよと。急にRichTextというのが出てきたけれど、これはよく分からない。
あとは、
Typically, the Directionality widget is introduced by the MaterialApp or widgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used...
というのも書いてあって、MaterialAppとかwidgetsAppというwidgetをwidgetTreeの一番上に持っていけば、（勝手に）そのwidgetTree全体の文章の方向を決めてくれますよ、と。
いやぁ、すごい丁寧なエラーログを吐いてくれますね。
ということで、ビルド通るようにしたい。
最初の
No Directionality widget found.
とりあえずText widgetの向きのプロパティ(textDirection)を左->右(left to right, つまりltr)に指定してみる。
class MyApp extends Statelesswidget {
@override
widget build(BuildContext context) {
return new Text('Hello', textDirection: TextDirection.ltr,);
}
}
おお、ビルド通った。
配置を決めるwidgetとかでラップしてないから、左上に表示された。
ということで、Text widgetだけでも、textDirectionさえ指定してあげればビルドはできる。
次に、Directionality widgetが無いと言っているので、このwidgetを使ってみる
class MyApp extends Statelesswidget {
@override
widget build(BuildContext context) {
return new Directionality(
textDirection: TextDirection.ltr,
child: new Text('Hello')
);
}
}
これでも大丈夫。
Directionalityって、本当にwidgetなんだなぁ。
あとはよく分からないけど、RichTextも使ってみる。
class MyApp extends Statelesswidget {
@override
widget build(BuildContext context) {
return RichText(
text: new TextSpan(
text:'Hello',
),
textDirection: TextDirection.ltr,
);
}
}
これも、結果はさっきのと同じ。
最後に、MaterialAppで囲ってみる。
ここでは、directionは指定しない。
Directionality widgetも使わない。
class MyApp extends Statelesswidget {
@override
widget build(BuildContext context) {
return new MaterialApp(
home: new Text('Hello'),
);
}
}
すると、、、
directionをしなくてもビルドできた。
文字の色とかサイズ感とか二重線、右上のDEBUGとか気になるけど、無視して。。。
先ほどのをもう一度振り返ると、
Typically, the Directionality widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree. It determines the ambient reading direction and is used...
MaterialAppで全体を囲ってあげれば、その子供のwidgetたちではTextの方向は指定しなくても、デフォルトで左->右にしてくれるようだ。
だからなんなのという話ですが、こういう遊びから理解が深まると信じています。。
分からないことだらけですので、用語や概念など、誤りがあれば指摘していただけるととても助かります！