Flutter实战1 --- 写一个天气查询的APP
写一个查询天气的demo。
代码github地址:github.com/koudle/GDG_…
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接口申请
注册地址console.heweather.com/register
注册完后,再看API文档 www.heweather.com/documents
demo这里用的是,获取当天天气情况的API:www.heweather.com/documents/a…
用的请求URL如下:
https://free-api.heweather.com/s6/weather/now?location=广州&key=******
复制代码
4.界面编写
在创建的工程里,有个main.dart
里面有一段显示界面的代码如下:
class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(// This is the theme of your application.//// Try running your application with "flutter run". You'll see the// application has a blue toolbar. Then, without quitting the app, try// changing the primarySwatch below to Colors.green and then invoke// "hot reload" (press "r" in the console where you ran "flutter run",// or press Run > Flutter Hot Reload in a Flutter IDE). Notice that the// counter didn't reset back to zero; the application is not restarted.primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);}
}
复制代码
其中home
就是要显示的界面,这里我们要把MyHomePage
换成我们自己的。
4.1 创建WeatherWidget
通过 new
-> Dart File
在lib目录下创建WeatherWidget
class WeatherWidget extends StatefulWidget{@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn new WeatherState();}
}class WeatherState extends State<WeatherWidget>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold();}
}
复制代码
创建完后,在main.dart
中将home
改为WeatherWidget
,如下:
class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: WeatherWidget(),);}
复制代码
4.2 HotReload
在写UI的工程中,我们可以用到Flutter的hot reload的特性,写布局的时候,按ctrl+s
或cmd+s
就可以在手机上实时看到界面的变化。
这个功能很好用。
4.3添加图片资源
Flutter可以添加不同的资源,例如图片、文本、配置文件、静态数据等。
添加资源时,需要在pubspec.yaml
文件中的flutter
属性下添加assets
,并标明要添加资源的路径,例如,我们要加入指定的图片时,可以这么写:
flutter:
assets:
- assets/my_icon.png
- assets/background.png
复制代码
如果要添加的资源太多,也可以添加文件夹,例如:
flutter:
assets:
- assets/
复制代码
在本demo中,要添加一个背景图,我们在工程的根目录下创建images
目录,将背景图放在images
目录下,然后在pubspec.yaml
中添加:
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.
uses-material-design: true
assets:
- images/
复制代码
4.4 写WeatherWidget的UI布局
在Scaffold
中添加body
的属性,来写UI的布局,如下:
class WeatherState extends State<WeatherWidget>{@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(body: new Stack(fit: StackFit.expand,children: <Widget>[new Image.asset("images/weather_bg.jpg",fit: BoxFit.fitHeight,),new Column(mainAxisAlignment: MainAxisAlignment.start,crossAxisAlignment: CrossAxisAlignment.center,children: <Widget>[new Container(width: double.infinity,margin: EdgeInsets.only(top: 40.0),child: new Text("广州市",textAlign: TextAlign.center,style: new TextStyle(color: Colors.white,fontSize: 30.0,),),),new Container(width: double.infinity,margin: EdgeInsets.only(top: 100.0),child: new Column(children: <Widget>[new Text("20 °",style: new TextStyle(color: Colors.white,fontSize: 80.0)),new Text("晴",style: new TextStyle(color: Colors.white,fontSize: 45.0)),new Text("湿度 80%",style: new TextStyle(color: Colors.white,fontSize: 30.0),)],),)],)],),);}}
复制代码
按ctrl+s
,在手机上就可以看到写好的UI,但这时候的数据是写死的,下来看如何通过http获取数据。
5.通过http获取数据
要通过http数据,我们首先要添加http的依赖库,在pubspec.yaml
中的dependencies
添加如下:
dependencies:
flutter:
sdk: flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^0.1.2
http: ^0.12.0
复制代码
然后在当前工程目录下运行以下命令行:
$ flutter packages get
复制代码
或者在Android Stuido 打开pubspec.yaml
文件,点击上面的packages get
这里操作的意义是,拉取http的库。
5.1 创建WeatherData类
通过 new
-> Dart File
在lib目录下创建WeatherData
class WeatherData{String cond; //天气String tmp; //温度String hum; //湿度WeatherData({this.cond, this.tmp, this.hum});factory WeatherData.fromJson(Map<String, dynamic> json) {return WeatherData(cond: json['HeWeather6'][0]['now']['cond_txt'],tmp: json['HeWeather6'][0]['now']['tmp']+"°",hum: "湿度 "+json['HeWeather6'][0]['now']['hum']+"%",);}factory WeatherData.empty() {return WeatherData(cond: "",tmp: "",hum: "",);}
}
复制代码
5.2 数据获取
class WeatherState extends State<WeatherWidget>{WeatherData weather = WeatherData.empty();WeatherState(){_getWeather();}void _getWeather() async{WeatherData data = await _fetchWeather();setState((){weather = data;});}Future<WeatherData> _fetchWeather() async{final response = await http.get('https://free-api.heweather.com/s6/weather/now?location=广州&key=ebb698e9bb6844199e6fd23cbb9a77c5');if(response.statusCode == 200){return WeatherData.fromJson(json.decode(response.body));}else{return WeatherData.empty();}}@overrideWidget build(BuildContext context) {...}
}
复制代码
5.3 将之前写死的数据换成WeatherData
... child: new Column(children: <Widget>[new Text(weather?.tmp,style: new TextStyle(color: Colors.white,fontSize: 80.0)),new Text(weather?.cond,style: new TextStyle(color: Colors.white,fontSize: 45.0)),new Text(weather?.hum,style: new TextStyle(color: Colors.white,fontSize: 30.0),)],),...
复制代码
6.运行界面
Flutter实战1 --- 写一个天气查询的APP相关推荐
- Flutter实战(一)写一个天气查询的APP
先上效果图: 代码github地址:github.com/koudle/GDG_- 1.创建工程 在Android Studio中,File -> New ->New Flutter Pr ...
- 用jaxa写一个快递查询
用jaxa写一个快递查询 jquery-3.3.1.js <!DOCTYPE html><html lang="en"> <head> < ...
- thinkphp 助手函数url不生成https_如何用ThinkPHP框架写一个快递查询接口
ThinkPHP是php程序员们经常使用的框架之一,运用框架来开发网站无疑减轻了我们代码量,加快了我们的开发速度,框架底层封装的方法和函数使用起来简直不能太爽.今天给大家总结一个小案例,如何实现一个快 ...
- uni-app微信小程序,写一个级联查询
//用picker这个标签,mode="multiSelector" <view class="common room-expense"><v ...
- python天气预报界面_Python开发,用GUI编写一个天气查询桌软件
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,如有问题请及时联系我们以作处理. 以下文章来源于快学Python ,作者叶庭云 刚接触Python的新手.小白,可以复制下面的链接去 ...
- 如何使用Flutter+SpringBoot+Mysql开发一个简易的抽奖APP(Android)教学
如果你需要项目资源,欢迎来到我的个人博客:https://brath.top/2023/02/24/%E3%80%90Flutter&SpringBoot%E3%80%91%E5%A6%82% ...
- android 登录界面开源代码_【程序源代码】一个安卓查询类app制作的开源项目
" 关键字:工作流 框架 springboot" 正文:一个学习安卓查询类app制作的开源项目.可以用来联系查询类app的编写. 01 - android studio最近势头好猛 ...
- 【程序源代码】一个安卓查询类app制作的开源项目
" 关键字:工作流 框架 springboot" 正文:一个学习安卓查询类app制作的开源项目.可以用来联系查询类app的编写. 01 - android studio最近势头好猛 ...
- 一步一步教你写一个快递查询APP(适合新手)
前言: 水平:自学Android十五天,以前有过混日子的编程经验. 目标: <第一行代码>学完之后,总想写个APP,天气的APP写了个初版,后面再说,今天演示的是制作快递查询APP的整个经 ...
- 【Flutter】如何写一个Flutter自动打包成iOS代码模块的脚本
相信很多使用原生+Flutter的iOS项目都会遇到混合开发的集成问题,也有大神写了一些解决方案,下面就记录一下我的心路历程: 前期准备 开始之前,我先拜读了一些大神的文章(这里只挑出对我帮助最大的) ...
最新文章
- AlexeyAB DarkNet YOLOv3框架解析与应用实践(二)
- 让机器“看见”:图像数据的特征提取方法
- Java基础-JAVA中常见的数据结构介绍
- 二维数组 \n是换行 三目运算符 if语句示例
- 读取SSDT表和原函数地址
- 20172325 2018-2019-1 《Java程序设计》第二周学习总结
- est.java 2 错误 找不到符号_找不到Cython/Python符号PyString\u Typ
- Android 为应用添加默认加载页
- 置顶图片代码加链接html,css图片怎么加链接?
- 数据分析应用统计学之分散性与变异性的测量【极差、四分位差、偏态系数、峰态系数、统计指标】
- 关于Mybatis的xml配置文件中使用and与or混合查询
- Java 反射常用方法
- 商业创业计划书的21条重要事项
- 【ML】机器学习(西瓜书)思维导图
- 分数混合运算简便方法_分数混合运算和简便算法
- 2023年最新谷歌Google帐号Gmail邮箱账号怎么注册成功的方法与教程?
- 天池比赛-02-用Apriori算法进行商品关联分析
- Javascript笔记大全01,会持续更新~
- 思科ASA防火墙:内网telnet远程控制防火墙 外网ssh远程控制防火墙
- MTK平台点亮sensor以及mtk开机初始化
热门文章
- Atitit 教育学体系 教育学主要内容多语言,教学论,心理学,体育 高等教育学 职业技术教育学 教育史
- Atitit 性能指标与性能提升的5个原则与性能提升模型
- Atitit usbQb212 oo 面向对象封装的标准化与规范解决方案java c# php js
- Atitit.你这些项目不都是模板吗?不是原创 集成和整合的方式大总结
- atitit.提升研发效率的利器---重型框架与类库的区别与设计原则
- Atitit.故障排除系列---NoClassDefFoundError NoClassDefFoundError
- Atitit..组件化事件化的编程模型--(2)---------Web datagridview 服务器端控件的实现原理and总结
- paip.c++ qt __gxx_personality_sj0 __gxx_personality_v0问题的解决
- (转)300家平台倒闭,BAT纷纷离场,到底什么模式已经全军覆没?
- (转)Rust:Ownership,Reference和Lifetime详解