0 | API_Fetch_Sample.md

Flutter Fetch Data Sample

• https://medium.com/@mohamedraja_77/create-your-first-api-call-in-flutter-a04d023ebd50

1 | main.dart

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'API Fetch Example',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('API Fetch Example'),
        ),
        body: new Container(
          child: new FutureBuilder<List<User>>(
            future: fetchUsersFromGitHub(),
            builder: (context, snapshot) {  
              if (snapshot.hasData) {
                return new ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index) {
                    return new Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        new Text(
                          snapshot.data[index].name,
                          style: new TextStyle(fontWeight: FontWeight.bold)
                        ),
                        new Divider()
                      ]
                    );
                  },
                  padding: const EdgeInsets.all(16.0),
                );
              } else if (snapshot.hasError) {
                return new Text("${snapshot.error}");
              }

              // By default, show a loading spinner
              return new CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }

  Future<List<User>> fetchUsersFromGitHub() async {
    final response = await http.get('https://api.github.com/users');
    print(response.body);
    List responseJson = json.decode(response.body.toString());
    List<User> userList = createUserList(responseJson);
    return userList;
  }

  List<User> createUserList(List data){
     List<User> list = new List();
    for (int i = 0; i < data.length; i++) {
      String title = data[i]["login"];
      int id = data[i]["id"];
      User user = new User(name: title,id: id);
      list.add(user);
    }
    return list;
  }

}

class User {
  String name;
  int id;
  User({this.name,this.id});
}

2-1 | main.dart

import 'package:flutter/material.dart';
import 'package:first_app_api/client/github_api_client.dart';
import 'package:first_app_api/entity/github_user.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'API Fetch Sample',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('API Fetch Sample'),
        ),
        body: new Container(
          child: new FutureBuilder<List<User>>(
            future: GitHubClient().fetchUsersFromGitHub(),
            builder: (context, snapshot) {  
              if (snapshot.hasData) {
                return new ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index) {
                    return new Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        new Text(
                          snapshot.data[index].name,
                          style: new TextStyle(fontWeight: FontWeight.bold)
                        ),
                        new Divider()
                      ]
                    );
                  },
                  padding: const EdgeInsets.all(16.0),
                );
              } else if (snapshot.hasError) {
                return new Text("${snapshot.error}");
              }

              // By default, show a loading spinner
              return new CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

2-2 | client>github_api_client.dart

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';
import 'package:first_app_api/entity/github_user.dart';

class GitHubClient {
  Future<List<User>> fetchUsersFromGitHub() async {
    final response = await http.get('https://api.github.com/users');
    print(response.body);
    List responseJson = json.decode(response.body.toString());
    List<User> userList = createUserList(responseJson);
    return userList;
  }

  List<User> createUserList(List data){
    List<User> list = new List();
    for (int i = 0; i < data.length; i++) {
      String title = data[i]["login"];
      int id = data[i]["id"];
      User user = new User(name: title,id: id);
      list.add(user);
    }
    return list;
  }
}

2-3 | entity>github_user.dart

class User {
  String name;
  int id;
  User({this.name,this.id});
}