Chapter 13

Flutter基礎 ~Text・TextStyle~

ENGINEER HIKARU
ENGINEER HIKARU
2020.09.28に更新
このチャプターの目次
  1. Flutterアプリの組み立て方
  2. Flutterアプリの基本の形
  3. テキスト(Text) 【Widget】
  4. テキストスタイル(TextStyle)

今回のチャプターでは、Flutterのウィジェット「Text」と「TextStyle」について解説していきます。
今回はチャプター8で作成したFlutterアプリを使いますので、ご用意ください。

Flutterアプリの組み立て方

Flutterアプリは、フレームワークであるFlutterが提供するWidget(ウィジェット)と呼ばれるUIを構築するパーツを組み合わせて作成します。Widgetには、テキストを表示するものやレイアウトを調整するもの、ボタンを表示するものなど様々とあり、アプリを作るのに十分なWidgetがあります。
HTMLを学んだことのある人はよく分かると思いますが、Widgetは入れ子(ネスト)のようにして組み合わせます。
どういうことか、コードで例をみた方が早いと思うので下記をみてください。

// 例
home: Scaffold(
  body: Center(
    child: Text('こんにちは'),
  ),
),

この例でいうと、青くなっているのが全てWidgetで、このようにWidgetの中にWidgetが含まれているのが分かるかと思います。画面に表示されるイメージとしては絵のような感じで、Widgetの上にWidgetが乗ります。つまり考え方はこうです↓

Flutterアプリの基本の形

Flutterアプリでは最初の基本的な書き方があります。Dartを元に作られているので、アプリの開始はlibフォルダ配下のmain.dartのvoid main()からスタートします。そのスタートした所で、runApp関数を実行することでFlutterアプリは起動します。(細かい部分については別チャプターで解説します)
flutter create appnameで作成したばかりのサンプルで作られている部分は全て消して、下のコードをコピペしてください。

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appname',
      home: Scaffold(
        body: Text(''),
      ),
    );
  }
}

テキスト(Text) 【Widget】

早速Widgetを解説していきます。まずテキストを表示するウィジェットです。
テキストはTextウィジェットを使います。使い方は簡単で、Text()でかっこの中に表示したい文字列を入れるだけです。アプリの起動に関しては、チャプター05,06を参照してください。

// 例
Text('こんにちは'),

表示できたでしょうか？あれ、文字が小さいと思ったのではないでしょうか？
そんな時はTextStyleで文字サイズを変更します。

// 例
Text(
  'こんにちは',
  style: TextStyle(
    fontSize: 30,
  ),
),

このようにカンマを使って、色々な設定をします。
TextStyleには色々な設定があり、よく使うので解説します。

テキストスタイル(TextStyle)

まずTextStyleですが、20以上の設定項目があります。
全部を紹介しても覚えきれないと思いますので、今回はよく使う下記の5つを解説します。

Text(
  'こんにちは',
  style: TextStyle(
    fontSize: 30.0, // 文字サイズ
    fontWeight: FontWeight.bold, // 文字の太さ
    color: Colors.blue, // 文字の色
    letterSpacing: 3.0, // 文字と文字のスペース
    fontFamily: 'Lato', // フォントの種類
  ),
),

まずfontSizeですが、これは文字のサイズでdouble型で指定します。このサイズはピクセル表示で、デフォルトは14px(ピクセル)となっています。

続いてfontWeightですが、文字の太さを指定します。文字の太さを太くするにはFontWeight.boldを使います。それ以外にも値がありますが、指定しなくて良いと思います。デフォルトはFontWeight.normalとなっています。

続いてcolorですが、これは文字の色を指定します。色の指定についてはまた別のチャプターで詳しく解説しますが、今回の場合だと青に変えています。

続いてletterSpacingですが、文字と文字のスペースでdouble型で指定します。このサイズもピクセル表示で、デフォルトは0pxです。文字間を広げた方が読みやすくなる時もあるので、臨機応変に使うと吉です😊

最後にfontFamilyですが、フォントの種類を指定します。デフォルトはRobotoというGoogleフォントになっています。フォントはフリーフォントなどを使うことが出来ます。今回の場合だとLatoというフリーフォントを使っています。
Flutterでフリーフォントを設定するまでの手順を下記にまとめます。

  1. フリーフォントを取得します。今回はLatoを使用
  2. Flutterアプリにassetsというフォルダを作成し、その配下にfontsというフォルダを作成します。
  3. インストールしたフリーフォントの中にある〇〇-Regular.ttfと〇〇-Bold.ttfというファイルをFlutterアプリのfonts配下に移動する
  4. pubspec.yamlファイルのデフォルトだと40行目くらいの所にあるflutter:の下の所に下記のように記述する。
flutter:
  fonts:
    - family: Lato
      fonts:
        - asset: assets/fonts/Lato-Regular.ttf
	- asset: assets/fonts/Lato-Bold.ttf
	  weight: 700

この時、上のように字下げしていないと正しくロードされないので注意が必要です。
family:の所に指定する名前=fontFamilyで指定する名前になります。
fonts:の所でインポートするttfファイルを読みこみます。
Regularには必要ないですが、文字の太い方にはweight:に600,700,800,900のどれかを指定してあげましょう。
書き終わったらyamlファイルを保存します。そうするとVSCodeの場合、flutter pub getというコマンドが勝手に実行されてフォントが使えるようになります。(実行されない場合は手動で！)

テキストに関しては、とりあえずこんな感じで解説終わります。(頭痛くなると思うので...)
次のチャプターでは、ウィジェットの１つContainerについて解説します。