目的

flutterでカウントダウンタイマーアプリを作りながら、flutterの仕様を学んでみたいと思います。

flutterの規約やらドキュメントやらを全く見てないで作製するという、エンジニアにあるまじき行為で行います。

お作法間違っている箇所もあると思うので、参考程度にしてください。


環境

  • Flutter 1.12.13+hotfix.9

参照サイト

Flutter 入門 Timer の使い方

書き方など参考にしていますが、参照程度ですし、そもそも作り上がるもの違いますというのを留意ください。

コードと解説

早速コードを載せます。コメントの数字は後述で考察しています。
不明点が多く、断定している箇所は少ないです。

main.dart

まずはmain.dartです。

main.dart
import 'package:flutter/material.dart';
import 'countDownTimer.dart';//1:別ファイル

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: countDownTimer(),//2:別ファイルのクラス参照
    );
  }
}

1:別ファイル

main.dartファイルにすべての処理を記載するとメンテナンスしやすさで難となるので、画面ごとや機能ごとでファイルを分ける。
ファイル分割する場合はimportで読み込む

2:別ファイルのクラス参照

別クラスの呼び出し方
home:で最初に表示するクラスになるよう

countDownTimer.dart

次に自作ファイルのcountDownTimer.dartです。

xcountDownTimer.dart
import 'package:flutter/material.dart';
import 'dart:async';//3:timerのためのインポート

class countDownTimer extends StatefulWidget {//4:StatefulWidgetが必要?
  countDownTimer({Key key}) : super(key: key);

  @override
  _countDownTimerState createState() => _countDownTimerState();//5:実装クラスに渡している
}

class _countDownTimerState extends State<countDownTimer> {
  int _start = 180;//6:タイマーカウントダウン数

  @override
  void initState() {//7:初期値クラス?
    startTimer();
    super.initState();//8:super参照はクラスの最後でよい?
  }

  void startTimer() {
    Timer.periodic(
      Duration(seconds: 1),//9:1秒ごとに処理
      (Timer timer) => setState(
        () {
          if (_start < 1) {
            timer.cancel();
          } else {
            _start = _start - 1;//10:1ずつデクリメント
          }
        },
      ),
    );
  }
}

  @override
  Widget build(BuildContext context) {//11:buildは最後に書くのが作法?
    return Scaffold(
      appBar: AppBar(
        title: Text("タイマー"),//12:ナビゲーションバータイトル
      ),
      body: Center(//13:画面表記
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '$_start',//13:テキスト文字
              style: Theme.of(context).textTheme.display1,//14:フォント
            ),
          ],
        ),
      ),
    );
  }

3:timerのためのインポート

Timer機能を利用するためにimport 'dart:async'する必要がある。

4:StatefulWidgetが必要?

extends StatefulWidgetは必ず必要なのだろうか。おまじないとして書いている。

5:実装クラスに渡している

StatefulWidgetを継承したクラスから実装クラスを呼び出している。この辺もおまじないとしている。

6:タイマーカウントダウン数

3分間のカウントダウンとしたいので、値設定。

7:初期値クラス?

void initState()が初期値クラスというか、クラス呼び出し時に一度だけ呼ばれるクラスのよう。

8:super参照はクラスの最後でよい?

super.initState();の実行タイミングがきになったけど、あまりきにしなくて良いのかな!?

9:1秒ごとに処理

1秒ごとに処理を行う設定

10:1ずつデクリメント

1秒ごとに1値を減らす。

11:buildは最後に書くのが作法?

Widget buildはクラスの最後に書いたほうが良いとかあるのでしょうか?

12:ナビゲーションバータイトル

ナビゲーションバーに表示されるタイトル文字の設定

13:テキスト文字

画面中央に表示するテキスト

14:フォント

テキストのフォント設定

アプリの挙動

上記プログラムを実装したアプリの挙動が以下となります。

感想

動くアプリを簡単に作ることが出来ました。
ただ、画面描画の部分もコードで書く必要があるため、個人的には面倒そうなです。
次はボタンを組み込んでみたいと思います。