Flutter图片展示插件show_image的使用

Flutter图片展示插件show_image的使用

show_image: 一个用于展示任何类型的图像（资源文件、本地文件、网络图像）的简单flutter包，无需传递图像类型。

最新版本

show_image: 0.0.1

功能亮点

1. 自动识别图像类型并展示。只需传递图像路径即可。见以下示例。

2. 可以自定义图像样式，例如覆盖、填充等。

3. 点击图像可全屏查看，并且可以选择是否在大屏幕上打开。

4. 可以设置自定义边框半径、背景颜色（支持亮暗模式）、图像宽度和高度。

🎗️ 注意：如果同时设置了bgColor和isLightMode，只有bgColor会生效。

使用方法

/// 使用网络图像
const SizedBox(
    height: 300,
    width: 300,
    child: ShowImage(imagePath: 'https://img.icons8.com/fluency/344/filled-like.png'),
),

/// 使用资源文件图像
const SizedBox(
    height: 300,
    width: 300,
    child: ShowImage(imagePath: 'assets/images/gps.png'),
),

/// 使用本地文件图像
const SizedBox(
    height: 300,
    width: 300,
    child: ShowImage(imagePath: '/data/user/0/com.example.show_image_tester/cache/image_picker4569168379202702965.jpg'),
),

完整示例Demo

以下是一个完整的示例Demo，展示了如何使用show_image插件来展示不同类型的图像：

import 'package:flutter/material.dart';
import 'package:show_image/show_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('Show Image Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 展示网络图像
              const SizedBox(
                height: 300,
                width: 300,
                child: ShowImage(imagePath: 'https://img.icons8.com/fluency/344/filled-like.png'),
              ),
              SizedBox(height: 20),
              // 展示资源文件图像
              const SizedBox(
                height: 300,
                width: 300,
                child: ShowImage(imagePath: 'assets/images/gps.png'),
              ),
              SizedBox(height: 20),
              // 展示本地文件图像
              const SizedBox(
                height: 300,
                width: 300,
                child: ShowImage(imagePath: '/data/user/0/com.example.show_image_tester/cache/image_picker4569168379202702965.jpg'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


show_image 是一个用于在 Flutter 应用中展示图片的插件，它提供了一种简单的方式来加载和显示图片，支持从网络、本地文件、内存等多种来源加载图片。以下是使用 show_image 插件的基本步骤和示例代码。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 show_image 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  show_image: ^1.0.0  # 请查看最新版本

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

2. 导入插件

在你的 Dart 文件中导入 show_image 插件：

import 'package:show_image/show_image.dart';

3. 使用 ShowImage 组件

ShowImage 是 show_image 插件提供的核心组件，用于展示图片。你可以通过 source 属性指定图片的来源。

示例 1: 从网络加载图片

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

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

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

示例 2: 从本地文件加载图片

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Show Image Example')),
        body: Center(
          child: ShowImage(
            source: ImageSource.file(
              'assets/images/local_image.jpg',
            ),
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

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

示例 3: 从内存加载图片

import 'package:flutter/material.dart';
import 'package:show_image/show_image.dart';
import 'dart:typed_data';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Uint8List imageData = ...; // 获取图片的二进制数据

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Show Image Example')),
        body: Center(
          child: ShowImage(
            source: ImageSource.memory(imageData),
            width: 200,
            height: 200,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

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

4. 其他功能

ShowImage 组件还支持以下常用属性：

  • width 和 height: 设置图片的宽度和高度。
  • fit: 设置图片的缩放模式，如 BoxFit.cover, BoxFit.contain 等。
  • placeholder: 在图片加载过程中显示的占位符。
  • errorWidget: 在图片加载失败时显示的错误组件。

5. 处理图片加载状态

你可以通过 ShowImage 的 loadingBuilder 和 errorBuilder 来处理图片加载的状态：

ShowImage(
  source: ImageSource.network('https://example.com/path/to/your/image.jpg'),
  width: 200,
  height: 200,
  fit: BoxFit.cover,
  loadingBuilder: (context, progress) {
    return CircularProgressIndicator(value: progress);
  },
  errorBuilder: (context, error) {
    return Icon(Icons.error);
  },
);
回到顶部