Flutter Firebase UI集成插件firebase_ui_storage的使用

Firebase UI Storage

Firebase UI Storage 是一组Flutter小部件和实用工具，旨在帮助您构建和集成与Firebase Storage交互的用户界面。

文档

• 开始使用
• 小部件
  • UploadButton
  • TaskProgressIndicator
  • StorageImage
  • StorageListView
  • StorageGridView
• 分页加载控制器 PaginatedLoadingController

问题反馈

请在我们的问题追踪器中提交有关Firebase UI Storage的具体问题、错误或功能请求。

贡献

如果您希望为本仓库中的现有插件贡献更改，请查看我们的贡献指南，并提交一个pull request。

示例代码

以下是firebase_ui_storage插件的完整示例代码。这个例子展示了如何使用firebase_ui_storage来创建一个简单的应用程序，该应用程序允许用户上传文件到Firebase Storage，并以列表或网格视图显示存储中的文件。

// Copyright 2023, the Chromium project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:firebase_ui_storage/firebase_ui_storage.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Initialize Firebase with platform-specific configuration.
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  // (Optional) Use Firebase Storage emulator for development and testing.
  await FirebaseStorage.instance.useStorageEmulator('localhost', 9199);

  final storage = FirebaseStorage.instance;

  // Configure Firebase UI Storage with the initialized Firebase Storage instance.
  final config = FirebaseUIStorageConfiguration(
    storage: storage,
  );

  await FirebaseUIStorage.configure(config);

  runApp(const FirebaseUIStorageExample());
}

class FirebaseUIStorageExample extends StatelessWidget {
  const FirebaseUIStorageExample({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FirebaseUI Storage Example',
      theme: ThemeData(
        primarySwatch: Colors.pink,
        useMaterial3: true,
      ),
      home: const Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _selectedIndex = 0;
  GlobalKey key = GlobalKey();

  // Build a list view of items from Firebase Storage.
  Widget buildList() {
    return StorageListView(
      key: key,
      ref: FirebaseStorage.instance.ref('/'),
      itemBuilder: (context, ref) {
        return AspectRatio(
          aspectRatio: 1,
          child: StorageImage(
            ref: ref,
            fit: BoxFit.cover,
          ),
        );
      },
    );
  }

  // Build a grid view of items from Firebase Storage.
  Widget buildGrid() {
    return StorageGridView(
      key: key,
      ref: FirebaseStorage.instance.ref('/'),
      itemBuilder: (context, ref) {
        return AspectRatio(
          aspectRatio: 1,
          child: StorageImage(
            ref: ref,
            fit: BoxFit.cover,
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FirebaseUI Storage Example'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              setState(() {
                key = GlobalKey();
              });
            },
          ),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) => setState(() => _selectedIndex = index),
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'List',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.grid_on),
            label: 'Grid',
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: switch (_selectedIndex) {
              0 => buildList(),
              1 => buildGrid(),
              _ => throw UnimplementedError(),
            },
          ),
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Builder(builder: (context) {
              return UploadButton(
                onError: (error, _) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text(error.toString())),
                  );
                },
                onUploadComplete: (ref) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Upload complete')),
                  );

                  setState(() {
                    key = GlobalKey();
                  });
                },
              );
            }),
          )
        ],
      ),
    );
  }
}

此示例代码实现了以下功能：

• 初始化Firebase应用并与Firebase Storage进行配置。
• 创建了一个带有底部导航栏的应用程序，允许用户在列表视图和网格视图之间切换。
• 使用StorageListView和StorageGridView从Firebase Storage加载图片，并通过AspectRatio和StorageImage组件展示。
• 提供了一个UploadButton按钮，允许用户上传文件到Firebase Storage，并在上传完成后刷新视图。

希望这个完整的示例能够帮助你更好地理解和使用firebase_ui_storage插件。如果你有任何问题或需要进一步的帮助，请随时提问！