Flutter网络图片显示插件show_network_image的使用

Flutter网络图片显示插件show_network_image的使用

你是否曾经在使用canvaskit时遇到过由于缺少CORS而导致的图片加载问题？通过这个插件，你可以轻松地显示没有CORS的图片。

特性

  • 支持canvaskit
  • 支持格式：jpg, png, gif
  • 支持没有CORS的图片

安装

首先，在pubspec.yaml文件中添加show_network_image作为依赖项：

dependencies:
  show_network_image: ^版本号

然后导入包：

import 'package:show_network_image/show_network_image.dart';

使用方法

显示图片

以下是一个完整的示例，展示了如何在Flutter应用中使用show_network_image插件来显示网络图片：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              height: 200,
              width: 300,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(32),
                child: const ShowNetworkImage(
                  // 图片URL
                  imageSrc:
                      'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3QCRzKMKYOH5-VALcnTfMD_xclnCTXS5z1SBMTGkYkGJYKGnjb-9trbxaPN2pn4kInp9Bcn4Uti1Cs65Kv9bKtNnjLBNEsdz3Hivryd2aLuWzTx9Uy2Jmv_0MbhkKQjNT0fuGcSFXfXzg2S1Icl1aaNe73ReuFaOSbjcJubK2n7mWk3TvyLSVhW9l/s1600/mavi1.png',
                  // 填充模式
                  mobileBoxFit: BoxFit.fill,
                  // 高度
                  mobileHeight: 300,
                  // 宽度
                  mobileWidth: 300,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用show_network_image插件来显示网络图片的示例代码。

首先，确保你已经在pubspec.yaml文件中添加了show_network_image的依赖：

dependencies:
  flutter:
    sdk: flutter
  show_network_image: ^x.y.z  # 请将x.y.z替换为最新的版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中导入show_network_image包，并使用NetworkImageWithRetryWidget来显示网络图片。这个插件提供了重试机制，可以在图片加载失败时自动重试。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Image Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            NetworkImageWithRetryWidget(
              imageUrl: 'https://example.com/path/to/your/image.jpg',
              placeholder: (BuildContext context, Object? error) => CircularProgressIndicator(),
              imageBuilder: (BuildContext context, Widget image) => Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: image,
                    fit: BoxFit.cover,
                  ),
                ),
                width: 300,
                height: 200,
              ),
              retryLimit: 3, // 最大重试次数
              retryDuration: Duration(seconds: 2), // 每次重试的间隔时间
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. NetworkImageWithRetryWidget用于显示网络图片，并带有重试机制。
  2. imageUrl属性指定了图片的URL。
  3. placeholder属性指定了加载图片时的占位符，这里使用了CircularProgressIndicator。
  4. imageBuilder属性允许你自定义图片的显示方式，这里将图片放入了一个Container中，并设置了宽度和高度。
  5. retryLimit属性设置了最大重试次数。
  6. retryDuration属性设置了每次重试的间隔时间。

这个插件提供了简洁的API来处理网络图片的加载和重试，非常适合在实际项目中使用。

回到顶部