Lista med personer

Skapa en model-class för en person:

class User {
  String firstName;
  String lastName;
  String email;
  String phone;
  String city;
  String country;
  String thumbnail;

  User({this.firstName, this.lastName, this.email, this.phone, this.city, this.country, this.thumbnail});

  factory User.fromJson(Map<String, dynamic> parseJson) {
    return User(
      firstName: parseJson['name']['first'],
      lastName: parseJson['name']['last'],
      email: parseJson['email'],
      phone: parseJson['cell'],
      city: parseJson['location']['city'],
      country: parseJson['location']['state'],
      thumbnail: parseJson['picture']['thumbnail']
    );
  }
}

Vi behöver variablen _users för att lagra listan med personer och _isLoading som visar att vi håller på att hämta personer.

List<User> _users;
bool _isLoading = false;

Hämta biblioteket http för att gör http anrop. Aktuell version hittar du här https://pub.dev/packages/http#-installing-tab-

dependencies:
  http: ^0.12.0+2

Importera dart:convert och http:

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

Skapa en funktion fetchRandomUsers som gör ett https-anrop för att hämta användarna.

void fetchRandomUsers() async {
    setState(() {
      _isLoading = true;
    });
    final response = await http.get('https://randomuser.me/api/?results=20');

    final res = json.decode(response.body);

    if(response.statusCode >= 200 && response.statusCode < 300) {

      List<User> _u = List<User>();
      for(var user in res['results']) {
        _u.add(User.fromJson(user));
      }

      setState(() {
        _users = _u;
        _isLoading = false;
      });
    }
}

Skapa en funktion _displayUser som innehåller användargränssnittskoden för att visa en person.

_displayUser(User user) {
    return Container(
      child: ListTile(
        leading: CircleAvatar(
          backgroundImage: NetworkImage(user.thumbnail),
        ),
        title: Text('${user.firstName} ${user.lastName}'),
        subtitle: Text('${user.city}, ${user.country}'),
        trailing: Icon(Icons.more_vert),
      ),
    );
}

Visa personerna i en ListView genom att loopa igenom alla som finns i _users.

child: (_isLoading) ? CircularProgressIndicator() : ListView.separated(
    itemCount: _users.length,
    itemBuilder: (BuildContext context, int index) {
    	return _displayUser(_users[index]);
    },
    separatorBuilder: (BuildContext context, int index) => const Divider(height: 0),
),

Resultat ser ut så här:

Lämna ett svar

Stäng meny