Flutter聊天图片处理插件chat_image的使用

聊天图片插件chat_image

chat_image 是一个用于从网络加载图片、在本地存储到相册并显示本地保存图片的包。

与CachedNetworkImage的区别

CachedNetworkImage 是一个很棒的包，它可以从网络加载图片并将其存储在应用缓存中。 主要区别在于 ChatImage 下载图片后会将其存储到相册中，而不是存储在缓存中。虽然缓存不能在每次会话中重复使用，但在某些情况下可能需要重新下载图片。 然而，ChatImage 包的主要用途是存储聊天中的图片。你不会希望在重新进入聊天时再次下载图片。此包将图片在本地保存一次，并在后续使用中重复使用该图片。

安装

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

iOS

在你的 Info.plist 文件中（位于 <项目根目录>/ios/Runner/Info.plist），添加以下键：

• NSPhotoLibraryUsageDescription - 描述为什么你的应用需要访问照片库权限。这在可视化编辑器中称为隐私 - 照片库使用描述。

例如：

<key>NSPhotoLibraryUsageDescription</key>
<string>保存图片并重复使用它们</string>

Android

添加以下权限以存储图片（android.permission.WRITE_EXTERNAL_STORAGE - 使用外部存储的权限）：

例如：

<manifest ...>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <application
        ...
       android:requestLegacyExternalStorage="true"
       ...>
        ...
</manifest>

示例

以下是使用 ChatImage 的完整示例代码：

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

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

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

const String url = "https://raw.githubusercontent.com/Babwenbiber/flutter_chat_image/master/res/TA_Logo.jpg";

class FirstPage extends StatefulWidget {
  FirstPage({Key? key}) : super(key: key);

  [@override](/user/override)
  _FirstPageState createState() => _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("保存图片并显示"),
      ),
      body: Column(children: [
        ChatImage(
            url: url,
            errorBuilder: (BuildContext context, String errorMsg) {
              return Text("一些错误 $errorMsg");
            },
            imageBuilder: (BuildContext context, Image image) {
              return Container(
                color: Colors.green,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(color: Colors.white, child: image),
                ),
              );
            }),
        SizedBox(
          height: 50,
        ),
        MaterialButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => _SecondPage()),
              );
            },
            child: Container(
                color: Colors.blue,
                child: Padding(
                  padding: const EdgeInsets.all(20.0),
                  child: Text("在下一页重复使用图片", style: TextStyle(color: Colors.white)),
                )))
      ]),
    );
  }
}

class _SecondPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("保存图片并显示"),
      ),
      body: Column(
        children: [
          ChatImage(
              url: url,
              loadingBuilder: (BuildContext context) {
                return Center(
                  child: Container(
                    color: Colors.red,
                    height: 200,
                    width: 200,
                    child: Center(
                        child: Text(
                      "正在加载",
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    )),
                  ),
                );
              },
              errorBuilder: (BuildContext context, String errorMsg) {
                return Text("一些错误 $errorMsg");
              },
              imageBuilder: (BuildContext context, Image image) {
                return Container(
                  color: Colors.green,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: image,
                  ),
                );
              }),
          SizedBox(
            height: 50,
          ),
          MaterialButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => FirstPage()),
                );
              },
              child: Container(
                  color: Colors.blue,
                  child: Padding(
                    padding: const EdgeInsets.all(20.0),
                    child: Text("回到第一页", style: TextStyle(color: Colors.white)),
                  )))
        ],
      ),
    );
  }
}