Flutter资源选择插件assets_picker_ot的使用

assets_picker_ot 插件可以帮助你快速从相册中选择资源。以下是该插件的使用方法。

使用示例

首先，你需要在你的项目中引入 assets_picker_ot 插件。可以在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  assets_picker_ot: ^版本号

然后运行 flutter pub get 来安装依赖。

接下来是一个完整的示例代码，展示了如何使用 assets_picker_ot 插件来从相册中选择图片和视频。

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

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

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

  // 这是应用的根部件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
      ),
      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
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _fileList = <SelectedFile>[];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              onPressed: () {
                // 打开PickerPage以选择资源
                Navigator.push(context, MaterialPageRoute(builder: (_con) {
                  return PickerPage(
                    showCamera: false, // 是否显示相机按钮
                    maxSelected: 3, // 最多选择数量
                    isSelectedVideo: true, // 是否可以选择视频
                    overMaxSelected: (context) {
                      debugPrint('最多选择3个视频或图片');
                    },
                  );
                })).then((value) {
                  _fileList.clear(); // 清空已选文件列表
                  if (value is List<SelectedFile>) {
                    setState(() {
                      _fileList.addAll(value); // 更新已选文件列表
                    });
                  }
                });
              },
              child: const Text('从相册选取'),
            ),
            // 显示已选择的文件
            ..._fileList.map((it) {
              debugPrint('${it.type} ${it.file} ');
              if (it.type == FileType.image) {
                return Column(
                  children: [
                    Text(it.file.path),
                    Image.file(
                      it.file,
                      fit: BoxFit.cover,
                      width: 100,
                      height: 100,
                    ),
                  ],
                );
              } else {
                return Text(it.file.path);
              }
            }).toList(),
          ],
        ),
      ),
    );
  }
}

说明

1. 导入库：

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

2. 初始化应用：

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({Key? key}) : super(key: key);
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         darkTheme: ThemeData(
           brightness: Brightness.dark,
         ),
         home: const MyHomePage(title: 'Flutter Demo Home Page'),
       );
     }
   }
   

3. 创建主页面：

   class MyHomePage extends StatefulWidget {
     const MyHomePage({Key? key, required this.title}) : super(key: key);
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   

4. 处理文件选择逻辑：

   class _MyHomePageState extends State<MyHomePage> {
     final _fileList = <SelectedFile>[];
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               TextButton(
                 onPressed: () {
                   Navigator.push(context, MaterialPageRoute(builder: (_con) {
                     return PickerPage(
                       showCamera: false,
                       maxSelected: 3,
                       isSelectedVideo: true,
                       overMaxSelected: (context) {
                         debugPrint('最多选择3个视频或图片');
                       },
                     );
                   })).then((value) {
                     _fileList.clear();
                     if (value is List<SelectedFile>) {
                       setState(() {
                         _fileList.addAll(value);
                       });
                     }
                   });
                 },
                 child: const Text('从相册选取'),
               ),
               ..._fileList.map((it) {
                 debugPrint('${it.type} ${it.file} ');
                 if (it.type == FileType.image) {
                   return Column(
                     children: [
                       Text(it.file.path),
                       Image.file(
                         it.file,
                         fit: BoxFit.cover,
                         width: 100,
                         height: 100,
                       ),
                     ],
                   );
                 } else {
                   return Text(it.file.path);
                 }
               }).toList(),
             ],
           ),
         ),
       );
     }
   }