FlutterでTimeCrowdアプリを作るその6: タスクのURLを開く

Tatsuya Tobioka

Published in

Ruffnote

4 min readJul 11, 2019

以下の続きです。

FlutterでTimeCrowdアプリを作るその5: 今日やったタスクの一覧

続きです。

medium.com

最近お仕事が忙しくて更新できてませんでしたが、Flutter 1.7もリリースされたことなので、久々に書こうと思います。

Announcing Flutter 1.7

Continued refinement and polish for mobile platforms

medium.com

前回までで今日やったタスクの一覧を表示することができるようになりました。

実はタイムクラウドには隠し機能（ではない）があり、Chrome拡張が提供されています。

TimeCrowd

Time-tracking makes us happy

chrome.google.com

これを使うと今見ているページのURLを紐づけた打刻をすることができます。

さて、今回はこのURLをアプリ上で開けるようにしてみたいと思います。

モデル

タスクモデルがurlを持てるようにします。

class Task {
  Task.fromJson(Map<String, dynamic> json) {
    title = json['title'];
    url = json['url'];
    team = Team.fromJson(json['team']);
  }

  String title;
  String url;
  Team team;
}

プラグイン

URLを開くためのプラグインとしてurl_launcher があります。
FlutterOAuthの依存としてすでに含まれていたので、importすれば使えます。

import 'package:url_launcher/url_launcher.dart';

開くボタンを追加

ListViewを書き換えて、urlがあるときには開くようのボタンを追加します。

ListView.separated(
  itemCount: _tasks.length,
  itemBuilder: (BuildContext context, int index) {
    final Task task = _tasks[index];
    return Container(
      padding: EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(task.title),
              Text(task.team.name),
            ],
          ),
          if (!task.url.isEmpty)
            IconButton(
              icon: Icon(Icons.link),
              tooltip: task.url,
              onPressed: () {
                launch(task.url);
              },
            ),
        ],
      ),
    );
  },
)