110、Flutter实现调用API接口查询天气

1、项目的结构如下图所示:

main.dart 为Flutter项目的入口

 

2、main.dart 文件

一部分指定整个项目的背景是黑色的

一部分表示整个程序的入口home:LoadingScreen()

import 'package:flutter/material.dart';
import 'package:clima/screens/loading_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: LoadingScreen(),
    );
  }
}

 

 

3、Screen文件夹下面的loading_screen.dart文件

 

这个类继承了StatefulWidget是有状态的组件

在组件的初始化方法initState()中调用后台的GPS获取位置的HTTP api接口，得到当前的位置信息，东经，和西经

然后在getLocationData()方法中使用 

Navigator.push(context, MaterialPageRoute(builder: (context) {
      return LocationScreen(
        locationWeather: weatherData,
      );
    }));

进行跳转，将请求跳转到其他节目进行前端样式的展现

import 'package:flutter/material.dart';
import 'package:clima/services/location.dart';
import 'package:clima/services/networking.dart';
import 'location_screen.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';


const apiKey = 'e72ca729af228beabd5d20e3b7749713';

class LoadingScreen extends StatefulWidget {
  LoadingScreen({this.locationWeather});

  final locationWeather;

  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> {

  double temperature;
  String cityName;

  double latitude;
  double longitude;

  void updateUI(dynamic weatherData) {
    if(weatherData!=null){
      if(weatherData['resultcode']==200){
        temperature = weatherData['main']['temp'];
        cityName = weatherData['name'];
        print(temperature);
      }
    }
  }

  @override
  void initState() {
    super.initState();
    getLocationData();
    //updateUI(widget.locationWeather);

  }

  void getLocationData() async {
    Location location = Location();
    await location.getCurrentLocation();
    NetworkHelper networkHelper = NetworkHelper(
        'http://v.juhe.cn/weather/geo?format=2&key=0ca92484d26657567ffaf07472e1d075&dtype=json&lat=${location.latitude}&lon=${location.longitude}');
    var weatherData = await networkHelper.getData();
    Navigator.push(context, MaterialPageRoute(builder: (context) {
      return LocationScreen(
        locationWeather: weatherData,
      );
    }));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SpinKitDoubleBounce(
          color: Colors.white,
          size: 100.0,
        ),
      ),
    );
  }
}

 

 

4、location_screen.dart 文件

对于后端传入的位置和天气信息进行逻辑的判断和展现

import 'package:flutter/material.dart';
import 'package:clima/utilities/constants.dart';
import 'package:clima/services/weather.dart';

class LocationScreen extends StatefulWidget {

  LocationScreen({this.locationWeather});

  final locationWeather;

  @override
  _LocationScreenState createState() => _LocationScreenState();
}

class _LocationScreenState extends State<LocationScreen> {
  WeatherModel weather = WeatherModel();
  String temperature;
  int condition;
  String cityName;
  String weatherIcon;
  String weatherMessage;
  
  @override
  void initState() {
    super.initState();
    updateUI(widget.locationWeather);
  }

  void updateUI(dynamic weatherData){
    setState(() {
      var result = weatherData['result'];
      var sk = result['sk'];
      var today = result['today'];
      temperature = sk['temp'];
      cityName = weatherData['result']['today']['city'];
      String condition = today['weather'];
      weatherIcon = weather.getWeatherIcon(condition);
      weatherMessage = weather.getMessage(int.parse(temperature));
      print(temperature);
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/location_background.jpg'),
            fit: BoxFit.cover,
            colorFilter: ColorFilter.mode(
                Colors.white.withOpacity(0.8), BlendMode.dstATop),
          ),
        ),
        constraints: BoxConstraints.expand(),
        child: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  FlatButton(
                    onPressed: () {},
                    child: Icon(
                      Icons.near_me,
                      size: 50.0,
                    ),
                  ),
                  FlatButton(
                    onPressed: () {},
                    child: Icon(
                      Icons.location_city,
                      size: 50.0,
                    ),
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(left: 15.0),
                child: Row(
                  children: <Widget>[
                    Text(
                      '$temperature°',
                      style: kTempTextStyle,
                    ),
                    Text(
                      weatherIcon,
                      style: kConditionTextStyle,
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(right: 15.0),
                child: Text(
                  '$weatherMessage in $cityName',
                  textAlign: TextAlign.right,
                  style: kMessageTextStyle,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

5、整个效果如下图所示