CodeZine(コードジン)

特集ページ一覧

Flutterではマテリアルデザインを用いたコンポーネントをどう使うのか【テキスト編】

Flutterで始めるモバイルアプリ開発 第13回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/11/09 11:00

 前回までは、レイアウトについて紹介しました。今回からは、テキストやボタン、入力コンポーネントなどのコンポーネントを紹介していきます。これらの多くのコンポーネントは、Flutterが採用している「マテリアルデザイン」をベースとしています。そのため、そのまま利用しても十分実用的なコンポーネントになっています。

目次

マテリアルデザインについて

 Flutterとマテリアルデザインは非常に密接な関係にあります。もともとマテリアルデザインというものがGoogleから発表されましたが、FlutterもGoogleと強く関係があることからも当然の流れと言えるでしょう。

 従って開発者は、Flutterのコンポーネントをどう使うかというよりは、マテリアルデザインを用いたコンポーネントをFlutterではどのように使うかという流れになります。どのようなコンポーネントがあるか、または、どのようなカスタマイズができるのかを調べるのに、Flutterのドキュメントを参照するよりも、MATERIAL DESIGNのサイトの方がわかりやすいかもしれません。

 このサイトでは、各言語に応じてマテリアルデザインで用意されたコンポーネントをどのように利用するかが紹介されています。例えば、図1のようにサイトでは言語でFlutterを選択すれば、どのようなコードを記述するかの例示がされるようになっています。

図1:マテリアルデザインのサイト(コンポーネント一覧画面)のキャプチャ
図1:マテリアルデザインのサイト(コンポーネント一覧画面)のキャプチャ

テキスト

 テキストは、文字を扱う場合に必須となります。テキスト自体は、マテリアルデザインとは関係ありませんが、スタイルのタイプをどのように分類するかといった視点では関係しています。

基本的なテキストの利用方法

 アプリケーションでは、ボタンなどの表示時に利用するラベルという位置づけのテキストと説明などの文章を示すテキストの二種類がありますが、Flutterではどちらもテキストという扱いになります。

 また、テキストには、同じスタイル(装飾など)でのテキストと、さまざまスタイルが混じったテキストがあり、後者はリッチテキストと呼ばれます。これらの使い方を示したものがリスト1で、実行結果が図2です。

図2:テキストとリッチテキストを使った実行例
図2:テキストとリッチテキストを使った実行例
[リスト1]テキストとリッチテキストを使ったサンプルコード(lib/text/Text1Widget.dartの抜粋)
Widget build(BuildContext context) {
  // (1) テキストのスタイル例
  const textStyle = TextStyle(
    color: Colors.black54,
    fontWeight: FontWeight.normal,
    fontStyle: FontStyle.normal,
    decoration: TextDecoration.none,
    fontSize: 20
  );
  // (2) テキストのスタイル例
  const boldStyle = TextStyle(
    color: Colors.redAccent,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.normal,
    decoration: TextDecoration.none,
    fontSize: 40
  );

  return Container(
    color: Colors.white,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        //  (3) テキストでのスタイル指定例
        Text(
          'Hello World',
          textAlign: TextAlign.center,
          style: textStyle,
        ),
        //  (4) リッチテキストの使用例
        RichText(
          // (5) 行数の指定と、表示できない場合の指定
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          text: TextSpan(
            children: [
              TextSpan(text : 'さあ', style: textStyle),
              TextSpan(text : 'Flutter', style: boldStyle),
              TextSpan(text : "を始めましょう", style: textStyle)
            ]
          ),
        ),
      ],
    )
  );
)

 (1)と(2)は実際のテキストを利用する際のスタイルの宣言例です。スタイルを指定する場合にはTextStyleを利用します。非常に多くのプロパティがありますが、主に利用するプロパティには表1があります。

表1:TextStyleの主なプロパティ
プロパティ値 説明
color 文字色
fontWeight
フォントの太さ、または重みを指定します。
fontStyle
フォントのスタイルである、通常(normal)または、イタリック(italic)などを指定します。
fontSize
フォントのサイズを指定します。
fontFamily フォントファミリ名を指定します。
decoration
フォントに下線や上線のような装飾をつける場合に指定します。また、装飾が必要ない場合にはnoneを指定します。
letterSpacing
文字と文字の間が開きの間隔を指定します。

 (3)はTextでのスタイル(style)と位置揃え(textAlign)を指定しています。また、RichTextは(4)のように利用します。TextSpanはHTMLで言えば、divであり、また、spanのようなものと思えばよいかと思います。

 divのように複数の文字列を格納する場合にはchildrenプロパティを利用し、spanのように利用する場合には、textプロパティを利用して文字列を指定します。

 また、表示する際に(5)のように最大表示行数(maxLines)を指定することもできます。表示がオーバーしてしまった場合にどのようなふるまいをするかは、overflowプロパティに表2のような値を指定が可能です。

表2:overflowのプロパティ例
プロパティ値 説明
TextOverflow.ellipsis
表示できない場合には、文末に「...」を表示して、はみ出す文字列を表示しない。
TextOverflow.clip 表示できないはみ出した文字列部分は切り取る。文字の途中で切れてしまう場合もある。ただし、表示できない行は表示しない。
TextOverflow.fade
clipと同様。ただし、フェードするように透過度を変えて文字を非表示にする。
TextOverflow.visible
はみ出しを考慮せずに表示する。clipと違い、表示できない行を考慮しないので、縦横ともに表示できない場合が生じる。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5