Flutter ListView Example using Http


userslist.dart
=============

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import 'dart:async';
import 'dart:convert';

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

class UsersList extends StatefulWidget {
static String tag = 'users-page';

@override
State<StatefulWidget> createState() {
return new _UsersListState();
}
}

class _UsersListState extends State<UsersList> {
@override
Future<List<User>> _getUsers() async {
List<User> users = [];
var response = await http.get('https://api.randomuser.me/?results=20');

var jsonData = JSON.decode(response.body);

var usersData = jsonData["results"];

for (var user in usersData) {
User newUser = User(user["name"]["first"] + user["name"]["last"],
user["email"], user["picture"]["large"], user["phone"]);

users.add(newUser);
}

return users;
}

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Users',
style:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold))),
body: Container(
child: FutureBuilder(
future: _getUsers(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.data == null) {
return Container(
child: Center(
child: Text("Loading..."),
),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
UserDetailPage(snapshot.data[index])));
},
title: Text(snapshot.data[index].fullName),
subtitle: Text(snapshot.data[index].mobileNumber),
leading: CircleAvatar(
backgroundImage:
NetworkImage(snapshot.data[index].imageUrl)),
);
});
}
}),
),
);
}
}

class User {
final String fullName;

final String email;

final String imageUrl;

final String mobileNumber;

User(this.fullName, this.email, this.imageUrl, this.mobileNumber);
}

class UserDetailPage extends StatelessWidget {
final User user;

UserDetailPage(this.user);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(user.fullName),
),
);
}
}


main.dart
==========


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Users',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.lightBlue
),
home: UsersList()

);
}
}

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
'; (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();

Armed Posts

Recent