【Flutter】Textの使い方｜テキストの表示・装飾・文字切れの対処法

今回は「Text」の基本的な使い方について紹介します。

Textを使えばテキストを表示・装飾できます。またテキストが長すぎて文字切れしてしまう際の対処法についても紹介します。

Textの使い方

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      body: Center(
        child: Text('Hello World'),
      ),
    ),
  );
}

テキストを表示させるにはTextのコンストラクタで表示させる文字列をStringで渡します。

styleプロパティでテキストを装飾

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      body: Center(
        child: Text(
          'Hello World',
          style: TextStyle(
            fontSize: 30,
            color: Colors.orange,
            fontStyle: FontStyle.italic,
            fontWeight: FontWeight.bold,
            letterSpacing: 10,
          ),
        ),
      ),
    ),
  );
}

テキストを装飾するにはstyleプロパティでTextStyleを使用します。

今回はTextStyleで下のプロパティを使用しています。

fontSize	テキストのサイズ
color	テキスト色
fontStyle	テキストの表示スタイル
fontWeight	テキストの太さ
letterSpacing	テキスト間のスペース

文字切れする場合の対処法

Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flutter'),
      ),
      body: Center(
        child: Text(
          'Hello World Hello World Hello World Hello World Hello World',
          style: TextStyle(
            fontSize: 30,
            overflow: TextOverflow.ellipsis,
          ),
        ),
      ),
    ),
  );
}

テキストが長すぎて文字切れする可能性がある場合はTextStyleのoverflowプロパティで「TextOverflow.ellipsis」を渡します。文字切れする場合はテキストの最後が「...」と表示されます。

サンプルコード

//ソース
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter'),
        ),
        body: Center(
          child: Text(
            'Hello World Hello World Hello World Hello World Hello World',
            style: TextStyle(
              fontSize: 30,
              color: Colors.orange,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.bold,
              letterSpacing: 10,
              overflow: TextOverflow.ellipsis,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。