フィールドを非公開にする

CoddyのFlutterジャーニー「状態管理」セクションの一部。レッスン 7/27。

サーモスタットの温度は、26度を超えたり16度を下回ったりしてはいけません。warmerメソッドでそれを確認できますが、ほかの方法で数値を変更できない場合に限ります。フィールドがpublicのままだと、どのコードからでもthermostat.degrees = 99と書き込めてしまいます。

_で始まる名前はprivateです。同じファイル内のコードだけが使用できます。クラスを独自のファイルに置き、フィールドをprivateにして、外部から値を読み取るためのgetterと、値を変更するメソッドを用意しましょう。

// thermostat.dart
class Thermostat {
  int _degrees = 20;

  int get degrees => _degrees;

  void warmer() {
    if (_degrees < 26) {
      _degrees = _degrees + 1;
    }
  }
}

ページではimport 'thermostat.dart';を使ってファイルをインポートします。thermostat.degreesを読み取れますが、thermostat.degrees++はコンパイルできなくなります。getterはありますが、値を設定する方法はありません。温度を変更する唯一の方法はメソッドを通すことなので、常に制限が守られます。

ファイルリストでthermostat.dartを開いて編集してください。

チャレンジ

中級

ボタンは制限なく、ページから直接degreesを変更します。thermostat.dartで:

フィールドの名前を_degreesに変更し、その値を返すゲッターdegreesを追加します。
26まで1ずつ増やすwarmer()と、16まで1ずつ減らすcooler()を追加します。

次に、main.dartのボタンがthermostat.warmer()とthermostat.cooler()を呼び出すようにします。

自分で試してみよう

import 'package:flutter/material.dart';

import 'thermostat.dart';

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

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

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

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

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

class _HomePageState extends State<HomePage> {
  final thermostat = Thermostat();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Thermostat')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('${thermostat.degrees}°C', style: const TextStyle(fontSize: 48)),
            const SizedBox(height: 16),
            Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      thermostat.degrees--;
                    });
                  },
                  child: const Text('Cooler'),
                ),
                const SizedBox(width: 16),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      thermostat.degrees++;
                    });
                  },
                  child: const Text('Warmer'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}