Summary - Weather app

Combine all parts and finish a working weather app.

Combining all parts

A working weather app combines three parts: it sends a request to the API with http.get, turns the response into a model with jsonDecode and fromJson, and shows loading/error/data states with FutureBuilder. Each part has its own responsibility.

Future<Weather> havaGetir() async {
  final response = await http.get(Uri.parse(url));
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

FutureBuilder<Weather>(
  future: havaGetir(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return const Text('Hata');
    }
    return Text(snapshot.data!.sehir);
  },
)

Exercise The havaGetir function

Write an async function named havaGetir: send a request to Uri.parse(url) with http.get, decode response.body into a Map with jsonDecode, and return a model built with Weather.fromJson. In main, print the url.

Show example solution

import 'dart:convert';
import 'package:http/http.dart' as http;

class Weather {
  final String sehir;
  final double sicaklik;

  Weather(this.sehir, this.sicaklik);

  factory Weather.fromJson(Map<String, dynamic> json) {
    return Weather(
      json['sehir'] as String,
      (json['sicaklik'] as num).toDouble(),
    );
  }
}

const url = 'https://api.example.com/hava/istanbul';

Future<Weather> havaGetir() async {
  final response = await http.get(Uri.parse(url));
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

void main() {
  print(url);
}

Test yourself

In what order does data flow in the weather app?
- jsonDecode → http.get → FutureBuilder → fromJson
- http.get → jsonDecode → fromJson → FutureBuilder
- fromJson → FutureBuilder → http.get → jsonDecode
- FutureBuilder → fromJson → jsonDecode → http.get
Show answer

http.get → jsonDecode → fromJson → FutureBuilder — First a request is sent with http.get, the response is decoded into a Map with jsonDecode, then into a model with fromJson, and finally FutureBuilder displays it. The other orders are illogical.

Send the request and convert to a model

Future<Weather> havaGetir() async {
  final response = await ____;
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

Show answer

Future<Weather> havaGetir() async {
  final response = await http.get(Uri.parse(url));
  final json = jsonDecode(response.body) as Map<String, dynamic>;
  return Weather.fromJson(json);
}

Summary parts

http.get

Network request
jsonDecode

String to object conversion
Weather.fromJson

Type-safe object
FutureBuilder

Async UI management

Next lesson: What is GoRouter?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies