Flutter - Pass variable to another screen for URL GET JSON - json

Question

I'm new to Flutter. On my HOME screen I have a ListView with fetched Json. I want to pass JSON variable ex:id on Tap to the next screen/class 'contantPage' to show another Json loaded from URL with id added.
ex.https:/example.com/myjson.php?id=1
Please! Show me the way.
main.dart
onTap: () {
Navigator.push(context,MaterialPageRoute(
builder(context)=>ContentPage(
photo: photos[index]
)),);},
And in my ContentPage.dart should add id value to URL as GET ex:?id=1
Future<Album> fetchAlbum() async {
// final query1 = Text(photo.publishDate);
final response = await http
.get(Uri.parse('https://jsonplaceholder.typicode.com/albums.php?id=I WANT ID HERE'));
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then parse the JSON.
return Album.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
}
class Album {
final int userId;
final int id;
final String title;
Album({
required this.userId,
required this.id,
required this.title,
});
factory Album.fromJson(Map<String, dynamic> json) {
return Album(
userId: json['userId'],
id: json['id'],
title: json['title'],
);
}
}
//void main() => runApp(MyApp());
class ContentPage extends StatefulWidget {
// ContentPage({Key? key, Photo photo}) : super(key: key);
ContentPage({Key? key, required Photo photo}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<ContentPage> {
late Future<Album> futureAlbum;
#override
void initState() {
super.initState();
futureAlbum = fetchAlbum();
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
),
body: Center(
child: FutureBuilder<Album>(
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data!.title);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return CircularProgressIndicator();
},
),
),
),
);
}
}

Answer 1

Like the photo pass your photosid as follows:
onTap: () {
Navigator.push(context,MaterialPageRoute(
builder(context)=>ContentPage(
photo: photos[index],
id:photos[index].id,
)),);},
And then in ContentPage create constructor as follows:
class ContentPage extends StatefulWidget {
Photo photo;
String id;
ContentPage({Key? key, required this.photo,required this.id,}) : super(key: key);
#override
_MyAppState createState() => _MyAppState();
}
In initstate pass your id as follows:
#override
void initState() {
super.initState();
futureAlbum = fetchAlbum(widget.id);
}
And finally your fetchAlbum as follows:
Future<Album> fetchAlbum(var id) async {
// final query1 = Text(photo.publishDate);
final response = await http
.get(Uri.parse('https://jsonplaceholder.typicode.com/albums.php?id=id'));
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then parse the JSON.
return Album.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
}

Answer 2

I can't understand how to display more than 1 field with my code. I have title field and contentIntro field from Json and want to show all together.
body: Center(
child: FutureBuilder<Album>(
future: futureAlbum,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Center(
child: Text(snapshot.data!.contentIntro),
//child: Text(snapshot.data!.Title),
);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return CircularProgressIndicator();
},
),
),