Nasa API FLUTTER WITH pub.dev

Question

I used to crate an App on flutter with the Nasa API but I only get strings back, but I want to have pictures in my App. How do I get pictures from this strings?

I already tried this but this but I don't find the point where I can change the program to give me the choice to make a photo 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.