Flutter移动应用开发 - 转账中心界面（模仿微信支付界面和支付记录）

最新推荐文章于 2024-06-01 09:45:28 发布
最新推荐文章于 2024-06-01 09:45:28 发布
阅读量391 收藏 1
点赞数 1
分类专栏： # Flutter 移动应用开发 文章标签： flutter 微信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hjh1906008151/article/details/128763683
版权

目录

0. 项目简介

项目想法脱胎于2023年服务外包大赛A18题 随手买（详情）

整个APP思路如下：

在这里插入图片描述

这篇博客主要服务于管司机界面的司机盈利和提现记录功能。

1. 效果展示

在这里插入图片描述

2. 代码

依赖如下

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  // 下边提示
  fluttertoast: ^4.0.1

相关文件如下

drivermoney.dart

drivermoney.dart

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '',
      home: drivermoney(),
    );
  }
}


class _RecentEarn {
  _RecentEarn({
    required this.name,
    required this.time,
    required this.money,
  });

  final String name;
  final String time;
  final String money;
}
class _RecentGet {
  _RecentGet({
    required this.name,
    required this.time,
    required this.money,
  });

  final String name;
  final String time;
  final String money;
}

List<_RecentEarn> earn = [
  _RecentEarn(
    name: "统一阿萨姆奶茶1个",
    time: "2022-12-31 12:34",
    money: "+0.32",
  ),
  _RecentEarn(
    name: "Twizzlers Twists扭扭糖1个",
    time: "2022-12-31 12:24",
    money: "+0.42",
  ),
  _RecentEarn(
    name: "我也不知道是啥牌子充电宝1个",
    time: "2022-12-31 11:54",
    money: "+6.19",
  ),
  _RecentEarn(
    name: "统一阿萨姆奶茶1个",
    time: "2022-12-31 11:43",
    money: "+0.32",
  ),
  _RecentEarn(
    name: "统一阿萨姆奶茶1个",
    time: "2022-12-31 11:24",
    money: "+0.32",
  ),
  _RecentEarn(
    name: "Gucci同名经典男士香水100ml1个",
    time: "2022-12-30 0:12",
    money: "+30.99",
  ),
];
List<_RecentGet> gett = [
  _RecentGet(
    name: "支付宝提现",
    time: "2022-12-12 13:10",
    money: "-143.94",
  ),
  _RecentGet(
    name: "支付宝提现",
    time: "2022-12-01 03:24",
    money: "-597.48",
  ),
  _RecentGet(
    name: "中国农业银行(*4888)提现",
    time: "2022-10-28 14:10",
    money: "-458.91",
  ),
  _RecentGet(
    name: "中国农业银行(*4888)提现",
    time: "2022-10-2 13:57",
    money: "-21.43",
  ),
  _RecentGet(
    name: "中国农业银行(*4888)提现",
    time: "2022-10-1 11:24",
    money: "-1755.78",
  ),
];

class drivermoney extends StatefulWidget {
  const drivermoney({Key? key}) : super(key: key);

  @override
  State<drivermoney> createState() => _drivermoneyState();
}


class _drivermoneyState extends State<drivermoney> {




