final 変数

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 16/34。

finalは、変化しない値を表すもう一つの言葉です。final変数には一度だけ値が設定され、その後、別の値を代入することはできません。

final int total = _tickets * 12;
total = 50;   // エラー: total は final です

constとの違いは、値がいつわかるかです。constの値は、12のようにコードを書くときにわかっています。finalの値は、_tickets * 12のようにアプリの実行中に計算できます。これは、現在のチケットの枚数によって決まります。

const int price = 12;                // 常に12
final int total = _tickets * price;  // buildの実行時に決まる

buildの先頭にあるfinal変数は、ビルドのたびに再計算されるため、setStateの後には新しい合計値が入ります。一度設定して読み取るだけの値にはfinalを使い、_ticketsのように変更する値には通常のintまたはStringを使います。

チャレンジ

簡単

チケット1枚の価格は12です。buildの先頭にconst int price = 12;と、_ticketsにpriceを掛けた値を持つfinal変数totalを追加してください。Total: ?の代わりにTotal: 12と表示し、チケットをもう1枚追加するとTotal: 24と表示されるようにしてください。

自分で試してみよう

import 'package:flutter/material.dart';

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

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

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _tickets = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Tickets')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Tickets: $_tickets', style: const TextStyle(fontSize: 24)),
            Text('Total: ?', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _tickets++;
                });
              },
              child: const Text('Add a ticket'),
            ),
          ],
        ),
      ),
    );
  }
}