文字の表示

TextにTextStyleを組み合わせて文字列（テキスト）を表示します。

基本の文字

基本の文字は、

Text(
  '普通の文字です。',
),

で表示できます。

 

改行

改行したい箇所に \n を入れます。

Text(
  '改行もできます。\n２行目です。',
),

 

スタイリング

文字のスタイリングを変えるには、 TextStyle を使います。

文字色を変える

Text(
  '文字色を変える',
  style: TextStyle(color: Colors.red),
),

 

 

太字にする

Text(
  '太文字にする',
  style: TextStyle(fontWeight: FontWeight.bold),
),

 

 

文字サイズを変える

Text('文字サイズを変えられます。',
  style: TextStyle(fontSize: 20),
),

 

 

行間をあける

Text(
  '行間をあける\n行間をあけた2行目の文字列です',
  style: TextStyle(height: 1.5,),
),

 

 

中央揃え

文字を中央揃えにするには、 Text を Container で囲みます。

Container(
  width: double.infinity,
  child: Text(
  '中央揃えは、Containerで囲む',
  textAlign: TextAlign.center,
  ),
),

 

 

変数の値を表示する

 $ 記号を使います。

Text(
  '変数の値を表示できます。$nameくん！',
),

 

 

末尾を・・・で切る

Text(
  '長い文字列を…で切ります。長い文字列を…で切ります。長い文字列を…で切ります。長い文字列を…で切ります。',
  overflow: TextOverflow.ellipsis,
),

 

 

見本

 

コード例

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ネコでもわかるFlutter大辞典'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    String name = 'ネコ';
    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(

        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              '普通の文字です。',
            ),
            Text(
              '改行もできます。\nここが２行目です。',
            ),
            Text(
              '文字色も変えられます。',
              style: TextStyle(color: Colors.red),
            ),
            Text(
              '太文字にできます。',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Text('文字サイズを変えられます。',
              style: TextStyle(fontSize: 20),
            ),
            Text(
              '行間をあけられます。\n行間をあけた2行目の文字列です。',
              style: TextStyle(height: 2.0),
            ),
            Text(
              '変数の値を表示できます。$nameちゃん！',
            ),
            Text(
              '長い文字列を…で切ります。長い文字列を…で切ります。長い文字列を…で切ります。長い文字列を…で切ります。',
              overflow: TextOverflow.ellipsis,
            ),
            Text(
              'フォントをイタリックにします。',
              style: TextStyle(fontStyle: FontStyle.italic),
            ),
            Text(
              '下線を引きます',
              style: TextStyle(decoration: TextDecoration.underline,),
            ),
            Text(
              'ネコでもわかるFlutter大辞典',
              style: TextStyle(
                fontSize: 25,
                foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 3
                  ..color = Colors.blue[700],
              ),
            ),
            Container(
              width: double.infinity,
              child: Text(
                '中央揃えは、Containerで囲む',
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}