Flutter高仿微信-第38篇-单聊-转账

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 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;

  @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),),
            )
        ),
      ),
    );
  }

}