const ウィジェット

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

値の前にあるconstは、コードを書くときに値が固定され、その後は変わらないことを意味します。const Text('Score')は、アプリの実行中ずっとScoreを表示します。

Dartにそれを伝えるのはなぜでしょうか？setStateによって画面が再構築されるとき、Flutterは変更されていないことがわかっているため、すべてのconstウィジェットをスキップできます。そのため、VS CodeやAndroid StudioなどのFlutter用コードエディターでは、constにできるウィジェットに下線を引いて追加を提案します。これ以降、このコースのアプリでは、適切な箇所でconstを使います。

constは内側にも適用されます。ウィジェットに付けると、括弧内のすべてもconstになります。つまり、変化しない最も外側のウィジェットに一度だけ付けます。

const Column(
  children: [
    Text('Score'),
    Icon(Icons.star),
  ],
)

変数は変化する可能性があるため、constの内側には置けません。このカラムにText('$_score')を入れると、Dartは「定数式ではありません」というエラーを出してコンパイルを拒否します。解決方法は、カラムからconstを外し、変化しない各子ウィジェットに付けることです。

Column(
  children: [
    const Text('Score'),
    Text('$_score'),
  ],
)

チャレンジ

中級

プラスボタンを押すとスコアは増えますが、画面には表示されません。Scoreの下に、サイズ48でText('$_score')を追加してください。constをColumnから、変更されないその中のウィジェットに移す必要があります。

自分で試してみよう

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 _score = 0;

  void _goal() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Game')),
      body: Center(
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.sports_soccer, size: 64),
            Text('Score', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goal,
        child: const Icon(Icons.add),
      ),
    );
  }
}