【Flutter】Textウィジェットの使い方

2023年12月18日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

Textウィジェットは、テキスト（文字列）を表示する時に使います。

このページでは、このTextウィジェットの基本的な使い方について紹介します。

基本の書き方

Text('表示したい文字列')

Text()に文字列を記述することで、テキストを表示することができます。

文字列はシングルクオーテーション（’）またはダブルクオーテーション（”）で囲みます。

例：画面中央に「Hello Flutter」を表示する

void main() {
  runApp(
    MyApp()
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      body: Center(
        child: Text('Hello Flutter'),
        ),
      )
    );
  }
}

テキストの装飾をする

テキストの色やサイズなどを変えたい場合は、styleプロパティを追加します。

Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 40.0,  // フォントサイズ
    color: Colors.red,  // フォントカラー
    fontWeight: FontWeight.bold, // フォントの太さ
    letterSpacing: 2.5 // 文字間隔
  )
)