MENU

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

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

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 // 文字間隔
  )
)

数値を表示する

数値をテキストとして表示したい場合は、toString() メソッドを使ってString型に変換します。

Text(100.toString())

Flutterが学べる書籍

Share
  • URLをコピーしました!

Comment

コメントする

目次