flutter 仿微信朋友圈发布图片

最新推荐文章于 2025-09-26 15:58:30 发布

原创

最新推荐文章于 2025-09-26 15:58:30 发布 · 4.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#flutter仿微信朋友圈上传图片

本文介绍了如何在Flutter中仿造微信朋友圈的功能，包括选择图片、压缩图片和上传网络图片。涉及的关键组件有image_picker、flutter_image_compress和photo。通过使用这些插件，可以实现图片选择、压缩以及存储。调用时注意清理上次数据，防止残留。

控件类，
里面放了很多自己写的一些组件，所以有很多相机用不到的引用，
但为了防止误删一些引用，所有的都没有删除，如果拿去用，灰色的可以直接删掉即可，
另外也可以传网络图片进去显示，格式为：

    PhotoFrame(imagesShow:_imagesShow)；
    _imagesShow = [
			{id: 60, image: https://www.tricklen.com/publicImage/1bed62c0e9e7406795317f1b16e94632.jpg},
			 {id: 61, image: https://www.tricklen.com/publicImage/ed179d808682455e9cf8b8f0f9d40f08.jpg},
			  {id: 62, image: https://www.tricklen.com/publicImage/4015cf30afd94e60a3d3a5b2bd562827.jpg},
			   {id: 137, image: https://www.tricklen.com/publicImage/3046cc0f8d8746e7a0f3c70cb7add240.jpg},
			    {id: 138, image: https://www.tricklen.com/publicImage/5a668a7baae941a6ac826978ddbdf84e.jpg}
	];

其中，id为网图的id，是为了删除识别的需要


import 'package:flutter/material.dart';
import 'dart:math' as math;
import 'package:redenvelope/pages/extendBlackList/blackLiatDetails.dart';
import 'package:redenvelope/pages/extendBlackList/blackLiatDetails1.dart';
import 'package:redenvelope/constant/colors.dart';
import 'package:redenvelope/widget/UserImg.dart';
import 'package:fluttertoast/fluttertoast.dart'; //弹出框库
import 'package:image_picker/image_picker.dart'; //调用相机 相册
import 'package:dio/dio.dart';
import 'dart:io';
import 'package:photo/photo.dart'; //调用photo库
import 'package:photo_manager/photo_manager.dart';
import 'package:flutter_image_compress/flutter_image_compress.dart'; //图片压缩
import 'dart:async';
import 'package:redenvelope/constant/App.dart';
import 'package:redenvelope/widget/UserImg.dart';
import 'package:redenvelope/pages/extendBlackList/domeData.dart';

// 相机组件
class PhotoFrame extends StatefulWidget{
  var imagesShow;
  PhotoFrame({this.imagesShow});
  @override
  State<StatefulWidget> createState() {
    print("---------------图片是否传递---------------------");
    print(imagesShow);
    return new PhotoFrameState();
  }
}

class PhotoFrameState extends State<PhotoFrame> with WidgetsBindingObserver {

  List<Widget> _imageShow = [];

  // 获取的需要显示的数组
  List _imageUrlShow = [];

  var item; //数据封装

  Widget addImage;

  int index = 1;
  List<String> imageUrl = []; //存放偶像头像地址的数组

  File _image; //当前图片
  List<File> images = []; //记录所有图片
  List<Widget> ConList = []; //显示复数图片的数组
  List<UploadFileInfo> _rq = []; //FormData内传递的值


  // 单张相机取图片
  Future getImage() async {

    var image = await ImagePicker.pickImage(source: ImageSource.camera); //相机
    _image = image;

    print(_image);
    images.add(_image);
    ff();


  }

  // 多张连选取图
  void _pickImage() async {

    List<AssetEntity> imgList = await PhotoPicker.pickAsset(
      //需要BuildContext
      context: context,

      ///以下是可选参数。
      themeColor: AppColors.colorPrimary,
      //标题