Wie implementieren Sie API-Aufrufe in Flutter?

Question

Ich möchte eine Wetter Widget App durch Flattern erstellen, aber ich finde es schwierig, dies zu tun, da es nur wenig flatternde Inhalte gibt. Also, wenn jemand weiß, wie man anruft, teile dein Wissen.

Answer 1

Wenn Sie ein Wetter-Widget erstellen, werden Sie mit Sicherheit ein location Plugin haben, das noch nicht existiert, aber bald kommt.

Hier ist ein Code, der die aktuelle Temperatur in San Francisco zeigt.

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

void main() { 
    runApp(new MaterialApp(
    home: new MyHomePage(), 
)); 
} 

class Weather extends StatelessWidget { 
    final Map<String, dynamic> data; 
    Weather(this.data); 
    Widget build(BuildContext context) { 
    double temp = data['main']['temp']; 
    return new Text(
     '${temp.toStringAsFixed(1)} °C', 
     style: Theme.of(context).textTheme.display4, 
    ); 
    } 
} 

class MyHomePage extends StatefulWidget { 
    MyHomePageState createState() => new MyHomePageState(); 
} 

class MyHomePageState extends State<MyHomePage> { 
    Future<http.Response> _response; 

    void initState() { 
    super.initState(); 
    _refresh(); 
    } 

    void _refresh() { 
    setState(() { 
     _response = http.get(
     'http://api.openweathermap.org/data/2.5/forecast' 
      '?q=San+Francisco&units=metric&APPID=14cc828bff4e71286219858975c3e89a' 
    ); 
    }); 
    } 

    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text("Weather Example"), 
    ), 
     floatingActionButton: new FloatingActionButton(
     child: new Icon(Icons.refresh), 
     onPressed: _refresh, 
    ), 
     body: new Center(
     child: new FutureBuilder(
      future: _response, 
      builder: (BuildContext context, AsyncSnapshot<http.Response> response) { 
      if (!response.hasData) 
       return new Text('Loading...'); 
      else if (response.data.statusCode != 200) { 
       return new Text('Could not connect to weather service.'); 
      } else { 
       Map<String, dynamic> json = JSON.decode(response.data.body); 
       if (json['cod'] == 200) 
       return new Weather(json); 
       else 
       return new Text('Weather service error: $json.'); 
      } 
      } 
     ) 
    ), 
    ); 
    } 
}