FlutterでAPI呼び出しを実装する方法

Question

フラッターで天気ウィジェットアプリを作成したいのですが、フラッターに限られたコンテンツがあるので、難しいと感じています。だから誰かがコールする方法を知っていれば、あなたの知識を共有してください。

Answer 1

気象ウィジェットを構築する場合は、ほとんどの場合、まだ存在しないが間もなく登場するlocationプラグインがほしいでしょう。

ここに、サンフランシスコの現在の温度を示すコードがあります。

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.'); 
      } 
      } 
     ) 
    ), 
    ); 
    } 
}