flutter天气_Flutter实战（一）写一个天气查询的APP

先上效果图

代码github地址：https://github.com/koudle/GDG_Flutter_Weather_Demo

1.创建工程

在Android Studio中，File -> New ->New Flutter Project -> Flutter Application

创建完工程后，有三个目录

android：Android工程的目录

ios：iOS工程的目录

lib： Flutter工程的目录

其中android、ios下的文件我们都不动，我们只改动lib目录下的dart文件。

2.运行Flutter工程连接手机这里不建议用模拟器，因为模拟器在用GPU渲染时可能会出问题，导致图片渲染不出来。然后按Run 在手机上把程序跑起来。

3.天气API接口申请

注册地址：https://console.qweather.com/#/        (console.heweather.com/register)

注册完后，再看API文档 www.heweather.com/documents

demo这里用的是，获取当天天气情况的API：https://dev.qweather.com/docs/api/weather/

用的请求URL如下:

4.界面编写

在创建的工程里，有个main.dart里面有一段显示界面的代码如下:

其中home 就是要显示的界面，这里我们要把MyHomePage换成我们自己的。

4.1 创建WeatherWidget

通过 new -> Dart File 在lib目录下创建WeatherWidget

创建完后，在main.dart中将home改为WeatherWidget,如下:

4.2 HotReload

在写UI的工程中，我们可以用到Flutter的hot reload的特性,写布局的时候，按ctrl+s或cmd+s就可以在手机上实时看到界面的变化。

这个功能很好用。

4.3添加图片资源

Flutter可以添加不同的资源，例如图片、文本、配置文件、静态数据等。

添加资源时,需要在pubspec.yaml文件中的flutter属性下添加assets,并标明要添加资源的路径，例如，我们要加入指定的图片时，可以这么写：

如果要添加的资源太多，也可以添加文件夹，例如:

在本demo中，要添加一个背景图，我们在工程的根目录下创建images目录，将背景图放在images目录下，然后在pubspec.yaml中添加:

4.4 写WeatherWidget的UI布局

在Scaffold中添加body的属性，来写UI的布局，如下：

按ctrl+s，在手机上就可以看到写好的UI，但这时候的数据是写死的，下来看如何通过http获取数据。

5.通过http获取数据

要通过http数据，我们首先要添加http的依赖库，在pubspec.yaml中的dependencies添加如下:

然后在当前工程目录下运行以下命令行：

或者在Android Stuido 打开pubspec.yaml 文件，点击上面的packages get

这里操作的意义是，拉取http的库。

5.1 创建WeatherData类

通过 new -> Dart File 在lib目录下创建WeatherData

5.2 数据获取

5.3 将之前写死的数据换成WeatherData

至此这款天气查询的APP实现了一个显示城市、温度、天气、湿度的界面，但是这个界面只有一个显示的功能，没有任何可交互的地方，写下篇文章继续完善查询天气的APP的功能。

最后

Android学习是一条漫长的道路。

千里之行始于足下，愿你我共勉。

这里推荐一套很有用的Android架构师进阶学习道路资料：需要的朋友可以长按复制链接到浏览器打开。

https://shimo.im/docs/RYpXQY66dCjdrDrj/

这里是 [ Android开发骆驼 ] 每天分享程序猿/媛趣事，Android学习干货，欢迎关注我~

另外，如果你觉得本文对你有帮助，请来一个免费的赞！(币……不敢想了，卑微.jpg)