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:
