Flutter中的SVG不显示
这个问题我已经处理了一段时间了:尽管我在使用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转换器。去Google搜索“SVG to SVG converter”来转换文件,然后在Flutter中使用该SVG。
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。