Flutter空气质量指数地图应用开发教程

项目简介

这是一个基于Flutter开发的空气质量指数（AQI）地图应用，支持全国主要城市的空气质量实时查询、排行榜展示和个性化设置。应用采用Material Design 3设计风格，提供直观的数据可视化展示。
运行效果图

主要功能

• 🗺️ 空气质量地图展示
• 🔍 城市搜索和筛选
• 📊 AQI等级分类
• 🏆 城市空气质量排行
• 📈 详细污染物数据
• ⚙️ 个性化设置
• 🔔 空气质量提醒

数据模型设计

AQI等级枚举

enum AQILevel {
  excellent('优', Colors.green, 0, 50),
  good('良', Colors.yellow, 51, 100),
  lightPollution('轻度污染', Colors.orange, 101, 150),
  moderatePollution('中度污染', Colors.deepOrange, 151, 200),
  heavyPollution('重度污染', Colors.red, 201, 300),
  severePollution('严重污染', Colors.purple, 301, 500);
}

城市空气质量模型

class CityAQI {
  final String cityName;      // 城市名称
  final String province;       // 省份
  final int aqi;              // 空气质量指数
  final String primaryPollutant; // 主要污染物
  final double pm25;          // PM2.5浓度
  final double pm10;          // PM10浓度
  final double so2;           // 二氧化硫浓度
  final double no2;           // 二氧化氮浓度
  final double co;            // 一氧化碳浓度
  final double o3;            // 臭氧浓度
  final DateTime updateTime;  // 更新时间
  final double latitude;      // 纬度
  final double longitude;     // 经度
}

核心功能实现

1. 空气质量地图展示

使用GridView展示城市空气质量卡片：

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    childAspectRatio: 1.2,
    crossAxisSpacing: 12,
    mainAxisSpacing: 12,
  ),
  itemBuilder: (context, index) {
    final city = _filteredCities[index];
    return Card(
      color: city.level.color.withOpacity(0.1),
      child: Column(
        children: [
          Text(city.cityName),
          Text('${city.aqi}'),
          Text(city.level.label),
        ],
      ),
    );
  },
)

2. 搜索和筛选功能

支持按城市名称、省份搜索，以及按AQI等级筛选：

List<CityAQI> get _filteredCities {
  var cities = _cities;
  
  // 等级筛选
  if (_filterLevel != null) {
    cities = cities.where((c) => c.level == _filterLevel).toList();
  }
  
  // 关键词搜索
  if (_searchQuery.isNotEmpty) {
    cities = cities.where((c) =>
      c.cityName.contains(_searchQuery) ||
      c.province.contains(_searchQuery)
    ).toList();
  }
  
  return cities;
}

3. 详细数据展示

点击城市卡片显示详细污染物数据：

void _showCityDetail(CityAQI city) {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return Container(
        child: Column(
          children: [
            Text('${city.cityName} - ${city.aqi}'),
            _buildPollutantItem('PM2.5', city.pm25, 'μg/m³'),
            _buildPollutantItem('PM10', city.pm10, 'μg/m³'),
            _buildPollutantItem('SO₂', city.so2, 'μg/m³'),
            _buildPollutantItem('NO₂', city.no2, 'μg/m³'),
            _buildPollutantItem('CO', city.co, 'mg/m³'),
            _buildPollutantItem('O₃', city.o3, 'μg/m³'),
          ],
        ),
      );
    },
  );
}

4. 城市排行榜

按AQI值排序展示城市排名：

List<CityAQI> get _sortedCities {
  final cities = List<CityAQI>.from(_cities);
  cities.sort((a, b) {
    return _sortAscending 
      ? a.aqi.compareTo(b.aqi) 
      : b.aqi.compareTo(a.aqi);
  });
  return cities;
}

// 排行榜卡片
ListTile(
  leading: CircleAvatar(
    backgroundColor: rank <= 3 ? Colors.amber : Colors.grey,
    child: Text('$rank'),
  ),
  title: Text(city.cityName),
  trailing: Container(
    decoration: BoxDecoration(
      color: city.level.color,
      borderRadius: BorderRadius.circular(20),
    ),
    child: Text('${city.aqi}'),
  ),
)

UI组件结构

页面布局

应用采用3页NavigationBar结构：