  Widget name_line = Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          CircleAvatar(
            backgroundImage: AssetImage('assets/images/none.png'),
            radius: 35,
          ),
          Text(
            "     Lavander",
            style: TextStyle(
              color: Colors.blueGrey,
              fontWeight: FontWeight.w900,
              fontSize: 17,
            ),
          ),
        ],
      ),
      Text(
        "周窿蘋    ",
        style: TextStyle(
          color: Colors.grey,
          fontSize: 15
        ),
      ),
    ],
  );

  Widget moneyCard = Card(
    shape: RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(10)),
    elevation: 3,
    color: Color.fromRGBO(4, 197, 161, 1.0),
    child: SizedBox(
      width: 350,
      height: 190,
      child: Padding(
        padding: EdgeInsets.fromLTRB(25, 20, 20, 10),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "可提现现金/元",
                  style: TextStyle(
                    color: Colors.white70,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  )
                ),
                Icon(
                  Icons.help_outline,
                  color: Colors.white70,
                )
              ],
            ),
            SizedBox(
              height: 15,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "25,992",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 40,
                    fontWeight: FontWeight.w900,
                  ),
                ),
                ElevatedButton(
                  onPressed: (){
                    Fluttertoast.showToast(
                      msg: "支付宝协议没通过，结算功能失效",
                      toastLength: Toast.LENGTH_SHORT,
                      gravity: ToastGravity.BOTTOM,
                    );
                  },
                  style: ButtonStyle(
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(30))),
                    backgroundColor: MaterialStateProperty.all(Colors.white),
                  ),
                  child: Text(
                    "  提现  ",
                    style: TextStyle(
                      color: Color.fromRGBO(26, 248, 180, 1.0),
                      fontSize: 18,
                      fontWeight: FontWeight.w700,
                    ),
                  )
                )
              ],
            ),
            SizedBox(
              height: 25,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Center(
                  child: Column(
                    children: [
                      Text(
                        "总收益/元",
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Text(
                        "3,176.00",
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  width: 2,
                  height: 40,
                  child: DecoratedBox(
                    decoration: BoxDecoration(color: Colors.white70),
                  ),
                ),
                Center(
                  child: Column(
                    children: [
                      Text(
                        "总收益/元",
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Text(
                        "3,176.00",
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
                SizedBox(
                  width: 2,
                  height: 40,
                  child: DecoratedBox(
                    decoration: BoxDecoration(color: Colors.white70),
                  ),
                ),
                Center(
                  child: Column(
                    children: [
                      Text(
                        "总收益/元",
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                      Text(
                        "3,176.00",
                        style: TextStyle(
                          color: Colors.white70,
                          fontSize: 14,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    ),

  );

  Widget tabbar = DefaultTabController(
    length: 2,
    child: Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
          return <Widget>[
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(
                backgroundColor: Colors.transparent,
                elevation: 0,
                pinned: true,
                forceElevated: innerBoxIsScrolled,
                bottom:
                PreferredSize(
                  child:
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          topRight: Radius.circular(30),
                        ),
                        color: Colors.teal,
                      ),
                      child: const TabBar(
                        indicatorColor: Colors.teal,//选中下划线颜色,如果使用了indicator这里设置无效
                        labelColor: Colors.white30,
                        unselectedLabelColor: Colors.white12,
                        labelStyle: TextStyle(fontSize: 18, color: Colors.indigo,),
                        unselectedLabelStyle: TextStyle(fontSize: 16, color: Colors.grey),
                        indicatorWeight: 3,
                        tabs: [
                          Tab(
                            text: "总收益明细",
                          ),
                          Tab(
                            text: "提现记录",
                          ),
                        ],
                      ),
                    ),
                    // 悬浮框锁定高度
                    preferredSize: Size(double.infinity, 0.0)
                ),
              ),
            )
          ];
        },
        body:
          TabBarView(
            children: [
              SafeArea(
                top: false,
                bottom: false,
                child: Builder(
                  builder: (BuildContext context){
                    return CustomScrollView(
                      ///反弹效果
                      physics: BouncingScrollPhysics(),
                      slivers: <Widget>[
                        SliverOverlapInjector(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
                        SliverPadding(
                          padding: const EdgeInsets.symmetric(
                            vertical: 10.0,
                            horizontal: 0.0,
                          ),
                          sliver: SliverFixedExtentList(
                            itemExtent: 85,
                            delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index){
                                final _RecentEarn data = earn[index];
                                return Column(
                                  children: [
                                    Padding(
                                      padding: EdgeInsets.fromLTRB(20, 0, 10, 15),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Column(
                                            crossAxisAlignment: CrossAxisAlignment.start,
                                            mainAxisAlignment: MainAxisAlignment.start,
                                            children:[
                                              Text(
                                                "${data.name}",
                                                style: TextStyle(
                                                  color: Colors.grey,
                                                  fontSize: 16,
                                                ),
                                              ),
                                              // Text(
                                              //   "  ",
                                              //   style: TextStyle(
                                              //     height: 5,
                                              //   ),
                                              // ),
                                              Text(
                                                "${data.time}",
                                                style: TextStyle(
                                                  color: Colors.grey,
                                                fontSize: 14,
                                              ),
                                            ),
                                          ]
                                        ),
                                          Text(

                                            "${data.money}",
                                            textAlign:TextAlign.left,
                                            style: TextStyle(
                                              color: Color.fromRGBO(3, 16, 96, 1.0),
                                              fontSize: 22,
                                            ),
                                          ),
                                        ],
                                      )
                                    ),
                                    Divider(
                                      color: Colors.grey,
                                      thickness: 1,
                                    ),
                                  ],
                                );
                              },
                              childCount: earn.length,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              ),
              SafeArea(
                top: false,
                bottom: false,
                child: Builder(
                  builder: (BuildContext context){
                    return CustomScrollView(
                      ///反弹效果
                      physics: BouncingScrollPhysics(),
                      slivers: <Widget>[
                        SliverOverlapInjector(handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)),
                        SliverPadding(
                          padding: const EdgeInsets.symmetric(
                            vertical: 10.0,
                            horizontal: 0.0,
                          ),
                          sliver: SliverFixedExtentList(
                            itemExtent: 80,
                            delegate: SliverChildBuilderDelegate(
                                  (BuildContext context, int index){
                                final _RecentGet data = gett[index];
                                return Column(
                                  children: [
                                    Padding(
                                        padding: EdgeInsets.fromLTRB(20, 0, 10, 10),
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: [
                                            Column(
                                                crossAxisAlignment: CrossAxisAlignment.start,
                                                mainAxisAlignment: MainAxisAlignment.start,
                                                children:[
                                                  Text(
                                                    "${data.name}",
                                                    style: TextStyle(
                                                      color: Colors.grey,
                                                      fontSize: 16,
                                                    ),
                                                  ),
                                                  // Text(
                                                  //   "  ",
                                                  //   style: TextStyle(
                                                  //     height: 5,
                                                  //   ),
                                                  // ),
                                                  Text(
                                                    "${data.time}",
                                                    style: TextStyle(
                                                      color: Colors.grey,
                                                      fontSize: 14,
                                                    ),
                                                  ),
                                                ]
                                            ),
                                            Text(
                                              "${data.money}",
                                              style: TextStyle(
                                                color: Color.fromRGBO(3, 16, 96, 1.0),
                                                fontSize: 22,
                                              ),
                                            ),
                                          ],
                                        )
                                    ),
                                    Divider(
                                      color: Colors.grey.shade400,
                                      thickness: 1,
                                    ),
                                  ],
                                );
                              },
                              childCount: gett.length,
                            ),
                          ),
                        ),
                      ],
                    );
                  },
                ),
              )
            ],
          ),
      ),
    ),

  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   title: Text(
      //     "现金收益"
      //   ),
      // ),
      body: Center(
        child: Padding(
          padding: EdgeInsets.fromLTRB(30, 30, 30, 0),
          child: Column(
            children: [
              name_line,
              SizedBox(
                height: 10,
              ),
              moneyCard,
              Expanded(
                child:
                  tabbar,
              ),
            ],
          ),
        ),
      ),

    );
  }
}
铖铖的花嫁
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Flutter仿微信，支付宝密码输入框+自定义键盘
大灰狼的小绵羊哥哥的博客
06-20 2099
大家好，我又来了。 刚用Flutter做完一个金融项目，当中使用到了类似于微信，和支付宝的那种密码输入框，然后为了安全一点也自己实现了自定义的键盘，今天跟大家分享一波 效果如下图所示： Flutter自定义密码——键盘.jpg 当中的布局形式，大家可根据自己的具体需求来调整就好了，我这里写的demo是这样的布局，这个调整起来很简单（本来想弄成gif的，然而不会。。。）。 我们分析下这个东东，首先我们需要自定义好这个密码输入框，当我们在输入一个密码的时候，密码输入框就填充一位 ，这个过程其实我.
html模仿微信支付页面
04-05
html css jquery 模仿微信支付页面，用于微信公众号支付，展示微信支付页面。jquery微信支付代码
Flutter Paytm UI Demo - 打造无缝支付体验
最新发布
gitblog_00050的博客
06-01 330
Flutter Paytm UI Demo - 打造无缝支付体验 项目地址:https://gitcode.com/flutter-devs/flutter_paytm_clone 项目介绍 Flutter Paytm UI Demo 是一个精心设计的示例应用，为开发者展示了如何在Flutter平台上构建一个类似Paytm的支付界面。这个项目提供了清晰易懂的代码结构和逼真的用户体验，帮助开发者快速...
flutter 调用微信支付
lqw200931116的博客
03-29 7941
Fluwx是一个微信SDK插件，它允许开发者调用微信原生SDK. 分享图片，文本，音乐，视频等。支持分享到会话，朋友圈以及收藏. 微信支付. 在微信登录时，获取Auth Code. 拉起小程序. 订阅消息. 打开微信. 从微信标签打开应用 1、在pubspec.yaml添加依赖 # 微信SDK插件 fluwx: ^3.8.1+1 获取插件 flutter pub get 2、引入头文件 import 'package:fluwx/fluwx.dart' ...
如何在Flutter中实现支付功能？请解释一下支付宝和微信支付的集成方法
yuanlaile的博客
03-21 1247
支付宝支付比较复杂的就是服务端这块，客户端比较简单，获取服务器接口生成预支付信息，调用插件传入预支付信息就可以实现支付了。
flutter web微信h5支付接入
u010390748的博客
09-18 749
4.2 另一种在web目录下创建指定访问的目录，创建index.html，拼接#号重定向至指定页面。由于微信支付回调地址不支持#,而flutter生成的地址带有#,如何去除请参考我的另一篇博客。state.result是个 rxint值，用来刷新支付结果页的显示。回调的地址要访问的支付结果页有两种方式，任意一种都可以。//切记回调的地址不能携带# 微信不支持！5.支付结果页监听授权结果，并支付。3.支付弹窗点击支付时调用。
Flutter高仿微信-第21篇-支付-向商家付款(二维码)
maoning20080808的专栏
11-24 458
用户打开扫一扫功能，扫描向商家付款的二维码，付款成功后，会有动画提示收款金额。
Flutter 移动应用开发实战课程-视频教程网盘链接提取码下载.txt
11-03
Flutter移动应用开发实战课程是一个实用性强的课程，旨在教授学员如何使用Flutter框架开发高质量的移动应用。课程涵盖了Flutter的基础知识和核心概念，并通过实际项目实践帮助学员掌握Flutter的开发技巧和最佳实践。...
Flutter微信支付插件支持Android和iOS
08-10
在移动应用开发领域，Flutter作为Google推出的一种新型跨平台框架，因其高效、便捷的特性而备受开发者喜爱。本文将深入探讨如何在Flutter项目中集成微信支付功能，支持Android和iOS两大主流操作系统。我们将重点关注...
使用 Flutter 进行移动应用程序开发 - ijrpr.pdf
03-27
### 使用Flutter进行移动应用程序开发 #### 摘要与引言概述 本文主要探讨了使用Flutter框架进行移动应用开发的...未来，随着Flutter技术的不断演进和完善，我们有理由相信它将在移动应用开发领域发挥更重要的作用。
flutter_tiktok-master_flutter_fluttertiktok_抖音_抖音界面demo_
10-04
它涵盖了视频播放、列表滚动、用户交互等多个重要领域，是Flutter开发人员深入理解和实践移动应用开发的优秀案例。通过研究这个项目，开发者不仅可以掌握Flutter的基础知识，还能了解到如何构建复杂、动态的移动应用...
Flutter酒店预订界面-JavaScript开发
05-26
如果这是您的第一个Flutter项目，则有一些资源可帮助您入门：实验：编写您的第一个Flutter应用程序食谱：有用的Flutter示例为了帮助Flutter入门，请查看我们的在线文档，其中提供了教程，示例，移动开发指南，以及...
Flutter实现微信支付
m0_60317712的博客
04-23 501
【代码】Flutter实现微信。
Flutter实现微信支付和iOS IAP支付
bfhye16552的博客
04-17 993
现在随着短视频，抖音，快手的流行NDK模块开发也显得越发重要，需要这块人才的企业也越来越多，随之学习这块的人也变多了，音视频的开发，往往是比较难的，而这个比较难的技术就是NDK里面的技术。音视频/高清大图片/人工智能/直播/抖音等等这年与用户最紧密，与我们生活最相关的技术一直都在寻找最终的技术落地平台，以前是windows系统，而现在则是移动系统了，移动系统中又是以Android占比绝大部分为前提，所以AndroidNDK技术已经是我们必备技能了。
Flutter高仿微信-第38篇-单聊-转账
maoning20080808的专栏
11-25 358
好友发来的转账，点击查看详情，点击收款按钮后，请求服务器更新金额。如果成功，同时通知对方减少对应的金额。
【原创 附源码】Flutter集成Apple支付详细流程(附源码)
mumubumaopao的博客
02-14 3072
Flutter 集成apple支付详细流程
Flutter 支付宝支付iOS和安卓
shaoxiukun的博客
07-21 1878
2、安装（仅iOS），无需配置info.plist urlschemes，因为执行脚本已经配置好了。
Flutter实现微信支付和iOS IAP支付，高薪程序员必会
2301_79056696的博客
04-08 798
【Android 详细知识点思维脑图（技能树）】我个人是做Android开发，已经有十来年了，目前在某创业公司任职CTO兼系统架构师。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明 Android 中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪资真的特别高（钱多也不一定能找到合适的），所以努力让自己成为高级工程师才是最重要的。这里附上上述的面试题相关的几十套字节跳动，京东，小米，腾讯、头条、阿里、美团等公司19年的面试题。
flutter webview_flutter 支付宝微信支付
01-28
通过flutter的webview_flutter插件，我们可以在应用中嵌入支付宝和微信支付，并实现支付功能。使用webview_flutter的步骤如下： 1. 首先，在`pubspec.yaml`文件中引入webview_flutter插件。可以在dependencies部分...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铖铖的花嫁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值