Flutter网络图片加载插件network_image的使用

Flutter网络图片加载插件network_image的使用

Network Image Widget

NetworkImageWidget 让你的生活更轻松。直接调用它，并传入 (ImageUrl) 或 (File)，或者留空，它会自动为你设置默认图像。如果你想更改它，请传递自己的占位符。听起来不错吧，把它用在你的项目中吧。

使用方法

在 pubspec.yaml 中添加依赖

dependencies:
  network_image: # 最新版本

导入库

import 'package:network_image/network_image.dart';

实现示例

下面是一个完整的示例代码，展示了如何在 Flutter 应用中使用 NetworkImageWidget 加载网络图片。

import 'package:flutter/material.dart';
import 'package:network_image/network_image.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Image Example'),
        ),
        body: Center(
          child: NetworkImageWidget(
            borderRadius: 50,
            imageUrl: 'https://example.com/image.jpg', // 网络图片地址
            errorWidgetBuilder: Icon(Icons.error), // 错误时显示的图标
            boxFit: BoxFit.cover, // 图片填充模式
            placeHolder: Container(
              color: Colors.grey[300], // 占位符颜色
            ),
            progressIndicatorBuilder: Center(
              child: CircularProgressIndicator(), // 加载中显示的指示器
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter网络图片加载插件network_image的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网络图片加载插件network_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，Image.network 是用于加载网络图片的内置组件。如果你需要更高级的功能（如缓存、占位符等），可以使用 cached_network_image 插件。下面将分别介绍这两种方式。

1. 使用 Image.network

Image.network 是 Flutter 内置的用于加载网络图片的组件，使用非常简单。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network Image Example'),
        ),
        body: Center(
          child: Image.network(
            'https://example.com/image.jpg',
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

在这个例子中，Image.network 加载了一个来自网络的图片，并设置了图片的宽度、高度和填充方式。

2. 使用 cached_network_image 插件

cached_network_image 插件提供了更强大的功能，比如图片缓存、占位符、错误处理等。

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.2.0

然后，你可以使用 CachedNetworkImage 组件来加载网络图片：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cached Network Image Example'),
        ),
        body: Center(
          child: CachedNetworkImage(
            imageUrl: 'https://example.com/image.jpg',
            width: 200,
            height: 200,
            fit: BoxFit.cover,
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => Icon(Icons.error),
          ),
        ),
      ),
    );
  }
}
回到顶部