JINSでアプリの運用保守・開発をしています Onami です。
JINSに新卒で入社後、数年間は店舗スタッフとして働いていましたが、デジタル領域に興味を持ち3年前にITデジタル部に異動してきました。
現在はFlutterを使ってアプリ開発に携わっていますが、 初めてFlutterを使ったコードを書くので
復習も兼ねて開発中によく使ったWidgetと使い方を簡単にまとめていこうと思います。
今回は基本的なWidgetである Text Widget について使い方をまとめていきます。
Text Widget について
Text Widgetとは名前の通りテキストを表示するWidgetのことです。
表示させるだけであれば、以下のように書くだけでOKです。
// ''の中は表示させたいテキストを入れる
Text('JINS')
// 変数を入れる場合はそのまま書く
Text(frameName)
これにText Widgetのプロパティを追加することで様々な装飾や表示が可能になります◎
◾️テキストサイズを指定する
TextStyleを使用し、fontSizeプロパティでサイズを指定することで文字サイズの変更ができます。
// 文字サイズを30にする場合
Text(
'JINS',
style: TextStyle(
fontSize: 30, //ここでサイズを指定
),
)
◾️テキストの色を指定する
colorプロパティでカラーを指定することで文字カラーの変更ができます。
// 文字の色を赤にする場合
Text(
'JINS',
style: TextStyle(
color: Colors.red, //ここで色を指定
),
)
16進数のカラーコードで指定することもできるので、細かくカラー調整をしたい場合は16進数で設定することをオススメします！
JINSでは指定のカラーコードがあるので、今回の開発は16進数のカラーコードで指定しています。
// 16進数で赤を指定する場合
Text(
'JINS',
style: TextStyle(
color: Color(0xFFFF0000) // カラーコード（FF0000）の前には透明度を指定します
),
)
◾️フォントの太さを指定する
fontWeightプロパティで太さを指定することでフォントの太さが変更ができます。
// フォントを太くする場合
Text(
'JINS',
style: TextStyle(
fontWeight: FontWeight.bold, // ここで太さを指定
),
)
また、数値で太さを細かく変えられるので、先ほどのカラーと同様に
開発しているアプリでは数値を指定して太さを変えることにしています。
// 細くする
Text('JINS', style: TextStyle(fontWeight: FontWeight.w100)),
// かなり太くする
Text('JINS', style: TextStyle(fontWeight: FontWeight.w900)),
◾️表示位置を指定する
textAlignプロパティで位置を指定することで、文字の表示位置（左揃え、右揃え、中央など）が変更できます。
// テキストを左揃えにする場合
Text(
'JINS',
textAlign: TextAlign.left, // ここで表示位置を指定
),
◾️文字の省略表示
overflowプロパティで表示方法を指定することで、親ウィジェットよりテキストが長くなった場合に省略することができます。
// オーバーフローした分を省略記号（...）で表示する場合
Container(
width: 300,
child: Text(
'JINSでは薄型非球面レンズが標準搭載されています。',
overflow: TextOverflow.ellipsis, // ここでオーバーフローした時の表示を指定
),
)
実際に見てみるとこんな感じになります。
ものによっては「省略したくない！」といった場合もあると思いますので
そういう時はvisibleを指定してあげるとすべて表示できます◎
// オーバーフローした分をそのまま表示する場合
Container(
width: 300,
child: Text(
'JINSでは薄型非球面レンズが標準搭載されています。',
overflow: TextOverflow.visible,
),
)
最後まで表示されるようになりましたね！
ユーザーがアプリを使う場面を想像したときに、省略しても良い情報なのか、すべて表示させた方が良い情報なのかを整理して表示方法を使い分けています。
テキストの一部だけを変更したい💭
これってどう実装すればいいんだろう・・・と困ったことがあったので
ついでに記載しておきます。
あるケースで テキストの一部を赤文字にしたいという要望があったのですが、上記でまとめたような方法だとテキスト全体に適用されてしまうので上手くいかず・・
何かいい方法はないか開発メンバーに相談したところ、Text.richを使ったらいいよ👍 とアドバイスをいただきました。
Text.rich を使うと、複数のTextSpanを組み合わせてテキストを構成できるようです。
コードで書くとこんな感じになります。
// 'メガネのJINS'のJINS部分だけ赤文字にする
Text.rich(
TextSpan(
text: 'メガネの',
style: TextStyle(color: Colors.black),
children: <TextSpan>[
TextSpan(
text: 'JINS',
style: TextStyle(color: Colors.red),
),
],
),
)
UIを確認すると、JINSの部分だけ色を変更することが出来ました◎
定数化しておくと便利！
同じようなテキストスタイルが何回も出てくると毎回プロパティを設定するのも大変な上に、間違える可能性も高くなるので、よく使うスタイルやカラーは定数化しておくと便利です◎
色を定数化する
class ColorConst {
static const grey50 = Color(0xFF808080);
static const red = Color(0xFFDA0024);
}
テキストスタイルを定数化する
class TextStyleConst {
static const t1 = TextStyle(
fontSize: 54,
fontWeight: FontWeight.w900,
);
static const t2 = TextStyle(
fontSize: 34,
fontWeight: FontWeight.w500,
);
static const t3 = TextStyle(
fontSize: 17,
fontWeight: FontWeight.w100,
);
}
定数化したものを組み合わせて使うとこんな感じのコードになります。
Column(
children: [
Text(
'Frame',
style: TextStyleConst.t1,
),
Text(
'Lens',
style: TextStyleConst.t2.copyWith(
color: ColorConst.grey50,
),
),
Text(
'JINS',
style: TextStyleConst.t3.copyWith(
color: ColorConst.red,
),
),
],
)
最後に
今回挙げたものは、アプリ開発でよく使っているものになるのですが、
Text Widgetについて書かれているサイトをみると、プロパティの種類だけでもたくさんあったので暇な時に色々試してみようかなと思いました😊
最後まで読んでいただきありがとうございました！
参考
Discussion
✨✨✨✨✨✨✨