0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

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

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

##完成画面
02.JPG
03.JPG

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

##タイマー処理
前回のプロジェクトに処理を追加していきます。前回の記事を読んでいない方は先にそちらをお読みください。
変更していくファイルは、前回同様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アプリを作ることは、あまりないかもしれませんが、
何かのお役に立てれば幸いです。

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?