Flutter项目中File无法读取本地SVG文件，但纯Dart项目可正常运行

问题原因 #

纯Dart项目运行时，当前工作目录与文件所在路径匹配，File('world.svg')能直接定位到文件；但Flutter中，lib目录下的文件会被打包为应用asset资源，而非设备文件系统中的独立文件，dart:io的File类只能访问设备本地文件系统，因此无法找到该SVG文件。

解决步骤 #

1. 配置pubspec.yaml声明asset #

在项目根目录的pubspec.yaml中添加asset配置，让Flutter识别该SVG文件：

flutter:
  # 保留原有配置，新增以下内容
  assets:
    - lib/world.svg

2. 使用rootBundle读取asset内容 #

Flutter提供rootBundle（来自flutter/services.dart）加载asset资源，由于加载是异步操作，需结合FutureBuilder处理异步状态：

修改后的main.dart代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  // 异步加载SVG内容
  Future<String> _loadSvg() async {
    return await rootBundle.loadString('lib/world.svg');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppBar(title: Text('Testing')),
      body: FutureBuilder<String>(
        future: _loadSvg(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // 成功加载，可使用snapshot.data获取SVG字符串
            print(snapshot.data);
            return const Center(child: Text('SVG加载成功'));
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          // 加载中状态
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

额外提示 #

如果SVG是用于UI展示，更推荐使用flutter_svg库直接渲染SVG文件，无需手动读取字符串，简化开发流程。

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