Flutter学习之图片显示

最新推荐文章于 2024-05-28 17:24:10 发布

Pillar~

最新推荐文章于 2024-05-28 17:24:10 发布

阅读量805

点赞数

分类专栏： Flutter 文章标签： Flutter

本文链接：https://blog.csdn.net/Pillar1066527881/article/details/88827240

版权

Flutter 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

本文介绍了一个简单的Flutter应用，展示了如何在应用中加载不同来源的图片，包括本地资源和网络图片，并提供了一段完整的main.dart代码示例。同时，文章还提到了在配置文件pubspec.yaml中正确设置assets路径的重要性。

摘要由CSDN通过智能技术生成

1、显示效果：
在这里插入图片描述

2、代码：main.dart

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new ListView(
          children: <Widget>[
            new Image.asset('assets/images/ic_phone.png',
                width: 40.0, height: 40.0),
            new Divider(),
            new Image(image: new AssetImage('assets/images/ic_phone.png')),
            new Divider(),
            Image.network("https://www.baidu.com/img/bd_logo1.png"),
            new Divider(),
          ],
        ),
      ),
    );
  }
}

3、注意点：
pubspec.yaml文件中assets要与uses-material-design: true左对齐（系统默认注释掉的配置代码左边有个空格需要注意）；
通过**new Image.asset(‘assets/images/ic_phone.png’,**设置显示图片时，注意路径要写全（我忘记写后缀名导致不显示，注意看图片在项目中的路径，至于assets和images路径随便写，对应准即可）

在这里插入图片描述

因为格式未对其导致的报错：
Error on line 42, column 10 of pubspec.yaml: Mapping values are not allowed here. Did you miss a colon earlier?
assets:
^
pub get failed (65)
在这里插入图片描述