API Link: https://jsonplaceholder.typicode.com/users
Add http package into pubspec.yaml file:
http: ^0.13.5
File: main.dart
import 'package:flutter/material.dart';
import 'package:flutter_demo/home_page.dart";
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: HomePage(),
),
);
}
}
File: home_page.dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_demo/model.dart';
import 'dart:convert';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
List<UserDetails> userDetails = [];
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: getData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
padding: const EdgeInsets.symmetric(
vertical: 15,
horizontal: 10,
),
itemCount: userDetails.length,
itemBuilder: (context, index) {
return Container(
padding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
margin: const EdgeInsets.only(bottom: 10),
height: 200,
decoration: BoxDecoration(
color: Colors.black12,
borderRadius: BorderRadius.circular(10),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
getText(index, 'ID: ', userDetails[index].id.toString()),
getText(
index, 'Name: ', userDetails[index].name.toString()),
getText(
index, 'Email: ', userDetails[index].email.toString()),
getText(
index, 'Phone: ', userDetails[index].phone.toString()),
getText(index, 'Website:',
userDetails[index].website.toString()),
getText(index, 'Company Name: ',
userDetails[index].company.name.toString()),
getText(index, 'Address: ',
'${userDetails[index].address.suite.toString()}, ${userDetails[index].address.city.toString()} - ${userDetails[index].address.zipcode.toString()}',
],
),
);
},
);
} else {
return const Center(
child: CircularProgressIndicator(),
);
}
},
);
}
Text getText(int index, String fieldName, String content) {
return Text.rich(
TextSpan(
children: [
TextSpan(
text: fieldName,
style: (const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
)),
),
TextSpan(
text: content,
style: (const TextStyle(fontSize: 16)),
),
],
),
);
}
Future<List<UserDetails>> getData() async {
final response = await http.get(
Uri.parse(
'https://jsonplaceholder.typicode.com/users',
),
);
var data = jsonDecode(response.body.toString());
if (response.statusCode == 200) {
for (Map<String, dynamic> index in data) {
userDetails.add(UserDetails.fromJson(index));
}
return userDetails;
} else {
return userDetails;
}
}
}
File: model.dart
// To parse this JSON data, do
//
// final userDetails = userDetailsFromJson(jsonString);
import 'dart:convert';
List<UserDetails> userDetailsFromJson(String str) => List<UserDetails>.from(
json.decode(str).map((x) => UserDetails.fromJson(x)));
String userDetailsToJson(List<UserDetails> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
class UserDetails {
UserDetails({
required this.id,
required this.name,
required this.username,
required this.email,
required this.address,
required this.phone,
required this.website,
required this.company,
});
int id;
String name;
String username;
String email;
Address address;
String phone;
String website;
Company company;
factory UserDetails.fromJson(Map<String, dynamic> json) => UserDetails(
id: json["id"],
name: json["name"],
username: json["username"],
email: json["email"],
address: Address.fromJson(json["address"]),
phone: json["phone"],
website: json["website"],
company: Company.fromJson(json["company"]),
);
Map<String, dynamic> toJson() => {
"id": id,
"name": name,
"username": username,
"email": email,
"address": address.toJson(),
"phone": phone,
"website": website,
"company": company.toJson(),
};
}
class Address {
Address({
required this.street,
required this.suite,
required this.city,
required this.zipcode,
required this.geo,
});
String street;
String suite;
String city;
String zipcode;
Geo geo;
factory Address.fromJson(Map<String, dynamic> json) => Address(
street: json["street"],
suite: json["suite"],
city: json["city"],
zipcode: json["zipcode"],
geo: Geo.fromJson(json["geo"]),
);
Map<String, dynamic> toJson() => {
"street": street,
"suite": suite,
"city": city,
"zipcode": zipcode,
"geo": geo.toJson(),
};
}
class Geo {
Geo({
required this.lat,
required this.lng,
});
String lat;
String lng;
factory Geo.fromJson(Map<String, dynamic> json) => Geo(
lat: json["lat"],
lng: json["lng"],
);
Map<String, dynamic> toJson() => {
"lat": lat,
"lng": lng,
};
}
class Company {
Company({
required this.name,
required this.catchPhrase,
required this.bs,
});
String name;
String catchPhrase;
String bs;
factory Company.fromJson(Map<String, dynamic> json) => Company(
name: json["name"],
catchPhrase: json["catchPhrase"],
bs: json["bs"],
);
Map<String, dynamic> toJson() => {
"name": name,
"catchPhrase": catchPhrase,
"bs": bs,
};
}
Video Link: