Flutter中的SVG不显示

移动开发 2026-07-08

这个问题我已经处理了一段时间了:尽管我在使用flutter_svg包,但我的SVG文件在模拟器中却不会显示。这个SVG只是一个带轮廓的简单水滴图标,我本来是想把它显示在屏幕正中作为测试。但却完全不显示。

同样的情况也出现在其他SVG文件上,而PNG能正常工作。我已在下面附上我的main.dart文件、pubspec.yaml,以及一张截图。

name: fluttertest
description: "A new Flutter project."
publish_to: "none"
version: 1.0.0+1

environment:
  sdk: ^3.12.1

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  flutter_svg: ^2.3.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/tropfen.svg
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

const _dropAsset = 'assets/tropfen.svg';

void main() {
  runApp(const MyApp());
}

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


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(colorScheme: .fromSeed(seedColor: Colors.deepPurple)),
      home: Background(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: Center(
        child: SvgPicture.asset(
          _dropAsset,
          width: 180,
          height: 260,
          fit: BoxFit.contain,
          colorFilter: const ColorFilter.mode(
            Color.fromARGB(255, 255, 255, 255),
            BlendMode.srcIn,
          ),
          semanticsLabel: 'Tropfen',
        ),
      ),
    );
  }
}

该SVG

解决方案

使用SVG转换器。去Google搜索“SVG to SVG converter”来转换文件,然后在Flutter中使用该SVG。

https://cloudconvert.com/svg-converter

站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章