_TypeError (type 'Null' is not a subtype of type 'String') – error happening in flutter

Issue

I am trying to connect an API to my application and have come across the error: _TypeError (type ‘Null’ is not a subtype of type ‘String’)

The error occurs on the line: title: Text(snapshot.data?[i].hourly),

I thought that I had implemented null safety to avoid this error but it doesn’t seem to have worked. I would appreciate any help!

import 'dart:convert';

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

void main() => runApp(MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    ));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Future getUserData() async {
    var response = await http.get(Uri.parse(
         'https://api.open-meteo.com/v1/forecast?  latitude=52.52&longitude=13.41&hourly=temperature_2m'));

var jsonData = jsonDecode(response.body);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rangers Tool'),
      ),
      body: Center(
          child: Card(
              child: FutureBuilder(
        future: getUserData(),
        builder: (context, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) {
            return ListView.builder(
                itemCount: snapshot.data?.length,
                itemBuilder: (context, i) {
                  return ListTile(
                    title: Text(snapshot.data?[i].hourly),
                    subtitle: Text(snapshot.data[i]?.latitude),
                  );
                });
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ))),
    );
   }
}

getUserData() {}

class User {
  final String? hourly,
      time,
      temperature_2m,
      longitude,
      generationtime_m,
      hourly_units,
      latitude;

  User(this.longitude, this.latitude, this.hourly, this.time,
      this.temperature_2m, this.generationtime_m, this.hourly_units);
}

Solution

According to the api response (response data link), your response data is not an array of json but you are trying to render the json object as array and also trying to parse the json field as wrong way thats why the error occurred.

You can follow the bellow code spinet and can see that how I can parse the json then can modify based on your requirement.

import 'dart:convert';

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

void main() => runApp(
      MaterialApp(
        home: HomePage(),
        debugShowCheckedModeBanner: false,
      ),
    );

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Future<dynamic> getUserData() async {
    var response = await http.get(Uri.parse(
        'https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41&hourly=temperature_2m'));

    var jsonData = jsonDecode(response.body);
    return jsonData;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Rangers Tool'),
      ),
      body: Center(
        child: Card(
          child: FutureBuilder(
            future: getUserData(),
            builder: (context, AsyncSnapshot snapshot) {
              if (snapshot.hasData) {
                var hourly = snapshot.data['hourly'];

                return ListTile(
                  title: Text(
                    "time: ${hourly['time'][0]} - temperature_2m: ${hourly['temperature_2m'][0]}",
                  ),
                  subtitle: Text(
                    "latitude: ${snapshot.data['latitude']}",
                  ),
                );
              } else {
                return const Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          ),
        ),
      ),
    );
  }
}

getUserData() {}

class User {
  final String? hourly,
      time,
      temperature_2m,
      longitude,
      generationtime_m,
      hourly_units,
      latitude;

  User(this.longitude, this.latitude, this.hourly, this.time,
      this.temperature_2m, this.generationtime_m, this.hourly_units);
}

Answered By – Zakaria Hossain

Answer Checked By – Willingham (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.