资产图像未出现在 flutter 中

Question

我正在使用 dhiwise 将我的 Figma 原型转换为 flutter，但标题没有出现，并且以某种方式位于屏幕上方。我尝试将其移到其他地方，但它只是将其放在标题之外。

return SafeArea(
 child: Scaffold(
 backgroundColor: ColorConstant.whiteA700,
 body: Container(
 height: size.height,
 width: size.width,
 child: Stack(
 children: [
 Align(
 alignment: Alignment.center,
 child: SingleChildScrollView(
 child: Container(
 height: size.height,
 width: size.width,
 child: Stack(
 alignment: Alignment.topRight,
 children: [
 Align(
 alignment: Alignment.center,
 child: Container(
 height: size.height,
 width: size.width,
 decoration: BoxDecoration(
 color: ColorConstant.whiteA700,
 ),
 child: Stack(
 alignment: Alignment.bottomCenter,
 children: [
 Align(
 alignment: Alignment.topCenter,
 child: Container(
 width: size.width,
 padding: getPadding(
 left: 11,
 top: 7,
 right: 11,
 bottom: 7,
 ),
 decoration: BoxDecoration(
 color: ColorConstant.blue200,
 ),
 child: Column(
 mainAxisSize: MainAxisSize.min,
 crossAxisAlignment:
 CrossAxisAlignment.start,
 mainAxisAlignment:
 MainAxisAlignment.start,
 children: [
 CustomIconButton(
 height: 53,
 width: 53,
 margin: getMargin(
 bottom: 276,
 ),
 child: CustomImageView(
 svgPath: ImageConstant.imgUser,

自定义图像视图代码，该代码直接来自网站本身，我不知道任何代码的含义

// ignore_for_file: must_be_immutable

import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class CustomImageView extends StatelessWidget {
  ///[url] is required parameter for fetching network image
  String? url;

  ///[imagePath] is required parameter for showing png,jpg,etc image
  String? imagePath;

  ///[svgPath] is required parameter for showing svg image
  String? svgPath;

  ///[file] is required parameter for fetching image file
  File? file;

  double? height;
  double? width;
  Color? color;
  BoxFit? fit;
  final String placeHolder;
  Alignment? alignment;
  VoidCallback? onTap;
  EdgeInsetsGeometry? margin;
  BorderRadius? radius;
  BoxBorder? border;

  ///a [CustomImageView] it can be used for showing any type of images
  /// it will shows the placeholder image if image is not found on network image
  CustomImageView({
    this.url,
    this.imagePath,
    this.svgPath,
    this.file,
    this.height,
    this.width,
    this.color,
    this.fit,
    this.alignment,
    this.onTap,
    this.radius,
    this.margin,
    this.border,
    this.placeHolder = 'assets/images/image_not_found.png',
  });

  @override
  Widget build(BuildContext context) {
    return alignment != null
        ? Align(
      alignment: alignment!,
      child: _buildWidget(),
    )
        : _buildWidget();
  }

  Widget _buildWidget() {
    return Padding(
      padding: margin ?? EdgeInsets.zero,
      child: InkWell(
        onTap: onTap,
        child: _buildCircleImage(),
      ),
    );
  }

  ///build the image with border radius
  _buildCircleImage() {
    if(radius!=null) {
      return ClipRRect(
        borderRadius: radius,
        child: _buildImageWithBorder(),
      );
    }
    else{
      return _buildImageWithBorder();
    }
  }

  ///build the image with border and border radius style
  _buildImageWithBorder(){
    if(border!=null) {
      return Container(
        decoration: BoxDecoration(
          border: border,
          borderRadius: radius,
        ),
        child: _buildImageView(),
      );
    }else{
      return _buildImageView();
    }
  }

  Widget _buildImageView() {
    if (svgPath != null && svgPath!.isNotEmpty) {
      return Container(
        height: height,
        width: width,
        child: SvgPicture.asset(
          svgPath!,
          height: height,
          width: width,
          fit: fit ?? BoxFit.contain,
          color: color,
        ),
      );
    } else if (file != null && file!.path.isNotEmpty) {
      return Image.file(
        file!,
        height: height,
        width: width,
        fit: fit ?? BoxFit.cover,
        color: color,
      );
    } else if (url != null && url!.isNotEmpty) {
      return CachedNetworkImage(
        height: height,
        width: width,
        fit: fit,
        imageUrl: url!,
        color: color,
        placeholder: (context, url) => Container(
          height: 30,
          width: 30,
          child: LinearProgressIndicator(
            color: Colors.grey.shade200,
            backgroundColor: Colors.grey.shade100,
          ),
        ),
        errorWidget: (context, url, error) => Image.asset(
          placeHolder,
          height: height,
          width: width,
          fit: fit ?? BoxFit.cover,
        ),
      );
    } else if (imagePath != null && imagePath!.isNotEmpty) {
      return Image.asset(
        imagePath!,
        height: height,
        width: width,
        fit: fit ?? BoxFit.cover,
        color: color,
      );
    }
    return SizedBox();
  }
}

Answer 1

1-

flutter clean

2-

flutter pub get

如果这些说明不起作用，我建议您查看下面的链接 在此输入链接描述

Answer 2

如果您已经指定了图片的路径（有时添加新资源需要热重启）

请通过网络打开 svg 图像来检查其是否正常。我之前使用

SvgPicture

使用 svg 时遇到了同样的问题，我可以在网络上打开 svg 文件，但在移动应用程序中无法读取。我记得我的错误是无效的 svg。

This library only supports <defs> and xlink:href references that are defined ahead of their references.

如果这样做，也许你可以尝试这个。

• 将 Figma 中的图像保存为 PNG
• 将图像导入 Adobe XD
• 导出为 SVG。
• 使用此 Adobe XD svg 格式替换当前资源。

Answer 3

我希望您将该图像指定为 pubspec.yaml 中的资产。

我的意思是，Flutter 使用位于项目根目录的 pubspec.yaml 文件来识别应用程序所需的资产。

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

要包含目录下的所有资产，请指定目录名称并以 / 字符结尾：

flutter:
  assets:
    - directory/
    - directory/subdirectory/