Flutter实战1 --- 写一个天气查询的APP

栏目: IOS · Android · 发布时间: 5年前

内容简介:在Android Studio中,创建完工程后,有三个目录

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

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

android :Android工程的目录

ios :iOS工程的目录

lib : Flutter工程的目录

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

2.运行Flutter工程

  1. 连接手机
  • 这里不建议用模拟器,因为模拟器在用GPU渲染时可能会出问题,导致图片渲染不出来。
  1. 然后按 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.
  @override
  Widget 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{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new WeatherState();
  }
}

class WeatherState extends State<WeatherWidget>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
    );
  }            
}
复制代码

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WeatherWidget(),
    );
  }
复制代码

4.2 HotReload

在写UI的工程中,我们可以用到Flutter的hot reload的特性,写布局的时候,按 ctrl+scmd+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>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return 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();
    }
  }



  @override
  Widget 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
                      ),
                    )
                  ],
                ),
                ...
复制代码

以上所述就是小编给大家介绍的《Flutter实战1 --- 写一个天气查询的APP》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

白话机器学习算法

白话机器学习算法

[新加坡] 黄莉婷、[新加坡] 苏川集 / 武传海 / 人民邮电出版社 / 2019-2 / 49.00元

与使用数学语言或计算机编程语言讲解算法的书不同,本书另辟蹊径,用通俗易懂的人类语言以及大量有趣的示例和插图讲解10多种前沿的机器学习算法。内容涵盖k均值聚类、主成分分析、关联规则、社会网络分析等无监督学习算法,以及回归分析、k最近邻、支持向量机、决策树、随机森林、神经网络等监督学习算法,并概述强化学习算法的思想。任何对机器学习和数据科学怀有好奇心的人都可以通过本书构建知识体系。一起来看看 《白话机器学习算法》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具