【问题标题】:How to add SVGs to AppBar class in Flutter?如何将 SVG 添加到 Flutter 中的 AppBar 类?
【发布时间】:2021-02-04 11:38:18
【问题描述】:

我希望能够在我的 Flutter 应用程序中将 svg 图像添加到 AppBar。我使用了一个名为 flutter_svg 的包将 svg 添加到项目中,但是图像没有出现在项目中。 main中的代码如下:

class FrontpageState extends State<Frontpage> {
//mother widget
  Widget build(BuildContext context) {
    final Widget svgJuro = SvgPicture.asset(juro);
    final Widget svgBanco = SvgPicture.asset(banco, semanticsLabel: 'Banco');
    final Widget svgGoverno =
        SvgPicture.asset(titulos, semanticsLabel: 'Titulos');
    final Widget svgFundos = SvgPicture.asset(fundos, semanticsLabel: 'Fundos');
    final Widget svgQuestao =
        SvgPicture.asset(questao, semanticsLabel: 'Questão');

    return Scaffold(
        appBar: AppBar(
      shadowColor: jBrown100,
      title: Align(
          alignment: Alignment(-0.6, 0),
          child: Text('JURAS?',
              style: GoogleFonts.roboto(
                  color: jBlack100,
                  fontSize: 48,
                  fontWeight: FontWeight.w700,
                  letterSpacing: -2))),
      actions: [
        new IconButton(icon: svgJuro, onPressed: null, color: jPink100)
      ],
    ));
  }

依赖中的代码和一个单独的assets dart文件:

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^1.1.1
  flutter_svg: ^0.19.1

//assets.dart

final String juro = 'imgAsset/juro.svg';
final String banco = 'imgAsset/banco.svg';
final String titulos = 'imgAsset/governo.svg';
final String fundos = 'imgAsset/fundos.svg';
final String questao = 'imgAsset/questao.svg';

我将 SVG 放入动作中,因为我想在未来制作 SVG 动画。我认为我可以实现这一点的唯一方法是通过使用容器的自定义应用栏,这是我正在尝试实现的设计,请给我任何关于使这个设计成为现实的建议:

提前感谢您的帮助。

【问题讨论】:

标签: flutter dart svg


【解决方案1】:

1.启用自定义资产。然后将您的 svg 文件移动到 assets 文件夹。

2.运行以下命令: 使用颤振:

$ flutter pub 添加flutter_svg

3.现在在你的 Dart 代码中,你可以使用:

导入'package:flutter_svg/flutter_svg.dart';

4.这样的代码:

标题:SvgPicture.asset('./assets/traveler.svg'),

【讨论】:

    【解决方案2】:

    只需确保您的图片是 .svg 格式 [使用转换器转换为 .svg 格式]。我在尝试显示 .png 图像时遇到了与上述问题类似的问题。

    【讨论】:

      猜你喜欢
      • 2020-11-23
      • 2018-10-06
      • 1970-01-01
      • 1970-01-01
      • 2019-03-28
      • 2023-03-21
      • 2020-06-26
      • 2020-01-16
      • 2020-03-01
      相关资源
      最近更新 更多