[Flutter]MyAppのbuildのなかでいきなりTextだけ返してみた

厳密には、```new Text('Hello')```だけ返してみた。

**[Flutter](https://flutter.io/)**を使い始めてみました。

[チュートリアル](https://flutter.io/get-started/codelab/)に沿って遊んでいたのですが、ふと、

**MyAppのbuildのなかでいきなり[Text](https://docs.flutter.io/flutter/widgets/Text-class.html)だけを返したらどうなるんだろ、、**、と思いまして、やってみました。

結論から言えば、
1. Flutterのログが優秀(他のは分からないけど)
2. Text widgetを使うには、textDirectionを指定しないとビルド通らない
3. Directionalityというwidgetの*child*にText widgetを指定してもOK
3. 親としてMaterialAppなどのwidgetを持てば、その子供たちの間ではdirectionを指定する必要がない

という、振り返れば当たり前のことが分かりました。

あとはまぁ、**Directionality**とか**MaterialApp**とか、**AndroidJavaで言うViewのAttributeとか、Applicationとかに相当するものが全部widgetとして捉えられている**というFlutterフレームワークの特徴を、改めて実感しました。

---

まず、MyAppのなかでTextだけ返してみる。

```dart
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](https://docs.flutter.io/flutter/widgets/RichText-class.html)**というwidgetが、向きを決める[Directionalitywidget](https://docs.flutter.io/flutter/widgets/Directionality-class.html)を親に持っていないよと。急に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](https://docs.flutter.io/flutter/material/MaterialApp-class.html)とか[widgetsApp](https://docs.flutter.io/flutter/widgets/widgetsApp-class.html)というwidgetをwidgetTreeの一番上に持っていけば、（勝手に）そのwidgetTree全体の文章の方向を決めてくれます**よ、と。

いやぁ、**すごい丁寧なエラーログ**を吐いてくれますね。  

ということで、ビルド通るようにしたい。

最初の

>No Directionality widget found.

とりあえずText widgetの向きのプロパティ(textDirection)を左->右(left to right, つまり**ltr**)に指定してみる。

```dart
class MyApp extends Statelesswidget {
  @override
  widget build(BuildContext context) {
    return new Text('Hello', textDirection: TextDirection.ltr,);
  }
}
```

おお、ビルド通った。

![Simulator Screen Shot - iPhone X - 2018-06-04 at 22.29.10.png](https://qiita-image-store.s3.amazonaws.com/0/214755/ebc346ee-d099-d328-8aa2-fef37f2d2d80.png)


配置を決めるwidgetとかでラップしてないから、左上に表示された。

ということで、**Text widgetだけでも、textDirectionさえ指定してあげればビルドはできる**。

次に、Directionality widgetが無いと言っているので、このwidgetを使ってみる

```dart
class MyApp extends Statelesswidget {
  @override
  widget build(BuildContext context) {
    return new Directionality(
        textDirection: TextDirection.ltr,
        child: new Text('Hello')
    );
  }
}
```

これでも大丈夫。
Directionalityって、本当にwidgetなんだなぁ。


あとはよく分からないけど、RichTextも使ってみる。

```dart
class MyApp extends Statelesswidget {
  @override
  widget build(BuildContext context) {
    return RichText(
      text: new TextSpan(
        text:'Hello',
      ),
      textDirection: TextDirection.ltr,
    );
  }
}
```

これも、結果はさっきのと同じ。

最後に、MaterialAppで囲ってみる。
ここでは、**directionは指定しない**。
Directionality widgetも使わない。

```dart
class MyApp extends Statelesswidget {
  @override
  widget build(BuildContext context) {
    return new MaterialApp(
      home: new Text('Hello'),
    );
  }
}
```

すると、、、

![Simulator Screen Shot - iPhone X - 2018-06-04 at 22.39.12.png](https://qiita-image-store.s3.amazonaws.com/0/214755/d0ea1949-3658-c051-777c-f29bfcecf5f1.png)

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の方向は指定しなくても、デフォルトで左->右にしてくれるようだ。

**だからなんなの**という話ですが、こういう遊びから理解が深まると信じています。。

分からないことだらけですので、用語や概念など、誤りがあれば指摘していただけるととても助かります！