Flutter天气应用教程

Flutter是一个由谷歌开发的UI框架，用于构建美观且高性能的移动应用。以下是一个关于使用Flutter创建天气应用的基本教程。

准备工作

在开始之前，请确保您已安装以下工具：

  • Flutter SDK
  • Dart
  • Android Studio 或 Xcode

创建Flutter项目

  1. 打开命令行工具。
  2. 输入以下命令创建一个新的Flutter项目：
flutter create flutter_weather_app
  1. 进入项目目录：
cd flutter_weather_app

设计UI

以下是创建天气应用UI的步骤：

引入依赖

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

创建UI

打开lib/main.dart文件，并替换以下内容：

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: 'Flutter Weather App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WeatherPage(),
    );
  }
}

class WeatherPage extends StatefulWidget {
  @override
  _WeatherPageState createState() => _WeatherPageState();
}

class _WeatherPageState extends State<WeatherPage> {
  String _city = '';
  String _weatherDescription = '';
  double _temperature = 0.0;

  void _fetchWeather() async {
    final url = 'https://api.openweathermap.org/data/2.5/weather?q=$_city&appid=YOUR_API_KEY&units=metric';
    final response = await http.get(Uri.parse(url));

    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      setState(() {
        _weatherDescription = data['weather'][0]['description'];
        _temperature = data['main']['temp'];
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Weather App'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          TextField(
            decoration: InputDecoration(
              labelText: 'Enter city name',
            ),
            onSubmitted: (value) {
              setState(() {
                _city = value;
              });
              _fetchWeather();
            },
          ),
          SizedBox(height: 20),
          Text(
            'Temperature: $_temperature°C',
            style: TextStyle(fontSize: 24),
          ),
          SizedBox(height: 10),
          Text(
            'Weather: $_weatherDescription',
            style: TextStyle(fontSize: 20),
          ),
        ],
      ),
    );
  }
}
}

添加图片

为了使UI更加美观，我们可以添加一些天气相关的图片。以下是示例代码：

Image.asset('images/sunny.png')

请将图片保存在assets/images/目录下，并确保图片的文件名为sunny.png。

总结

通过以上步骤，您已经创建了一个基本的Flutter天气应用。您可以进一步扩展功能，例如添加城市搜索、实时更新天气等。

查看更多Flutter教程