Flutter How To Fetch Data using API Calls in Flutter HTTP


main.dart

import 'package:flutter/material.dart';
import 'package:lesson_001_google_map/user_list.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rest API Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UserList(),
    );
  } 
}

user_list.dart

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

class UserList extends StatelessWidget {
  final String apiUrl = "https://randomuser.me/api/?results=10";

  Future<List<dynamic>> fetchUsers() async {
    var result = await http.get(apiUrl);
    return jsonDecode(result.body)['results'];
  }

  String _name(dynamic user) {
    return "${user['name']['title'] + " " + user['name']['first'] + " " + user['name']['last']}";
  }

  String _location(dynamic user) {
    return "${user['location']['country']}";
  }

  String _age(Map<dynamic, dynamic> user) {
    return "${"Age: " + user['dob']['age'].toString()}";
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: Container(
        child: FutureBuilder<List<dynamic>>(
          future: fetchUsers(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  padding: EdgeInsets.all(8),
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Card(
                      child: Column(
                        children: <Widget>[
                          ListTile(
                            leading: CircleAvatar(
                              radius: 30.0,
                              backgroundImage: NetworkImage(
                                  snapshot.data[index]['picture']['large']),
                            ),
                            title: Text(
                              _name(snapshot.data[index]),
                            ),
                            subtitle: Text(
                              _location(snapshot.data[index]),
                            ),
                            trailing: Text(
                              _age(snapshot.data[index]),
                            ),
                          )
                        ],
                      ),
                    );
                  });
            } else {
              return Center(
                child: CircularProgressIndicator(),
              );
            }
          },
        ),
      ),
    );
  }
}


Source: https://randomuser.me
Output:


Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment

0 comments:

Post a Comment