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});
@override
State<StatefulWidget> createState() => _TransferDetailsState();
}
class _TransferDetailsState extends State<TransferDetails>{
//用户信息
UserBean? _userBean;
ChatBean? _chatBean;
String account = SpUtils.getAccount();
//是否隐藏底部按钮
bool isHideReceiveButton = true;
//显示icon图标
String iconPath = "wc_transfer_time";
//收款名称提示
String nameTip = "";
//收款成功返回的金额
double resultBalance = 0;
@override
void 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);
}
}
@override
Widget 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),),
)
),
),
);
}
}
