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

发布于 1周前 作者 yibo5220 来自 Flutter

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

🌐 Image Network

Image Network 是一个允许你在Web上使用CanvasKit渲染图像而不会遇到CORS问题的包。

Build

📚 Features

  • Image Manager (Android - iOS - Web)
  • 使用 CanvasKit 渲染器
  • 没有 CORS 问题
  • 快速加载
  • 图像缓存（Android && iOS）
    • 推荐与 CachedNetworkImage 版本 2.2.0 或更新版本一起使用
  • 支持从 URL 加载图像
    • (Web) 支持 http 或 https 图像
    • (Android && iOS) 支持 https 图像
  • 支持的图像格式
    • PNG
    • JPEG
    • GIF / 动态 GIF

🔌 Installation

在你的 pubspec.yaml 文件中添加 image_network 作为依赖项。

dependencies:
  image_network: ^2.6.0

然后导入 Image Network：

import 'package:image_network/image_network.dart';

👨‍💻 How To Use

URL Image

定义一个网络图片的URL：

String imageUrl = "https://storage.googleapis.com/cms-storage-bucket/a9d6ce81aee44ae017ee.png";

Image Network

使用 ImageNetwork 小部件来加载和显示网络图片。以下是一个完整的示例代码，展示了如何在一个Flutter应用程序中使用 ImageNetwork。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String imageUrl =
      "https://storage.googleapis.com/cms-storage-bucket/a9d6ce81aee44ae017ee.png";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ImageNetwork(
          image: imageUrl,
          height: 350.0,
          width: 240.0,
          duration: 1500,
          curve: Curves.easeIn,
          onPointer: true,
          debugPrint: false,
          backgroundColor: Colors.blue,
          fitAndroidIos: BoxFit.cover,
          fitWeb: BoxFitWeb.cover,
          borderRadius: BorderRadius.circular(10),
          onLoading: const CircularProgressIndicator(
            color: Colors.indigoAccent,
          ),
          onError: const Icon(
            Icons.error,
            color: Colors.red,
          ),
          onTap: () {
            showDialog(
              context: context,
              builder: (_) => const AlertDialog(
                content: Text("©gabrielpatricksouza"),
              ),
            );
            debugPrint("©gabriel_patrick_souza");
          },
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个 ImageNetwork 小部件用于加载并显示网络图片。同时，还设置了加载时的进度指示器、错误图标以及点击图片时弹出的对话框。

☀️ License

Copyright © 2021 Gabriel Patrick Souza

MIT License

希望这篇详细的指南能帮助你更好地理解和使用 image_network 插件。如果你有任何问题或需要进一步的帮助，请随时提问！


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用image_network插件（实际应为flutter_cached_network_image，因为image_network并不是Flutter官方或广泛认可的包名，而flutter_cached_network_image是一个流行的用于加载和缓存网络图片的插件）的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_cached_network_image: ^3.1.0  # 请检查最新版本号并替换

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

接下来，你可以在你的Dart文件中使用CachedNetworkImage组件来加载网络图片。以下是一个完整的示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String imageUrl = 'https://example.com/path/to/your/image.jpg'; // 替换为你的图片URL

    return Scaffold(
      appBar: AppBar(
        title: Text('Cached Network Image Example'),
      ),
      body: Center(
        child: CachedNetworkImage(
          imageUrl: imageUrl,
          placeholder: (context, url) => CircularProgressIndicator(), // 加载中的占位符
          errorWidget: (context, url, error) => Icon(Icons.error), // 加载失败的占位符
          fit: BoxFit.cover, // 图片适应方式
        ),
      ),
    );
  }
}

在这个示例中：

  • CachedNetworkImage组件用于加载和缓存网络图片。
  • imageUrl属性指定了图片的URL。
  • placeholder属性定义了图片加载过程中的占位符，这里使用了CircularProgressIndicator。
  • errorWidget属性定义了图片加载失败时的占位符，这里使用了Icon(Icons.error)。
  • fit属性指定了图片如何适应其容器，这里使用了BoxFit.cover来保持图片的纵横比并填充容器。

这个示例展示了如何使用flutter_cached_network_image插件来加载和缓存网络图片，同时提供了加载中和加载失败的占位符，以及图片适应容器的选项。你可以根据需要进一步自定义这些属性。

回到顶部