我是一个完全的初学者与Flutter,并希望学习如何显示一个简单的SVG图像。
安装flutter_svg:^2.0.7包并将其放入pubspec.yaml文件中。我将SVG放在正确路径下的pubspec.yaml文件中,并将包导入main.dart。
一切正常Container显示在中间,即使我更改它,它也会根据SVG的大小进行缩放,但SVG本身是不可见的。
- 我检查了SVG文件,看看它是否坏了,但它很好。
- 我检查了我是否在代码或pubspec.yaml中写了错误的路径,但它是正确的。
- 我检查了SVG是否具有与容器相同的背景色,但这不是问题所在。
- 我尝试使用我的手机和模拟器来测试代码,以查看问题是否与我正在测试的设备有关,但情况并非如此。
我写了这段代码来测试SVG是否可显示:
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() => runApp(MaterialApp(home: Test()));
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Training with Flutter'),
backgroundColor: Colors.green,
),
body: Center(
child: Container(
color: Color(0xff141414),
child: SvgPicture.asset("assets/images/turquoise_logo.svg",
width: 88, height: 181),
),
));
}
}
字符串
下面是pubspec.yaml文件:
name: training
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 0.0.1+1
environment:
sdk: '>=2.19.4 <4.0.0'
dependencies:
flutter:
sdk: flutter
provider: ^6.0.0
flutter_svg: ^2.0.7
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true
assets:
- assets/images/turquoise_logo.svg
型
2条答案
按热度按时间p3rjfoxz1#
flutter_svg包无法显示某些SVG文件。您可能做的一切都是正确的,但您的SVG文件可能与该插件不兼容。过去我使用了一个名为SVG Cleaner的实用程序来使我的SVG文件兼容。我会尝试用一些简单的SVG文件测试您的代码,以确定您的代码或SVG文件是否有问题。
m3eecexj2#
显然,是缓存问题。我在我的项目的终端运行了“flutter clean”,然后它终于工作了。但在此之前,我更新了整个软件。我不知道这是否是解决方案的一部分,但它在事后奏效了。