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

 详情请查看

效果图：

详情请参考 Flutter高仿微信-第29篇-单聊 ， 这里只是提取小视频的部分代码。

实现代码：

//我的转账
Widget meTransferWidget(){return GestureDetector(onTap: (){//点击转账Navigator.push(context, MaterialPageRoute(builder: (context) => TransferDetails(toUser: widget.otherUserBean?.account??"", balance: double.parse(widget.chatBean?.content??""), messageId: widget.chatBean?.messageId??"")));},child: Container(child: Stack(children: [meRedpacketBackground(),Positioned(left: 20, top: 20,child:CommonUtils.getBaseIconPng("wc_chat_transfer_icon", width: 40, height: 40),),Positioned(left: 70, top: 14,child: Text("￥${double.parse(widget.chatBean.content??'0').toStringAsFixed(2)}", style: TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold),),),Positioned(left: 70, top: 40,child: Text("你发起了一笔转账", style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.bold),),),Positioned(left: 70, top: 54,child: Container(margin: EdgeInsets.only(top:10),width: 120,height: 1,color: Colors.white,),),Positioned(left: 20, bottom: 14,child:Text("私人转账", style: TextStyle(fontSize: 12, color: Colors.white38),),),],),),);
}

//朋友的转账
Widget toTransferWidget(){return GestureDetector(onTap: (){_processTransferDetails();},child: Opacity(opacity: widget.chatBean.isClick == 1 ? 0.6 :1,child: Container(child: Stack(children: [toRedpacketBackground(),Positioned(left: 42, top: 20,child:CommonUtils.getBaseIconPng("wc_chat_transfer_icon", width: 40, height: 40),),Positioned(left: 98, top: 14,child: Text("￥${double.parse(widget.chatBean.content??'0').toStringAsFixed(2)}", style: TextStyle(fontSize: 18, color: Colors.white, fontWeight: FontWeight.bold),),),Positioned(left: 98, top: 40,child: Text(widget.chatBean.isClick == 1?'已收款':'请收款', style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.bold),),),Positioned(left: 98, top: 54,child: Container(margin: EdgeInsets.only(top:10),width: 120,height: 1,color: Colors.white,),),Positioned(left: 38, bottom: 14,child:Text("私人转账", style: TextStyle(fontSize: 12, color: Colors.white38),),),],),),),);
}

/*** Author : wangning* Email : maoning20080809@163.com* Date : 2022/11/4 16:37* Description : 转账详情*/class TransferDetails extends StatefulWidget {double balance;String messageId;String toUser;TransferDetails({required this.toUser, required this.balance, required this.messageId});@overrideState createState() => _TransferDetailsState();}class _TransferDetailsState extends State{//用户信息UserBean? _userBean;ChatBean? _chatBean;String account = SpUtils.getAccount();//是否隐藏底部按钮bool isHideReceiveButton = true;//显示icon图标String iconPath = "wc_transfer_time";//收款名称提示String nameTip = "";//收款成功返回的金额double resultBalance = 0;@overridevoid initState() {super.initState();_init();}void _init() async {_userBean = await UserRepository.getInstance().findUserByAccount(widget.toUser);_chatBean = await ChatRepository.getInstance().findChatByMessageId(widget.messageId);if(account == widget.toUser){if(_chatBean?.isClick == 1){//已收款iconPath = "wc_transfer_time_complete";nameTip = "已收款";isHideReceiveButton = true;} else {//待你收款nameTip = "待你收款";iconPath = "wc_transfer_time";isHideReceiveButton = false;}} else {iconPath = "wc_transfer_time";nameTip = "待${_userBean?.nickName??''}收款";isHideReceiveButton = true;}setState(() {});}//处理收款void _processReceive(double balance) async {//判断网络bool isNetwork = await CommonNetwork.isNetwork();if(!isNetwork) {CommonUtils.showNetworkError(context);return;}//判断金额if(!CommonUtils.judgeBalance(context, "${balance}")){return;}LoadingDialogUtils.showLoadingDialog(context, msg: "正在加载...");int operator = CommonUtils.USER_OPERATOR_PLUS;BaseResult baseResult = await UserRepository.getInstance().updateBalanceServer(account, operator, balance);LoadingDialogUtils.dimissLoadingDialog(context);if(baseResult.isSuccess!){resultBalance = double.parse(baseResult.data.toString());UserRepository.getInstance().updateBalance(account, resultBalance);ChatRepository.getInstance().updateChatRedPacketStatus(widget.messageId, 1);_init();} else {Navigator.pop(context);}}@overrideWidget build(BuildContext context) {return WillPopScope(child: Scaffold(appBar: WnAppBar.getAppBar(context, const Text("转账"), type:WnAppBar.TYPE_TRANSFER , clickBack: (){Navigator.pop(context, resultBalance);}),body: Container(child: Column(children: [iconWidget(),nameWidget(),balanceWidget(),lineWidget(),timeWidget(),const Expanded(child: Text("")),receiveWidget(),],),),),onWillPop: () async {Navigator.pop(context, resultBalance);return false;});}Widget iconWidget(){return Container(margin: EdgeInsets.only(top: 50),child: CommonUtils.getBaseIconPng(iconPath, width: 60, height: 60),);}Widget nameWidget(){return Container(margin: EdgeInsets.only(top: 20,),child: Text(nameTip, style: TextStyle(fontSize: 20),),);}Widget balanceWidget(){return Container(margin: EdgeInsets.only(top: 20),child: Text("￥${widget.balance}", style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),),);}//横线Widget lineWidget(){return Container(width: double.infinity,height: 0.5,margin: EdgeInsets.only(left:12, top: 30, right: 12),color: Colors.grey.shade600,);}//转账时间Widget timeWidget(){String addTime = _chatBean?.addTime??"";return Container(margin: EdgeInsets.only(left:12, top: 20, right: 12),child: Row(children: [Text("转账时间"),Expanded(child: Text("")),Text(addTime),],),);}//收款按钮Widget receiveWidget(){return Offstage(offstage: isHideReceiveButton,child: Container(margin: EdgeInsets.only(bottom: 30),child: ElevatedButton(style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Color(0xff05C160)),shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30))),),onPressed: (){_processReceive(widget.balance);},child: Container(decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(30)),),alignment: AlignmentDirectional.center,width: 200,height: 60,child: Text("收款", style: TextStyle(fontSize: 22, color: Colors.white),),)),),);}}