• Flutter聊天布局之图片&视频上传、显示、保存到相册

    目录

    用到的组件

    ios和android端配置文件

    ios

    android

    主页部分代码

    显示及保存照片组件代码

    显示及保存视频组件代码

    视频演示

    接上文Flutter简单聊天界面布局及语音录制播放_chw-di的博客-CSDN博客

    本文主要对聊天布局内的图片及视频的上传、显示和保存到相册进行简单开发。

    用到的组件

    1. #相册插件
    2. image_picker: ^0.8.5+3
    3. #查看图片组件
    4. photo_view: ^0.14.0
    5. #缓存照片插件
    6. cached_network_image: ^3.2.1
    7. #视频播放
    8. video_player: ^2.4.7
    9. #视频缩略图
    10. video_thumbnail: ^0.5.2
    11. #文件目录获取
    12. path_provider: ^2.0.11
    13. #保存视频、照片到本地相册
    14. image_gallery_saver: ^1.7.1

    ios和android端配置文件

    ios

    在info.plist中添加

    1. <key>NSPhotoLibraryAddUsageDescription</key>
    2. <string>保存图片</string>
    3. <key>NSAppTransportSecurity</key>
    4.   <string>http</string>

    android

    在AndroidManifest.xml中添加

    1.     
    2.     <uses-permission android:name="android.permission.INTERNET"/>
    1.     <application ...
    2.         android:requestLegacyExternalStorage="true"
    3.     ...
    4.  </application>

    主页部分代码

    1.   //获取相册照片并上传
    2.   _getPhotos() async {
    3.     final XFile? pickImage =
    4.         await _picker.pickImage(source: ImageSource.gallery);
    5.     //上传
    6.     var filePath = await _uploadFile(pickImage!, MessageType.photo);
    7.     insertFile(MessageType.photo,filePath,"");
    8.   }
    9.  
    10.   //拍照并上传
    11.   _takePhotos() async {
    12.     final XFile? pickImage =
    13.         await _picker.pickImage(source: ImageSource.camera);
    14.     //上传
    15.     var filePath = await _uploadFile(pickImage!, MessageType.photo);
    16.     insertFile(MessageType.photo,filePath,"");
    17.   }
    18.  
    19.   //上传视频
    20.   _getVideo() async {
    21.     final XFile? pickImage = await _picker.pickVideo(source: ImageSource.gallery);
    22.     //获取缩略图文件
    23.     File videoThumbnailFile = await _getVideoThumbnail(pickImage!);
    24.     XFile file = XFile(videoThumbnailFile.path);
    25.     //上传缩略图
    26.     var videoThumbnailFilePath = await _uploadFile(file, MessageType.photo);
    27.     //上传视频
    28.     var videoPath = await _uploadFile(pickImage, MessageType.video);
    29.     insertFile(MessageType.video,videoPath,videoThumbnailFilePath);
    30.   }
    31.  
    32.  
    33. //获取视频缩略图
    34. Future _getVideoThumbnail(XFile videoFile) async {
    35.   Uint8List? thumbnail = await VideoThumbnail.thumbnailData(
    36.     video: videoFile.path,
    37.     imageFormat: ImageFormat.JPEG,
    38.     quality: 25,
    39.   );
    40.   var tempDir = await getTemporaryDirectory();
    41.   //生成file文件格式
    42.   String videoThumbnail = '${tempDir.path}/image_${DateTime.now().millisecond}.jpg';
    43.   var file = await File(videoThumbnail).create();
    44.   file.writeAsBytesSync(thumbnail!);
    45.   return file;
    46. }
    47.  
    48.  
    49.  
    50.  
    51. //上传文件
    52. Future<String> _uploadFile(XFile imageDir, String type) async {
    53.   String filePath = imageDir.path;
    54.   var list = filePath.split(".");
    55.   var last = list.last;
    56.   String fileName = "${const Uuid().v4()}.$last";
    57.   FormData formData = FormData.fromMap({
    58.     "file": await MultipartFile.fromFile(imageDir.path, filename: fileName),
    59.   });
    60.   Dio dio = Dio();
    61.   var response = await dio.post("http://192.168.9.253:8091/sc/file/upload", data: formData);
    62.   var path = response.data["data"]["detail"]["filePath"];
    63.   return path;
    64. }
    65. //写入文件
    66. void insertFile(String type,String path,String thumbnail) {
    67.   Map data = {};
    68.   data['messageId'] = const Uuid().v4();
    69.   data['message'] = "图片";
    70.   data['messageType'] = type;
    71.   data['messageTime'] =
    72.       TimeUtils.getFormatDataString(DateTime.now(), "yyyy-MM-dd HH:mm:ss");
    73.   data['isMe'] = Random.secure().nextBool();
    74.   data['fileUrl'] = path;
    75.   if(thumbnail.isNotEmpty){
    76.     data['thumbnail'] = thumbnail;
    77.   }
    78.   setState(() {
    79.     _messageData.insert(0, data);
    80.   });
    81. }
    82. //照片显示组件：
    83. GestureDetector(
    84.   onTap: () {
    85.     Navigator.push(
    86.         context,
    87.         PanPageRouteBuilder(
    88.             builder: (context) =>
    89.                 FullImageWidget(imageUrl: data['fileUrl']),
    90.             popDirection: AxisDirection.up));
    91.   },
    92.   child: Container(
    93.       clipBehavior: Clip.hardEdge,
    94.       width: ScreenAdapter.width(300),
    95.       height: ScreenAdapter.height(400),
    96.       decoration: const BoxDecoration(
    97.           color: Colors.white,
    98.           borderRadius: BorderRadius.all(Radius.circular(10))),
    99.       child: CachedNetworkImage(
    100.         imageUrl: data['fileUrl'],
    101.         fit: BoxFit.cover,
    102.       )),
    103. );
    104. //视频显示组件
    105. GestureDetector(
    106.   onTap: () {
    107.     Navigator.push(
    108.         context,
    109.         PanPageRouteBuilder(
    110.             builder: (context) =>
    111.                 FullVideoWidget(videoUrl: data['fileUrl']),
    112.             popDirection: AxisDirection.up));
    113.   },
    114.   child: Stack(
    115.     alignment: Alignment.center,
    116.     children: [
    117.       Container(
    118.           color: Colors.white,
    119.           width: ScreenAdapter.width(300),
    120.           height: ScreenAdapter.height(400),
    121.           child: Image.network(data['thumbnail'],fit: BoxFit.cover,),),
    122.       Icon(Icons.play_circle,color: Colors.white,size: ScreenAdapter.size(70),)
    123.     ],
    124.   )
    125. );

    显示及保存照片组件代码

    1. import 'dart:typed_data';
    2.  
    3. import 'package:dio/dio.dart';
    4. import 'package:flutter/material.dart';
    5. import 'package:fluttertoast/fluttertoast.dart';
    6. import 'package:image_gallery_saver/image_gallery_saver.dart';
    7. import 'package:new_chat/service/screen_adapter.dart';
    8. import 'package:new_chat/widget/toast_widget.dart';
    9. import 'package:photo_view/photo_view.dart';
    10.  
    11. class FullImageWidget extends StatelessWidget {
    12.   final String imageUrl;
    13.  
    14.   const FullImageWidget({Key? key, required this.imageUrl}) : super(key: key);
    15.  
    16.   //保存照片
    17.   _saveImage() async {
    18.     var response = await Dio().get(
    19.         imageUrl,
    20.         options: Options(responseType: ResponseType.bytes));
    21.     final result = await ImageGallerySaver.saveImage(
    22.         Uint8List.fromList(response.data),
    23.         name: "hello");
    24.     if(result['isSuccess']){
    25.       ToastWidget.showToast("照片保存成功", ToastGravity.CENTER);
    26.     }
    27.   }
    28.  
    29.   //长摁保存照片组件
    30.   _showSaveVideoWidget(BuildContext context) async {
    31.     showModalBottomSheet(
    32.         context: context,
    33.         isDismissible: true,
    34.         isScrollControlled: false,
    35.         shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))),
    36.         builder: (BuildContext context) {
    37.           return Container(
    38.             decoration: const BoxDecoration(
    39.                 color: Colors.white,
    40.                 borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15))
    41.             ),
    42.             height: ScreenAdapter.height(400),
    43.             child: Column(
    44.               children: [
    45.                 Container(padding: EdgeInsets.all(ScreenAdapter.height(40)),child:  Text(textAlign:TextAlign.center,"保存照片到相册",maxLines:2,style: TextStyle(color: const Color.fromRGBO(102, 102, 102, 1),fontSize: ScreenAdapter.size(25)),),),
    46.                 Divider(height: ScreenAdapter.height(0.5)),
    47.                 InkWell(
    48.                   child:Padding(padding: EdgeInsets.all(ScreenAdapter.height(18)),child: Center(child: Text("保存照片",style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.size(30)),),),),
    49.                   onTap: () async{
    50.                     _saveImage();
    51.                     Navigator.pop(context);
    52.                   },
    53.                 ),
    54.                 Container(color: const Color.fromRGBO(245, 245, 245,1),height: ScreenAdapter.height(15)),
    55.                 InkWell(
    56.                   onTap: (){
    57.                     Navigator.pop(context);
    58.                   },
    59.                   child:Padding(padding:  EdgeInsets.fromLTRB(ScreenAdapter.width(0),ScreenAdapter.height(10),ScreenAdapter.width(0),ScreenAdapter.height(15)),child:  Text("取消",style: TextStyle(color: const Color.fromRGBO(51, 51, 51, 1),fontSize: ScreenAdapter.size(30)),)),),
    60.               ],
    61.             ),
    62.           );
    63.         });
    64.  
    65.   }
    66.  
    67.   @override
    68.   Widget build(BuildContext context) {
    69.     return Scaffold(
    70.       backgroundColor: Colors.black87,
    71.       body: GestureDetector(
    72.         child: Center(
    73.             child: PhotoView(
    74.           imageProvider: NetworkImage(imageUrl),
    75.         )),
    76.         onTap: () {
    77.           Navigator.pop(context);
    78.         },
    79.         //长摁弹出保存照片界面
    80.         onLongPress: (){
    81.           _showSaveVideoWidget(context);
    82.         },
    83.       ),
    84.     );
    85.   }
    86. }

    显示及保存视频组件代码

    1. import 'package:dio/dio.dart';
    2. import 'package:flutter/material.dart';
    3. import 'package:fluttertoast/fluttertoast.dart';
    4. import 'package:image_gallery_saver/image_gallery_saver.dart';
    5. import 'package:new_chat/service/screen_adapter.dart';
    6. import 'package:new_chat/widget/toast_widget.dart';
    7. import 'package:path_provider/path_provider.dart';
    8. import 'package:uuid/uuid.dart';
    9. import 'package:video_player/video_player.dart';
    10.  
    11. class FullVideoWidget extends StatefulWidget {
    12.   final String videoUrl;
    13.  
    14.   const FullVideoWidget({Key? key, required this.videoUrl}) : super(key: key);
    15.  
    16.   @override
    17.   State createState() => _FullVideoWidgetState();
    18. }
    19.  
    20. class _FullVideoWidgetState extends State<FullVideoWidget> {
    21.   late VideoPlayerController _controller;
    22.  
    23.   //视频总时长
    24.   String videoPlayerEndTime = "";
    25.  
    26.   //视频正在播放的时长
    27.   String videoPlayerTime = "";
    28.  
    29.   @override
    30.   void initState() {
    31.     _controller = VideoPlayerController.network(widget.videoUrl)
    32.       ..initialize().then((_) {
    33.         setState(() {
    34.           _controller.play();
    35.         });
    36.       });
    37.     _controller.addListener(() {
    38.       setState(() {
    39.         //拼接视频总时长
    40.         int endMinutes = _controller.value.duration.inMinutes;
    41.         //不足2位补0
    42.         var endMinutesPadLeft = endMinutes.toString().padLeft(2,"0");
    43.         int endSeconds = _controller.value.duration.inSeconds;
    44.         var endSecondsPadLeft = endSeconds.toString().padLeft(2,"0");
    45.         videoPlayerEndTime = "$endMinutesPadLeft:$endSecondsPadLeft";
    46.         int videoPlayerMinutes = _controller.value.position.inMinutes;
    47.         var videoPlayerMinutesPadLeft = videoPlayerMinutes.toString().padLeft(2,"0");
    48.         int videoPlayerSeconds = _controller.value.position.inSeconds;
    49.         var videoPlayerSecondsPadLeft = videoPlayerSeconds.toString().padLeft(2,"0");
    50.         videoPlayerTime = "$videoPlayerMinutesPadLeft:$videoPlayerSecondsPadLeft";
    51.       });
    52.     });
    53.     super.initState();
    54.   }
    55.  
    56.   @override
    57.   void dispose() {
    58.     _controller.dispose();
    59.     super.dispose();
    60.   }
    61.  
    62.   //保存视频
    63.   _saveVideo() async {
    64.     var appDocDir = await getTemporaryDirectory();
    65.     String savePath = "${appDocDir.path}+${const Uuid().v4()}/temp.mp4";
    66.     await Dio().download(widget.videoUrl, savePath);
    67.     final result = await ImageGallerySaver.saveFile(savePath);
    68.     if(result['isSuccess']){
    69.       ToastWidget.showToast("视频保存成功", ToastGravity.CENTER);
    70.     }
    71.   }
    72.  
    73.   //长摁保存视频组件
    74.   _showSaveVideoWidget(BuildContext context) async {
    75.     showModalBottomSheet(
    76.         context: context,
    77.         isDismissible: true,
    78.         isScrollControlled: false,
    79.         shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))),
    80.         builder: (BuildContext context) {
    81.           return Container(
    82.             decoration: const BoxDecoration(
    83.                 color: Colors.white,
    84.                 borderRadius: BorderRadius.only(topLeft: Radius.circular(15),topRight: Radius.circular(15))
    85.             ),
    86.             height: ScreenAdapter.height(400),
    87.             child: Column(
    88.               children: [
    89.                 Container(padding: EdgeInsets.all(ScreenAdapter.height(40)),child:  Text(textAlign:TextAlign.center,"保存视频到相册",maxLines:2,style: TextStyle(color: const Color.fromRGBO(102, 102, 102, 1),fontSize: ScreenAdapter.size(25)),),),
    90.                 Divider(height: ScreenAdapter.height(0.5)),
    91.                 InkWell(
    92.                   child:Padding(padding: EdgeInsets.all(ScreenAdapter.height(18)),child: Center(child: Text("保存视频",style: TextStyle(color: Colors.red,fontSize: ScreenAdapter.size(30)),),),),
    93.                   onTap: () async{
    94.                     _saveVideo();
    95.                     Navigator.pop(context);
    96.                   },
    97.                 ),
    98.                 Container(color: const Color.fromRGBO(245, 245, 245,1),height: ScreenAdapter.height(15)),
    99.                 InkWell(
    100.                   onTap: (){
    101.                     Navigator.pop(context);
    102.                   },
    103.                   child:Padding(padding:  EdgeInsets.fromLTRB(ScreenAdapter.width(0),ScreenAdapter.height(10),ScreenAdapter.width(0),ScreenAdapter.height(15)),child:  Text("取消",style: TextStyle(color: const Color.fromRGBO(51, 51, 51, 1),fontSize: ScreenAdapter.size(30)),)),),
    104.               ],
    105.             ),
    106.           );
    107.         });
    108.  
    109.   }
    110.  
    111.   @override
    112.   Widget build(BuildContext context) {
    113.     ScreenAdapter.init(context);
    114.     return Scaffold(
    115.       backgroundColor: Colors.black87,
    116.       body: GestureDetector(
    117.         onLongPress: ()async {
    118.           //长摁弹出保存视频界面
    119.           await _showSaveVideoWidget(context);
    120.         },
    121.         child:  Stack(
    122.         children: [
    123.           //视频内容
    124.           Align(
    125.             child: Container(
    126.               child: _controller.value.isInitialized
    127.                   ? AspectRatio(
    128.                 aspectRatio: _controller.value.aspectRatio,
    129.                 child: VideoPlayer(_controller),
    130.               )
    131.                   : Container(),
    132.             ),
    133.           ),
    134.           //播放暂定和播放进度条和视频时间
    135.           Container(
    136.             margin: EdgeInsets.only(bottom: ScreenAdapter.height(200)),
    137.             child: Align(
    138.                 alignment: Alignment.bottomCenter,
    139.                 child: Row(
    140.                   mainAxisAlignment: MainAxisAlignment.start,
    141.                   children: [
    142.                     Container(
    143.                       padding:
    144.                       EdgeInsets.only(left: ScreenAdapter.width(20)),
    145.                       child: GestureDetector(
    146.                         onTap: () {
    147.                           _controller.value.isPlaying
    148.                               ? _controller.pause()
    149.                               : _controller.play();
    150.                         },
    151.                         child: Icon(
    152.                           _controller.value.isPlaying
    153.                               ? Icons.pause_outlined
    154.                               : Icons.play_arrow,
    155.                           color: Colors.white,
    156.                           size: ScreenAdapter.size(60),
    157.                         ),
    158.                       ),
    159.                     ),
    160.                     Container(
    161.                       padding:
    162.                       EdgeInsets.only(left: ScreenAdapter.width(40)),
    163.                       child: Text(
    164.                         videoPlayerTime,
    165.                         style: const TextStyle(color: Colors.white),
    166.                       ),
    167.                     ),
    168.                     Expanded(
    169.                       flex: 1,
    170.                       child: VideoProgressIndicator(
    171.                         _controller,
    172.                         allowScrubbing: true,
    173.                         colors: const VideoProgressColors(
    174.                             playedColor: Colors.white,
    175.                             bufferedColor: Colors.white10,
    176.                             backgroundColor: Colors.black26),
    177.                         padding: EdgeInsets.fromLTRB(
    178.                             ScreenAdapter.width(20),
    179.                             0,
    180.                             ScreenAdapter.width(20),
    181.                             0),
    182.                       ),
    183.                     ),
    184.                     Container(
    185.                       padding:
    186.                       EdgeInsets.only(right: ScreenAdapter.width(50)),
    187.                       child: Text(
    188.                         videoPlayerEndTime,
    189.                         style: const TextStyle(color: Colors.white),
    190.                       ),
    191.                     ),
    192.                   ],
    193.                 )),
    194.           ),
    195.           //关闭视频按钮
    196.           Align(
    197.             alignment: Alignment.bottomLeft,
    198.             child:Container(
    199.               padding: EdgeInsets.fromLTRB(ScreenAdapter.width(20),0,0,ScreenAdapter.height(100)),
    200.               child:  GestureDetector(
    201.                 onTap: (){
    202.                   Navigator.pop(context);
    203.                 },
    204.                 child: Icon(Icons.cancel,color: Colors.white,size: ScreenAdapter.size(60),),
    205.               ),),),
    206.           //视频保存按钮
    207.           Align(
    208.             alignment: Alignment.bottomRight,
    209.             child:Container(
    210.               padding: EdgeInsets.fromLTRB(0,0,ScreenAdapter.width(20),ScreenAdapter.height(100)),
    211.               child:  GestureDetector(
    212.                 onTap: () async{
    213.                   _saveVideo();
    214.                 },
    215.                 child: Icon(Icons.download_for_offline,color: Colors.white,size: ScreenAdapter.size(60),),
    216.               ),),),
    217.         ],
    218.       ),)
    219.     );
    220.   }
    221. }

    视频演示

    语音聊天优化&照片及视频发送和保存到相册配套视频

  • 相关阅读:
    Python基础095：Python读取PDF中的字符
    十八章总结
    SpringCloud与SpringBoot的版本对应
    接雨水-热题 100？-Lua 中文代码解题第4题
    Apache DolphinScheduler新一代分布式工作流任务调度平台实战-上
    NIO学习
    【组成原理-总线】总线的概念和计算
    hystrix断路器
    7_JS关于数据代理_Object.defineProperty_Vue数据代理_双向绑定
    Gemmini测试test文件chisel源码详解（四）
  • 原文地址：https://blog.csdn.net/u013600907/article/details/126605160