Udemyセール開催中! 対象コースが1,220円から

【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テキスト間のスペース

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

overflow: TextOverflow.ellipsis なし
overflow: TextOverflow.ellipsis あり
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,
            ),
          ),
        ),
      ),
    );
  }
}

以上です。

  • URLをコピーしました!
目次
閉じる