Flutter高仿微信-第16篇-朋友圈-发布作品(图片)

Flutter高仿微信系列共59篇，从Flutter客户端、Kotlin客户端、Web服务器、数据库表结构、Xmpp即时通讯服务器、视频通话服务器、腾讯云服务器全面讲解。

详情请查看

效果图：

实现代码：

/*** Author : wangning* Email : maoning20080809@163.com* Date : 2022/10/22 21:51* Description : 朋友圈发布*/class MomentsPublishWidget extends StatefulWidget {final type;//多张图片final List<String> imageList;//小视频地址final videoFilePath;//小视频缩略图String thumbnailFileName = "";MomentsPublishWidget({required this.type, required this.imageList , required this.videoFilePath});@overrideState<StatefulWidget> createState() => _MomentsPublishState();}class _MomentsPublishState extends State<MomentsPublishWidget> {@overridevoid initState() {super.initState();initVideo();}void initVideo() async {if(widget.type == CommonUtils.MOMENTS_TYPE_VIDEO){widget.thumbnailFileName = await FileUtils.getBaseFile("thum_${DateUtil.getNowDateMs()}.png");await VideoThumbnail.thumbnailFile(video: widget.videoFilePath, thumbnailPath: widget.thumbnailFileName);LogUtils.d("生成缩略图：${widget.thumbnailFileName}");setState(() {});}}TextEditingController? _contentController = TextEditingController(text: "");//发布作品void _publish() async {bool isNetwork = await CommonNetwork.isNetwork();if(!isNetwork) {CommonUtils.showNetworkError(context);return;}LoadingDialogUtils.showLoadingDialog(context, msg: "正在发布,请稍后...");String account = SpUtils.getAccount();String content = _contentController?.text??"";MomentsBean? momentsBean;if(widget.type == CommonUtils.MOMENTS_TYPE_PICTURE){momentsBean = await MomentsRepository.getInstance().uploadMomentImages(widget.type, account, content, widget.imageList);} @overrideWidget build(BuildContext context) {return Scaffold(appBar: WnAppBar.getAppBar(context, Text("发布作品")),body: Column(mainAxisAlignment: MainAxisAlignment.start,children: [getContentWidget(),Expanded(child: Container(margin: EdgeInsets.only(left: 12, right: 12),alignment: AlignmentDirectional.topStart,child: widget.type == CommonUtils.MOMENTS_TYPE_PICTURE?getImageGridView():getCommonThumbnail(0),),),Container(margin: EdgeInsets.only(bottom: 20),child: ElevatedButton(onPressed: (){_publish();},child: Container(padding: EdgeInsets.only(left: 12, top: 6, right: 12, bottom: 6),child: Text("发布", style: TextStyle(fontSize: 20),),)),),],));}//显示图片九宫格Widget getImageGridView(){return GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,childAspectRatio: 1,),itemCount: widget.imageList.length,itemBuilder: (context, index){return InkWell(onTap: (){},child: Container(alignment: Alignment.center,margin: EdgeInsets.only(left: 3, top: 6, right: 3),child: CommonUtils.showBaseImage(widget.imageList[index], width:AppManager.getInstance().getWidth(context)/3, height:AppManager.getInstance().getWidth(context)/3, onPressed: (data){Navigator.push(context,MaterialPageRoute(builder: (context)=>CommonImagePreview(fileName: data,)));}),),);},);}//输入框Widget getContentWidget(){return Container(margin: EdgeInsets.all(12),child: TextField(maxLines: 5,controller: _contentController,cursorColor: Colors.black,decoration: InputDecoration(//border: InputBorder.none,border: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10)),),//labelText: defaultValue,hintText: "这一刻的想法...",hintStyle: TextStyle(fontSize: 16,color: Colors.grey.withOpacity(0.8),),),),);}}

Flutter高仿微信-第16篇-朋友圈-发布作品(图片)相关推荐

Kotlin高仿微信-第26篇-朋友圈-选择图片、小视频对话框
Kotlin高仿微信-项目实践58篇详细讲解了各个功能点,包括:注册.登录.主页.单聊(文本.表情.语音.图片.小视频.视频通话.语音通话.红包.转账).群聊.个人信息.朋友圈.支付服务.扫一扫.搜 ...
Flutter高仿微信-第47篇-群聊-语音
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 详情 ...
Flutter高仿微信-第31篇-单聊-表情
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 详情请 ...
Flutter高仿微信-第46篇-群聊-表情
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 详情请 ...
Flutter高仿微信-第32篇-单聊-语音
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 详情请 ...
Flutter高仿微信-第36篇-单聊-语音通话
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 目前市 ...
Flutter高仿微信-第48篇-群聊-图片
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 详情 ...
Flutter高仿微信-第26篇-新的朋友
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 实现代 ...
Flutter高仿微信-第57篇-添加好友
Flutter高仿微信系列共59篇,从Flutter客户端.Kotlin客户端.Web服务器.数据库表结构.Xmpp即时通讯服务器.视频通话服务器.腾讯云服务器全面讲解. 详情请查看效果图: 实现 ...

Flutter高仿微信-第16篇-朋友圈-发布作品(图片)

Flutter高仿微信-第16篇-朋友圈-发布作品(图片)相关推荐

最新文章

热门文章