소개

전 3회로 나누어 Flutter로 Linux의 GUI 앱을 작성하는 순서를 정리하고 있습니다.
개발 환경은 VScode를 사용하여 타이머 앱을 만듭니다.

첫 번째 환경 구축편
제 2 회 화면 작성편
제3회 완성편(이번은 여기)

이번은 전회의 계속으로부터 완성까지의 기사입니다.

완성 화면

그럼, 조속히 시작해 갑니다.
소스 코드는 여기

타이머 처리

마지막 프로젝트에 처리를 추가합니다. 이전 기사를 읽지 않은 분은 먼저 그곳을 읽어주세요.
변경해 가는 파일은, 전회와 같이 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회를 통해 리눅스 앱을 만들었습니다.
리눅스에서 GUI 앱을 만드는 것은 별로 없지만,
뭔가 도움이되면 다행입니다.

끝까지 읽어 주셔서 감사합니다.

실수 등이 있으면 지적 · 코멘트를 부탁드립니다.