Flutter混合图片加载插件hybrid_image的使用

Flutter混合图片加载插件hybrid_image的使用

简介

Hybrid Image 是一个封装了 flutter_svg 和 Flutter SDK 图片提供器的插件，它根据文件扩展名选择正确的控件来显示图片。

特性

目前可以使用的三个控件是：

• HybridImage.asset()
• HybridImage.network()
• HybridImage.file()

内存图片暂时不支持，因为无法区分 SVG 图片和普通图片。

开始使用

由于这是一个对 flutter_svg 和正常图片构造器的封装，没有特殊的使用方法。根据你的使用场景选择合适的控件（网络、资源或文件）。

使用示例

1. 从文件加载图片

// 创建一个文件对象
final file = File('your/path.png');
// 使用 HybridImage.file 显示图片
HybridImage.file(
    file, 
    width: 50, 
    height: 50, // 设置图片宽度和高度
),

2. 从资源加载图片

// 使用 HybridImage.asset 显示本地资源图片
HybridImage.asset(
    'assets/my_image.svg', 
    width: 50, 
    height: 50, // 设置图片宽度和高度
),

3. 从网络加载图片

// 使用 HybridImage.network 显示网络图片
HybridImage.network(
    'https://my.website.com/this_image.jpg', 
    width: 50, 
    height: 50, // 设置图片宽度和高度
),

完整示例 Demo

以下是一个完整的 Flutter 应用示例，展示了如何使用 HybridImage 插件：

import 'dart:io';

import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:hybrid_image/hybrid_image.dart';

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

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

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

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  File? file; // 存储用户选择的文件

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          // 添加一个按钮用于选择文件
          IconButton(
            icon: const Icon(Icons.file_copy),
            onPressed: () async {
              // 使用 FilePicker 拾取文件
              FilePickerResult? result = await FilePicker.platform.pickFiles(
                type: FileType.custom,
                allowedExtensions: ['svg', 'png', 'jpg', 'PNG', 'jpeg'], // 允许的文件类型
              );

              setState(() {
                if (result != null) {
                  file = File(result.files.single.path!); // 更新文件对象
                }
              });
            },
          ),
          // 如果有选择的文件，则显示该文件
          if (file != null) ...{
            Expanded(
              child: HybridImage.file(
                file!,
                key: UniqueKey(), // 使用唯一键确保每次更新时重新渲染
              ),
            ),
          },
          // 显示一张网络图片作为示例
          Expanded(
            child: HybridImage.network('https://svgur.com/i/bhK.svg'),
          ),
        ],
      ),
    );
  }
}