┌─────────────────────────┐
│      地图页面           │
│  - 搜索栏               │
│  - 等级筛选             │
│  - 城市网格卡片          │
│  - 详情弹窗             │
└─────────────────────────┘
┌─────────────────────────┐
│      排行页面           │
│  - 排序切换             │
│  - 城市排行列表          │
│  - 排名标识             │
└─────────────────────────┘
┌─────────────────────────┐
│      设置页面           │
│  - 通知设置             │
│  - 自动刷新             │
│  - AQI等级说明          │
│  - 关于信息             │
└─────────────────────────┘

AQI等级颜色方案

等级	范围	颜色	说明
优	0-50	绿色	空气质量令人满意
良	51-100	黄色	空气质量可接受
轻度污染	101-150	橙色	敏感人群需减少户外活动
中度污染	151-200	深橙色	对健康有影响
重度污染	201-300	红色	对所有人健康有影响
严重污染	301-500	紫色	健康警告

功能扩展建议

1. 实时数据接入

   • 接入环境监测API
   • WebSocket实时推送
   • 数据缓存机制

2. 地图可视化

   • 集成高德/百度地图
   • 热力图展示
   • 地理位置定位

3. 数据分析

   • 历史趋势图表
   • 空气质量预测
   • 污染物来源分析

4. 用户功能

   • 关注城市管理
   • 健康建议推送
   • 分享功能

5. 高级功能

   • 空气质量对比
   • 路线规划建议
   • 户外活动推荐

部署指南

环境要求

• Flutter SDK: 3.0+
• Dart SDK: 3.0+
• 支持平台：Android、iOS、Web、HarmonyOS

运行步骤

1. 克隆项目到本地
2. 安装依赖：flutter pub get
3. 运行应用：flutter run

打包发布

# Android
flutter build apk --release

# iOS
flutter build ios --release

# Web
flutter build web --release

# HarmonyOS
flutter build hap --release

技术要点

状态管理

使用StatefulWidget管理页面状态：

class _MapPageState extends State<MapPage> {
  final List<CityAQI> _cities = [];
  AQILevel? _filterLevel;
  String _searchQuery = '';
  
  @override
  void initState() {
    super.initState();
    _loadCities();
  }
}

数据过滤

实现多条件组合过滤：

List<CityAQI> get _filteredCities {
  return _cities
    .where((c) => _filterLevel == null || c.level == _filterLevel)
    .where((c) => _searchQuery.isEmpty || 
                  c.cityName.contains(_searchQuery))
    .toList();
}

颜色主题

根据AQI等级动态设置颜色：

Card(
  color: city.level.color.withOpacity(0.1),
  child: Container(
    decoration: BoxDecoration(
      color: city.level.color,
      borderRadius: BorderRadius.circular(20),
    ),
  ),
)

日期格式化

自定义日期时间格式化：

String _formatTime(DateTime time) {
  return '${time.year}-${time.month.toString().padLeft(2, '0')}-'
         '${time.day.toString().padLeft(2, '0')} '
         '${time.hour.toString().padLeft(2, '0')}:'
         '${time.minute.toString().padLeft(2, '0')}';
}

项目结构

lib/
└── main.dart              # 主文件（包含所有代码）
    ├── AQILevel          # AQI等级枚举
    ├── CityAQI           # 城市空气质量模型
    ├── MyApp             # 应用入口
    ├── HomePage          # 主页面（NavigationBar）
    ├── MapPage           # 地图页面
    ├── RankingPage       # 排行页面
    └── SettingsPage      # 设置页面

示例数据

应用内置了8个城市的空气质量数据：

城市	AQI	等级	主要污染物
海口	28	优	-
深圳	38	优	-
广州	45	优	-
上海	68	良	PM2.5
杭州	72	良	PM2.5
北京	85	良	PM2.5
成都	112	轻度污染	PM2.5
西安	158	中度污染	PM2.5

污染物说明

• PM2.5：细颗粒物，直径≤2.5微米
• PM10：可吸入颗粒物，直径≤10微米
• SO₂：二氧化硫
• NO₂：二氧化氮
• CO：一氧化碳
• O₃：臭氧

注意事项

1. 数据来源：示例数据为模拟数据，实际应用需接入官方API
2. 更新频率：建议每小时更新一次数据
3. 健康提示：根据AQI等级提供相应的健康建议
4. 定位权限：如需定位功能，需申请位置权限

总结

本教程实现了一个功能完整的空气质量指数地图应用，涵盖了数据展示、搜索筛选、排行榜、详细信息查看等核心功能。通过本项目可以学习到Flutter的网格布局、数据过滤、状态管理、弹窗展示等知识点。应用界面简洁直观，数据可视化效果良好，适合作为环境监测类应用的基础框架。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net