第三回 Flutter + VScode でLinuxアプリを作成する(完成編)

はじめに

全3回に分けFlutterでLinuxのGUIアプリを作成する手順をまとめています。
開発環境はVScodeを使用し、タイマーアプリを作成します。

第一回　環境構築編
第二回　画面作成編
第三回　完成編(今回はここ)

今回は前回の続きから完成までの記事です。

完成画面

では、早速始めていきます。
ソースコードはここ

タイマー処理

前回のプロジェクトに処理を追加していきます。前回の記事を読んでいない方は先にそちらをお読みください。
変更していくファイルは、前回同様app/lib/main.dartです。

まず、タイマーを作成するのに必要なものをインポートします。

main.dart

import 'dart:async';

つぎに、スタートボタンの処理を記述します。
setStateは設定内容を画面に反映させるために使用します。
Duration(seconds: 1)により1秒ごとに処理が流れるようにしています。
書き方はJavaやC#とほぼ一緒なのでその辺の経験がある方は、理解できると思います。
注意する点は除算の計算で/は、浮動小数になるため、整数切り捨てにするために~/を使用します。

main.dart

  void _startPressed() {
    if (_time == "00:00") return;
    setState(() {
      if (_start == "START") {
        _start = "STOP";
      } else {
        _start = "START";
      }
    });
    Timer.periodic(
      Duration(seconds: 1),
      (Timer timer) => setState(
        () {
          if (_start == "START") {
            timer.cancel();
          } else {
            List t = _time.split(':');
            int sec = int.parse(t[0]) * 60 + int.parse(t[1]);
            sec--;
            _time = (sec ~/ 60).toString().padLeft(2, "0") +
                ":" +
                (sec % 60).toString().padLeft(2, "0");
            if (sec == 0) {
              timer.cancel();
              _start = "START";
            }
          }
        },
      ),
    );
  }

最後に、数字ボタンの処理を記述します。
今回は、タイマーが動いている最中はボタンを押しても無視するようにします。
数字を押したら右端に追加しています。
lengthを取っている理由は「99:99」など異常値になりえるものが入力されたときの対策です。

main.dart

  void _numberPressed(String number) {
    setState(() {
      if (_start == "START") {
        int len = _time.length;
        _time = _time[len - 4] + _time[len - 2] + ":" + _time[len - 1] + number;
      }
    });
  }

以上で、処理の追加は終了です。

出力アプリ名の変更

前回までは、リリースビルドした際、appという名前で出力されていました。
それを変更します。
変更ファイルはapp/linux/CMakeLists.txtです。

CMakeLists.txt

//4行目
set(BINARY_NAME "Timer")

アプリヘッダー名の変更

前回までは、アプリのヘッダーがappという名前で表示されていました。
それを変更します。
変更ファイルはapp/linux/my_application.ccです。

my_application.cc

//43行目
gtk_header_bar_set_title(header_bar, "Timer");

//48行目
gtk_window_set_title(window, "Timer");

終わりに

全3回を通してLinuxアプリを作成しました。
LinuxでGUIアプリを作ることは、あまりないかもしれませんが、
何かのお役に立てれば幸いです。

最後まで読んで下さり、本当にありがとうございました。

間違い等がありましたらご指摘・コメントをお願いします。