技術記事

micomia株式会社の井上です。今回はTextについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. Textとは

Textはそのままの意味ですが、アプリに文字を表示させるためのWidgetです。

画面名や投稿の本文など、基本的な箇所で役割を果たしています。

2. Textの実装方法

Textも他のWidgetと同じように実装できます。

3. Textの詳細設定

右側のProperties Panelを見ていきます。

まずはPaddingです。好きな値を設定してこのように余白を入れることができます。

その下のText Propertiesはテキスト自体に関する設定をすることができます。

Theme Text Styleはテキストのスタイルを設定することができます。

その下のFont FamilyはTextのフォントを設定することができます。

日本語の場合はIBM Plex Sans JPを使うことが多いです。このフォントを使うと漢字が変に表示されにくく使いやすいです。

Font Wightは文字の太さを設定することができます。100~900の太さがあるのでさまざまな太さにすることができます。

その下のFont Sizeで文字の大きさを設定することができます。

Text Colorは文字の色を設定できます。

下に一覧表示されているカラーはTheme Colorと言ってあらかじめセットされているカラーが表示されますが、好きなカラーにしたいときは上部のカラーパレットの部分で選択することができます。

Text Alignはテキストの右寄せ、左寄せなどを設定できます。これは2行以上になるときに使用する機能になります。

隣にあるMax Linesは、たとえば2行にした場合は2行までしか表示されなくなります。

4. さいごに

今回はTextについて解説していきました。Textはほとんどのアプリで必要な要素なので、ぜひ本記事を参考にして実装してみてください。

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら