Flutter云端图片加载插件firebase_image的使用

Flutter云端图片加载插件firebase_image的使用

🔥 Firebase Image Provider

#

pub package

firebase_image 是一个用于 Firebase Cloud Storage 图片对象的缓存 Flutter ImageProvider。

如何使用

#

确保已经在所有平台上完成了 Firebase 的配置。

给 FirebaseImage 小部件提供图片的URI（例如 gs://bucket123/userIcon123.jpg），然后将其放入任何接受 ImageProvider 的小部件中（如 Image，ImageIcon 等）。请注意，目前您需要使用 gs:// 前缀。

下面是一个示例代码。

如何工作？

#

代码将图像（对象）下载到内存中作为字节数组。

除非使用 cacheRefreshStrategy: CacheRefreshStrategy.NEVER 选项禁用，否则它会从元数据中获取对象的最后更新时间（以毫秒精度整数时间戳表示），并将其用作默认版本号。因此，任何对远程对象的更新都会导致下载新版本。

内存中的图像字节数组随后会被保存到应用程序临时目录中的文件，并且该位置会被保存在持久化数据库中。操作系统可以随时清理此目录。

元数据检索是一种 “Class B 操作”，每月有 50,000 次免费操作。超过这个数量后，费用为每 100,000 次操作 $0.04。因此，默认行为 cacheRefreshStrategy: CacheRefreshStrategy.BY_METADATA_DATE 可能会产生额外成本，如果对象从未更改过。这使得这种实现成为一种成本效益高的缓存策略，因为不需要传输整个对象来检查是否有任何更新。本质上，任何图像都只需要在每个设备上下载一次。

示例

#

import 'package:flutter/material.dart';
import 'package:firebase_image/firebase_image.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    FirebaseImage('gs://bucket123/otherUser123.jpg').preCache();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Image(
        image: FirebaseImage('gs://bucket123/userIcon123.jpg',
            shouldCache: true, // 图像应该被缓存（默认：True）
            maxSizeBytes: 3000 * 1000, // 3MB最大文件大小（默认：2.5MB）
            cacheRefreshStrategy: 
                CacheRefreshStrategy.NEVER // 关闭更新检查
            ),
        width: 100,
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter中使用firebase_image插件加载云端图片的示例代码。不过，需要注意的是，firebase_image并不是Flutter官方或广泛使用的包名，通常我们使用cached_network_image或结合Firebase Storage URL来加载图片。但基于你的要求，这里假设你想通过Firebase Storage URL来加载图片，我们可以使用Image.network结合Firebase Storage来实现。

首先，确保你的Flutter项目中已经配置好了Firebase，并且有一个Firebase Storage bucket可供使用。

  1. 在pubspec.yaml中添加依赖（如果使用cached_network_image插件的话）:
dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.x.x # 确保版本与你的Firebase SDK兼容
  firebase_storage: ^10.x.x # 确保版本与你的Firebase SDK兼容
  cached_network_image: ^3.x.x # 这是一个流行的用于缓存网络图片的插件
  1. 初始化Firebase（通常在main.dart中）:
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Firebase Image Loading Example'),
        ),
        body: FirebaseImageScreen(),
      ),
    );
  }
}
  1. 创建FirebaseImageScreen来加载和显示图片:
import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';

class FirebaseImageScreen extends StatefulWidget {
  @override
  _FirebaseImageScreenState createState() => _FirebaseImageScreenState();
}

class _FirebaseImageScreenState extends State<FirebaseImageScreen> {
  String? imageUrl;

  @override
  void initState() {
    super.initState();
    _getImageUrl();
  }

  Future<void> _getImageUrl() async {
    final storageRef = FirebaseStorage.instance.ref().child('path/to/your/image.jpg');
    final downloadUrl = await storageRef.getDownloadURL();
    setState(() {
      imageUrl = downloadUrl;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: imageUrl != null
          ? CachedNetworkImage(
              imageUrl: imageUrl!,
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            )
          : CircularProgressIndicator(),
    );
  }
}

在这个例子中，我们首先初始化了Firebase，然后在FirebaseImageScreen组件中，我们请求Firebase Storage中的图片URL，并使用CachedNetworkImage插件来加载和显示该图片。如果图片正在加载，则显示一个CircularProgressIndicator；如果加载失败，则显示一个错误图标。

请确保将'path/to/your/image.jpg'替换为你实际存储在Firebase Storage中的图片路径。

这样，你就能够在Flutter应用中加载和显示存储在Firebase Storage中的图片了。

回到顶部