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

Tatsuya Tobioka

Published in

Ruffnote

4 min readJun 18, 2019

続きです。

FlutterでTimeCrowdアプリを作るその4: アクセストークンの保存

続きです。

medium.com

本日は今日やったタスク名とチーム名の一覧を取得するところまで。

モデル

チーム名とタスク名だけを持ったクラスを作って、JSONから初期化するコンストラクターを作ります。

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

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

  String title;
  Team team;
}

APIを叩く

あとはAPIにアクセスして、その結果からモデルのインスタンスを作るだけです。

Future<http.Response> _fetch(String path) async {
  return await http.get('https://timecrowd.net/api/v1/$path',
      headers: <String, String>{'Authorization': 'Bearer $_accessToken'});
}

Future<void> _fetchDailyTasks() async {
  final http.Response response = await _fetch('user/daily_activity');
  final List<dynamic> decoded = json.decode(response.body)['tasks'];

  setState(() {
    _tasks = decoded.map((dynamic d) => Task.fromJson(d)).toList();
  });
}

リスト表示

最後に、タスク一覧をリスト表示します。

ListView.separated(
  itemCount: _tasks.length,
  itemBuilder: (BuildContext context, int index) {
    final Task task = _tasks[index];
    return ListTile(
      title: Text(task.title),
      subtitle: Text(task.team.name),
    );
  },
  separatorBuilder: (BuildContext context, int index) => const Divider(),
)