赋能移动世界：使用Flutter打造自己的天气查询应用

2023-10-09 07:07:00

前言

Flutter，谷歌开发的跨平台框架，以其出色的性能和灵活的架构而闻名。它使开发人员能够使用单个代码库构建适用于Android和iOS的原生应用。本教程将深入探讨如何利用Flutter构建一个功能齐全的天气查询应用。

初探Flutter

Flutter的核心在于它的“声明式UI”模型。这意味着您可以通过其外观和行为来定义UI，而不是像在传统开发中那样使用命令式方法。Flutter使用Dart语言，一种现代且易于学习的面向对象的语言。

创建新项目

首先，使用Flutter命令行工具(CLI)创建一个新项目：

flutter create weather_app

导航到新创建的目录并运行以下命令来启动项目：

flutter run

这将在您的设备上启动一个带有默认UI的模拟器。

构建UI

天气查询应用的核心是用户界面(UI)。让我们使用Flutter的小部件和布局系统来创建直观且响应迅速的UI。

首先，打开 lib/main.dart 文件并替换现有代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Weather App'),
        ),
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

这个代码创建了一个包含应用程序栏、正文和标题的简单UI。

集成天气数据

接下来，让我们集成天气数据以显示当前的天气信息。为此，我们将使用免费的天气API，例如OpenWeatherMap。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Weather App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Weather App'),
        ),
        body: Weather(),
      ),
    );
  }
}

class Weather extends StatefulWidget {
  @override
  _WeatherState createState() => _WeatherState();
}

class _WeatherState extends State<Weather> {
  Map data;

  @override
  void initState() {
    super.initState();
    getWeather();
  }

  void getWeather() async {
    // API key 和城市 ID 因示例而异
    String apiKey = 'YOUR_API_KEY';
    String cityId = 'YOUR_CITY_ID';
    var url = 'https://api.openweathermap.org/data/2.5/weather?id=$cityId&appid=$apiKey';

    var response = await http.get(Uri.parse(url));
    if (response.statusCode == 200) {
      setState(() {
        data = jsonDecode(response.body);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (data == null) {
      return Center(
        child: CircularProgressIndicator(),
      );
    } else {
      return Container(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Text('${data['name']}, ${data['sys']['country']}'),
            Text('${data['main']['temp']} °C'),
            Text('${data['weather'][0]['description']}'),
          ],
        ),
      );
    }
  }
}