如何为Flutter应用在Firebase创建并连接存储？附交互SVG内容存储方案

一、创建并连接 Firebase 存储服务 #

• 1. 在 Firebase 控制台初始化存储
  打开 Firebase 控制台进入你的项目，左侧菜单选择「存储」，点击「开始」，按提示设置存储区域并创建默认存储桶，完成存储服务的创建。

• 2. 添加 Flutter 依赖
  在项目的 pubspec.yaml 中添加以下依赖：

  dependencies:
    firebase_core: ^latest_version
    firebase_storage: ^latest_version
  

  执行 flutter pub get 安装依赖包。

• 3. 初始化 Firebase 并获取存储实例
  在项目入口文件（如 main.dart）中初始化 Firebase 并连接存储：

  import 'package:firebase_core/firebase_core.dart';
  import 'package:firebase_storage/firebase_storage.dart';
  import 'package:flutter/material.dart';
  
  void main() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    // 获取全局存储实例
    final FirebaseStorage storage = FirebaseStorage.instance;
    runApp(const MyApp());
  }
  

二、存储并加载交互 SVG（以美国地图为例） #

1. 规划存储结构 #

在 Firebase 存储桶中创建两个目录，分别存储 SVG 文件和交互映射数据：

• svg_maps/：存放完整的 SVG 地图文件
• map_data/：存放 JSON 格式的交互数据（如州 ID 与名称的映射、路径坐标等）

2. 上传内容到 Firebase 存储 #

• 上传 SVG 文件
  从本地 assets 或文件系统读取 SVG 并上传：

  // 示例：从 assets 读取文件并上传
  final ByteData svgBytes = await rootBundle.load('assets/us_map.svg');
  await storage.ref('svg_maps/us_map.svg').putData(svgBytes.buffer.asUint8List());
  

• 上传交互数据
  将州 ID 与名称的映射以 JSON 字符串形式上传：

  import 'dart:convert';
  
  final Map<String, String> stateMap = {
    'AL': 'Alabama',
    'AK': 'Alaska',
    'AZ': 'Arizona',
    // 补充其他州数据
  };
  final String jsonData = jsonEncode(stateMap);
  await storage.ref('map_data/us_map_states.json').putString(jsonData);
  

3. 加载并使用存储的内容 #

• 加载 SVG 地图
  先添加 flutter_svg 依赖到 pubspec.yaml，然后通过存储的下载 URL 加载 SVG：

  import 'package:flutter_svg/flutter_svg.dart';
  
  // 获取 SVG 下载 URL
  final String svgUrl = await storage.ref('svg_maps/us_map.svg').getDownloadURL();
  
  // 在 Widget 中渲染 SVG 并添加点击监听
  SvgPicture.network(
    svgUrl,
    onTapUp: (TapUpDetails details) {
      handleMapTap(details, stateMap);
    },
  );
  

• 加载交互数据
  下载并解析 JSON 映射数据：

  import 'package:http/http.dart' as http;
  
  final String dataUrl = await storage.ref('map_data/us_map_states.json').getDownloadURL();
  final http.Response response = await http.get(Uri.parse(dataUrl));
  final Map<String, String> stateMap = jsonDecode(response.body);
  

4. 实现 SVG 区域点击交互 #

使用 svg_path_parser 包解析 SVG 中的路径，判断点击位置所属的州：

import 'package:svg_path_parser/svg_path_parser.dart';

void handleMapTap(TapUpDetails details, Map<String, String> stateMap) {
  // 假设你已经获取到每个州的 SVG 路径（可从 SVG 文件中解析或提前存储）
  Map<String, Path> statePaths = {
    'AL': parseSvgPath('M100,200 L300,400...'),
    // 其他州的路径数据
  };

  Offset tapPosition = details.localPosition;
  for (var entry in statePaths.entries) {
    if (entry.value.contains(tapPosition)) {
      String stateName = stateMap[entry.key] ?? 'Unknown';
      // 显示州名称，例如用 SnackBar
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(stateName)),
      );
      break;
    }
  }
}

内容的提问来源于stack exchange，提问作者Nour Mira