TextTextStyle を組み合わせることで文字列 (テキスト) を表示することができます。

文字列とは

文字列の表示は、プログラミングにおいて、一番基本的な要素の一つです。 アプリ開発においても、重要な要素となります。 このページで、文字列の扱い方をマスターしていきましょう。

基本的な書き方

文字列は、

Text(
  'ふつうの文字列だよ。',
)

のような簡単な記述で、表示することができます。引用符は、 "' を使用することができます。

Text( の後に、改行を入れていますが、改行は入れなくても構いません。また、引数の後に、カンマ , を残したままでも問題ありません。

改行する

改行する場合、

Text(
  '2行に渡る文字列だよ。\n2行に渡る文字列だよ。',
)

のように \n を入れます。他の言語と似てます。引用符が " でも ' でも改行の仕方は一緒です。

装飾を施す

装飾を施す場合は、 TextStyle を使います。 Flutter には予め、 Colors というクラスにいくつもの色が定義済みになっています。 今回は、 Colors.red を利用してみましょう。

Text(
  '赤い文字列だよ。',
  style: TextStyle(
    color: Colors.red,
  ),
)

このように、 style という引数に、 TextStyle を入れることで装飾が施されます。

太字にする

太字にしたい場合、

Text(
  '太い文字列だよ。ABC',
  style: TextStyle(
    fontWeight: FontWeight.bold,
  ),
)

のようにします。

現在の仕様では、太字は英数字のみに対応のようです。

行間を空ける

今のところ、太字にしたい場合、

Text(
  '2行に渡る文字列だよ。\n2行に渡る文字列だよ。',
  style: TextStyle(
    height: 1.0,
  ),
)

Web 開発でいう、 line-height のように思いますが、若干それとは異なるような挙動をします。目視でのチェックをオススメします。

変数の内容や値を文字列の中に表示する

$ という記号を使うことで、文字列の中に、変数の内容を挿入することができます。

final someVariable = "へんすう";
Text(
  '変数 $someVariable を表示する方法。',
)

直接、値を入れたいときや、変数と文字列の境がわからないときには、 ${} を使います。

final someVariable = "Some Variable";
Text(
  'Show ${1} or ${someVariable}s.',
)

末尾を … で切る

引数 overflowTextOverflow.ellipsis を適応することで、表示を強制的に一行に収めることができます。

Text(
  'とても長い文字列です。とても長い文字列です。とても長い文字列です。とても長い文字列です。とても長い文字列です。',
  overflow: TextOverflow.ellipsis,
),

コードの例

例えば、コードは以下のようになります。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'わかりやすい'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    final someVariable = "へんすう";
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'ふつうの文字列だよ。',
          ),
          Text(
            '赤い文字列だよ。',
            style: TextStyle(
              color: Colors.red,
            ),
          ),
          Text(
            '太い文字列だよ。ABC',
            style: TextStyle(
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            '2行に渡る文字列だよ。\n2行に渡る文字列だよ。',
            style: TextStyle(
              height: 1.0,
            ),
          ),
          Text(
            '値 ${1} や変数 $someVariable を表示する方法。',
          ),
          Text(
            'とても長い文字列です。とても長い文字列です。とても長い文字列です。とても長い文字列です。とても長い文字列です。',
            overflow: TextOverflow.ellipsis,
          ),
        ],
      ),
    );
  }
}

スクリーンショット

参考リンク