Nasa API FLUTTER WITH pub.dev - flutter

Question

| I used to crate an App on flutter wiht the Nasa API but i only get strings back, but i wanna have pictures in my App how do i get picturers from this strings ?
I already tried this but this but i dont finde the point where i coan change the program to give me the coice to macke a foto out of this String
import 'package:flutter/material.dart';
import 'package:nasa_apis/nasa_apis.dart';
import 'package:tuple/tuple.dart';
class ApodScreen extends StatefulWidget {
const ApodScreen({super.key, required this.title});
final String title;
#override
State<ApodScreen> createState() => _ApodScreenState();
}
class _ApodScreenState extends State<ApodScreen> {
static const String _widgetNasaApod = "APOD";
String _selected = _widgetNasaApod;
String _apodTestDescription =
"The request will appear here.";
List<ApodItem> _apodTestResults = <ApodItem>[];
#override
void initState() {
super.initState();
init();
}
void init() async {
await Nasa.init(
logReceiver: (String msg, String name) {
},
apodSupport: true,
apodCacheSupport: true,
apodDefaultCacheExpiration: const Duration(seconds: 20));
}
#override
Widget build(BuildContext context) {
List<Widget> widgets = <Widget>[];
if (_selected == _widgetNasaApod) {
widgets.add(
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextButton(
onPressed: () async {
_apodTestResults.clear();
DateTime date = DateTime.now();
Tuple2<int, ApodItem?> result =
await NasaApod.requestByDate(date);
_apodTestDescription =
"requestByDate()\ndate[${date.toString()}]\nhttp response code: ${result.item1.toString()}";
if (result.item2 != null) {
_apodTestResults.add(result.item2!);
}
setState(() {});
},
child: const Text("Today"),
),
TextButton(
onPressed: () async {
_apodTestResults.clear();
Tuple2<int, List<ApodItem>?> result =
await NasaApod.requestByRandom(5);
_apodTestDescription =
"requestByRandom()\ncount[5]\nhttp response code: ${result.item1.toString()}";
if (result.item2 != null) {
_apodTestResults = result.item2!;
}
setState(() {});
},
child: const Text("Random"),
),
TextButton(
onPressed: () async {
_apodTestResults.clear();
DateTime startDate = DateTime(2022, 10, 1);
DateTime endDate = DateTime(2022, 10, 31);
Tuple2<int, List<MediaType>?> result =
(await NasaApod.requestByRange(startDate, endDate)) as Tuple2<int, List<MediaType>?>;
_apodTestDescription =
"requestByOctober()\n$startDate - $endDate\nhttp response code: ${result.item1.toString()}";
if (result.item2 != null) {
_apodTestResults = result.item2!.cast<ApodItem>();
}
setState(() {});
},
child: const Text("October"),
),
],
),
);
widgets.add(Text(_apodTestDescription));
for (ApodItem apodItem in _apodTestResults) {
widgets.add(
Padding(
padding: const EdgeInsets.all(15),
child: Text(
apodItem.toString(),
),
),
);
}
}
return Scaffold(
appBar: AppBar(
leading: IconButton(
onPressed: (){
Navigator.of(context).pop();
}, icon: const BackButtonIcon(),
),
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: widgets,
),
),
);
}
}

Answer 1

Looking at the NASA API code, you can see the class ApodItem definition (Here).
So in this part of your code :
for (ApodItem apodItem in _apodTestResults) {
widgets.add(
Padding(
padding: const EdgeInsets.all(15),
//Here you create a text widget
child: Text(
apodItem.toString(),
),
),
);
}
replace the Text widget by an Image.network using the getImageUrl method of ApodItem. Like this :
for (ApodItem apodItem in _apodTestResults) {
widgets.add(
Padding(
padding: const EdgeInsets.all(15),
//Here you get the url from you APOD item and create an image widget
child: Image.network(
apodItem.getImageUrl(),
),
),
);
}
getImageUrl will provide you with a url of the image (or of the thumbnail of the video if relevant. And Image.network will build the widget from the said url.