..

押すだけタイマー をつくる(1)

作成するのは、事前設定した時間を計測するためのタイマーである。そのために、スケルトンを次のように変更していくのが、おおまかな方針だ。

  • SampleItem を事前設定した時間とする(1分とか3分とか)
  • リスト画面では、事前設定した時間を選択できる。あと、追加・削除も。
  • 詳細画面では、タイマーを実行する。あと、時間設定も。

まずは、SampleItemをPresetに変換する。つぎに、それを保存するためのコントローラーとサービスを追加する。とにかく、settingsと同じようにしよう。

├── lib
│   ├── main.dart
│   └── src
│       ├── app.dart
│       ├── localization
│       │   ├── app_en.arb
│       │   └── app_ja.arb
│       ├── preset_feature
│       │   ├── preset.dart
│       │   ├── preset_controller.dart
│       │   ├── preset_details_view.dart
│       │   ├── preset_list_view.dart
│       │   └── preset_service.dart
│       └── settings
│           ├── settings_controller.dart
│           ├── settings_service.dart
│           └── settings_view.dart

コントローラーは次の通り。まずはリストの取得先を変更したい。ChangeNotifierは、リストの変更ができるようになってからでよいだろう。
preset_controller.dart

import 'preset.dart';
import 'preset_service.dart';

class PresetController {
  PresetController(this._presetService);
  final PresetService _presetService;
  late List<Preset> _list;
  List<Preset> get list => _list;
  Future<void> loadPresetList() async {
    _list = await _presetService.load();
  }
}

サービスでは、確認用にリストに一件だけデーターを登録しておく。
preset_service.dart

import 'package:preset.dart';
class PresetService {
  static List<Preset> _list = [Preset(999)]; // これは表示確認用
  Future<List<Preset>> load() async {
    return _list;
  }
}

main.dartでは、SettingsControllerとSettingsServiceと同じように、PresetControllerとPresetServiceを生成し、 MyAppを呼び出すときには、PresetControllerも渡すようにする。

app.dartでは、MyAppのコンストラクターでPresetControllerを受け取り、それをPresetListViewを生成するときに渡す(ちなみに、PresetListViewは、constではなくなる)。

さいごに、PresetListViewのコンストラクターでもPresetControllerを受け取り、build関数内で、プロパティlistをitemsに設定する。
preset_list_view.dart

class PresetListView extends StatelessWidget {
  PresetListView({
    Key? key,
    required this.controller,
  }) : super(key: key);

  final PresetController controller;

  @override
  Widget build(BuildContext context){
    var items = controller.list;
    return Scaffold(

id:999のアイテムが表示された。大丈夫。