Flutter云存储图片上传插件firestore_picture_uploader的使用

本库提供了一个用于上传一张或多张图片到Firebase Storage的图片上传小部件。通过此库可以实现以下功能：

• 使用PictureUploadWidget上传一张或多张图片
• 通过PictureUploadWidget删除图片
• 多种自定义选项（字体大小、文本、颜色等）
• 可以自定义上传或下载方法

前提条件

重要：为了使用此库，您必须…

1. 将Firebase添加到您的项目中，例如对于iOS，将您的GoogleService-Info.plist文件复制到ios/Runner/
2. 配置iOS上的image_picker，详见：https://pub.dev/packages/image_picker

快速使用

如何使用PictureUploadWidget的完整教程可以在以下链接找到：教程

总结：

1. 应用上述前提条件到您的项目
2. 请参阅示例了解使用方法：示例

示例

示例视频链接：https://github.com/Rodiii/flutter_firebase_picture_uploader/raw/master/example.gif

示例代码

import 'package:firestore_picture_uploader/firestore_picture_uploader.dart';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  runApp(ExampleApp());
}

class ExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => new _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  List<UploadJob>? _profilePictures = [];

  @override
  Widget build(BuildContext context) {
    final profilePictureTile = new Material(
      color: Colors.transparent,
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const Text('Profile Picture',
              style: TextStyle(
                color: CupertinoColors.systemBlue,
                fontSize: 15.0,
              )),
          const Padding(
            padding: EdgeInsets.only(bottom: 5.0),
          ),
          PictureUploadWidget(
            initialImages: _profilePictures,
            onPicturesChange: profilePictureCallback,
            buttonStyle: PictureUploadButtonStyle(),
            buttonText: '上传图片',
            localization: PictureUploadLocalization(),
            settings: PictureUploadSettings(
                // customDeleteFunction: ProfileController.deleteProfilePicture,
                // customUploadFunction: RecipeController.uploadRecipePicture,
                imageSource: ImageSourceExtended.askUser,
                minImageCount: 0,
                maxImageCount: 5,
                imageManipulationSettings: const ImageManipulationSettings(
                    enableCropping: true, compressQuality: 75)),
            enabled: true,
          ),
        ],
      ),
    );

    return new Scaffold(
      body: Padding(
          padding: const EdgeInsets.fromLTRB(20, 100, 20, 50),
          child: Column(children: <Widget>[profilePictureTile])),
    );
  }

  void profilePictureCallback(
      {List<UploadJob>? uploadJobs, bool? pictureUploadProcessing}) {
    _profilePictures = uploadJobs;
  }
}

代码说明

1. 导入必要的包：

   import 'package:firestore_picture_uploader/firestore_picture_uploader.dart';
   import 'package:flutter/material.dart';
   import 'package:flutter/cupertino.dart';
   import 'package:firebase_core/firebase_core.dart';
   

2. 初始化Firebase：

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

3. 创建应用入口：

   class ExampleApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         debugShowCheckedModeBanner: false,
         home: MyHome(),
       );
     }
   }
   

4. 创建主页面状态类：

   class MyHome extends StatefulWidget {
     @override
     _MyHomeState createState() => new _MyHomeState();
   }
   

5. 实现主页面状态：

   class _MyHomeState extends State<MyHome> {
     List<UploadJob>? _profilePictures = [];
   
     @override
     Widget build(BuildContext context) {
       final profilePictureTile = new Material(
         color: Colors.transparent,
         child: new Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
             const Text('Profile Picture',
                 style: TextStyle(
                   color: CupertinoColors.systemBlue,
                   fontSize: 15.0,
                 )),
             const Padding(
               padding: EdgeInsets.only(bottom: 5.0),
             ),
             PictureUploadWidget(
               initialImages: _profilePictures,
               onPicturesChange: profilePictureCallback,
               buttonStyle: PictureUploadButtonStyle(),
               buttonText: '上传图片',
               localization: PictureUploadLocalization(),
               settings: PictureUploadSettings(
                   imageSource: ImageSourceExtended.askUser,
                   minImageCount: 0,
                   maxImageCount: 5,
                   imageManipulationSettings: const ImageManipulationSettings(
                       enableCropping: true, compressQuality: 75)),
               enabled: true,
             ),
           ],
         ),
       );
   
       return new Scaffold(
         body: Padding(
             padding: const EdgeInsets.fromLTRB(20, 100, 20, 50),
             child: Column(children: <Widget>[profilePictureTile])),
       );
     }
   
     void profilePictureCallback(
         {List<UploadJob>? uploadJobs, bool? pictureUploadProcessing}) {
       _profilePictures = uploadJobs;
     }
   }