Help us understand the problem. What is going on with this article?

【初学者向け】Flutterを使ってアプリを作る

こちらは、TOWN Advent Calendar 2019 17日目のエントリーです。

Flutterとは、Googleによって開発された、単一のソースコードからiOS/Android両方のアプリケーションを構築することができるオープンソースのモバイルのアプリケーションフレームワークです。
今回はQiitaの記事を一覧表示するFlutterのアプリを作ってみました。

開発環境構築

以下のエントリを参考にさせていただきました。
Flutter開発環境構築(Mac編)

作ったもの

Screenshot from Gyazo

APIをコールするクラスとエンティティクラスを定義したapiClient.dartと UIを生成するmain.dart の2つにファイルを分割しています。
今回のようなシンプルなUIではなく、凝ったUIを実装しようとしたときにどれだけコードが複雑になるのか気になりました。
学習自体は公式ドキュメントも豊富なので学習は比較的しやすいのかなと思います。

apiClient.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

/// APIをコール/レスポンスデータを取得するクラス
class ApiClient {
  static Future<List<Post>> fetchPosts() async {
    final fetchUrl = 'https://qiita.com/api/v2/items';
    final response = await http.get(fetchUrl);
    if (response.statusCode == 200) {
      final List<dynamic> jsonList = json.decode(response.body);
      return jsonList.map((json) => Post.fromJson(json)).toList();
    } else {
      throw Exception('Failed to fetch Data.');
    }
  }
}

/// エンティティ
class Post {
  final String id;
  final String title;

  Post({
    this.id,
    this.title,
  });

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
    );
  }
}
main.dart
import 'package:flutter/material.dart';
import 'package:demo_app/apiClient.dart';

// 起点
void main() => {runApp(PostListPage())};

class PostListPage extends StatelessWidget {
  final Future<List<Post>> posts = ApiClient.fetchPosts();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Qiita Articles'),
        ),
        body: Center(
          // FutureBuilderで非同期にWidgetを生成する
          child: FutureBuilder<List<Post>>(
            future: posts,
            builder: (context, snapshot) {
              // データが存在していたらリスト表示する
              if (snapshot.hasData) {
                return PostListView(posts: snapshot.data);
              }
              return CircularProgressIndicator(); // ローディング表示
            },
          ),
        ),
      ),
    );
  }
}

class PostListView extends StatelessWidget {
  final List<Post> posts;
  PostListView({Key key, this.posts}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 記事のリストを生成
    return ListView.builder(
      itemCount: posts.length,
      itemBuilder: (BuildContext context, int index) {
        final post = posts[index];
        return ListTile(
            title: Text(post.title),
        );
      },
    );
  }
}

参考ページ

ROYH
TOWN株式会社でSaaS型ビジネスコラボツール「Aipo」の開発をしています。 アウトプットの習慣化を主としています。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした