Flutterで学んだことを実践するためにiPhoneの電話アプリを再現している。 以下ダイアルパッドのページを作成するにあたって苦労した点を箇条書きしていく。
Widgetを非表示にする方法
数字ボタンを押したら表示され、数字がすべてなくなると非表示になる「番号を追加」ボタンの制御方法がわからなかった。
→Visibility Widgetを使い解決
ダイアルパッドは画面下部に寄せて、番号表示などは上寄せにする方法
Columnを
mainAxisAlignment: MainAxisAlignment.end,
で下寄せにするも、Column内のすべての要素が下寄せになってしまい、画面上部がすかすかになってしまった。
「番号を追加」ボタンとダイアルパッドの間にSpacer()を追加することで解決。
Spacerは
Expanded(child: Container()) と同じ意味（Spacerの方が新しく便利）。
backspaceのアイコン
ElevatedButtonの左辺を三角にする方法がわからないため、Icons.backspaceで代用。
しかし、アイコンの色を灰色にすると✗マークが白抜きのため見づらくなってしまった。
Stackで背景に黒色のContainerを追加し、ゴリ押しで✗が黒く見えるようにした。
backspaceのアイコンをタップできるようにしたが、Inkwellの表示がおかしい
Iconをタップ可能にするためにInkwell Widgetを使った。似た用途のWidgetとしてGestuorDetectorがあるがそちらはタップ時のアニメーションがなく、タップしたかどうかが分からないのでInkwellを採用した。
ただ、InkwellがIconの形を考慮しないので、四角い背景がタップするときに表示されてしまう。未解決。
テキストを改行する方法
ElevatedButtonのテキストにはColumnが使えないのでテキストだけで改行を実現する必要がある。
２つの方法があり、１つは改行記号(\n)を使う方法、2つ目が''' '''で囲みソースコード中で改行する方法。
今回はシンプルに数字とアルファベットの2行だけだったので、改行記号の方法を採用。
一つのテキストの中で一部だけ文字を小さくする方法
htmlであればspanで囲って、一部だけ文字を小さくしたりアンダーラインを引いたりするのは簡単だが、dartでどうやるか分からなかった。
RichText( text: [TextSpan(), TextSpan(style: TextStyle())]
でspanごとに設定できた。
「１」だけ上の方にずれてしまう
2行目に何も表示するものがないと、１行目が上寄せになってしまった。 半角スペースを２行目に表示させることで解決。
アスタリスクが上にずれてしまう
と#は中央揃えにしたかったため、改行記号による改行はしていない。 #は期待通り真ん中に表示されたが、は上の方にずれていた。 *の前に改行記号を入れることで真ん中に表示されるようになった。(なぜ？）
