【Flutter】Textの使い方｜テキストを表示・装飾する

「Flutterアプリで静止テキストを表示したい」

こんな時に便利なのが Text ウィジェットです。

Textを使用することでFlutterアプリにテキストを表示できます。またTextStyleウィジェットを使えば文字の大きさや色、太さなど様々な装飾ができます。

それではTextの基本的な使い方とカスタマイズ方法について解説していきます！

基本的な使い方

Textの基本的な使い方について解説します。

テキストを表示するにはTextの引数に表示したい文字列を渡すだけです。

Text('Hello World'),

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

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

カスタマイズ方法

続いてTextのカスタマイズ方法について解説します。

Textの基本的な装飾はstyleプロパティの引数にTextStyleウィジェットを渡して設定できます。

Text(
  'Hello World',
  style: TextStyle(
    // ここで様々な装飾ができる
  ),
),

文字の大きさ（フォントサイズ）

テキストの大きさはTextStyleのfontSizeプロパティで設定できます。

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 50,
  ),
),

テキストの色・背景色

テキストの色はTextStyleのcolorプロパティ、背景色はbackgroundColorプロパティで設定できます。

Text(
  'Hello World',
  style: TextStyle(
    color: Colors.white,
    backgroundColor: Colors.blue,
  ),
),

文字の太さ（フォントウェイト）

テキストの太さはTextStyleのfontWeightプロパティで設定できます。

単に文字を太くするだけならfontWeightプロパティの引数にFontWeight.boldを渡し、好みの太さに調整したい場合はFontWeight.w100のように「w100(細い)」から「w900(太い)」の100単位で太さを指定できます。

Text(
  'Hello World',
  style: TextStyle(
    fontWeight: FontWeight.Bold,
  ),
),

イタリック（斜体）にする

テキストをイタリックで表示するにはTextStyleのfontStyleプロパティにFontStyle.italicを渡します。

Text(
  'Hello World',
  style: TextStyle(
    fontStyle: FontStyle.italic,
  ),
),

まとめ

今回はTextの基本的な使い方とカスタマイズ方法について解説しました。

Textを使用することでFlutterアプリにテキストを表示できます。またTextStyleウィジェットを使えば文字の大きさや色、太さなど様々な装飾ができるのでぜひ使ってみてください。