変数を使った文字列

CoddyのFlutterジャーニー「はじめてのアプリ」セクションの一部。レッスン 12/32。

文字列の中に変数を入れるには、ドル記号とその名前を書きます。

String name = 'Ada';
Text('Hello, $name!')   // こんにちは、Ada!

これは文字列補間と呼ばれます。単なる名前以外のもの、たとえば計算やプロパティを入れる場合は、ドル記号の後に波括弧で囲みます。

Text('$name has ${name.length} letters')   // Adaは3文字です

name.lengthは、その文字列に含まれる文字数です。波括弧を付けないと、'$name.length'は名前の後に.lengthが続いて表示されます。

チャレンジ

簡単

アプリには変数 name があります。その変数を使って、2つの行が次のように表示されるようにしてください。

Hello, Grace!
Grace has 5 letters。数値は name.length から取得します。

これらを囲む Column は、2つの行を上下に並べます。後の章で、自分で Column を作ります。

自分で試してみよう

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    String name = 'Grace';
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Hello!'),
              Text('Letters'),
            ],
          ),
        ),
      ),
    );
  }
}