Flutter移动应用开发 - 个人中心界面

最新推荐文章于 2023-06-23 18:16:44 发布
最新推荐文章于 2023-06-23 18:16:44 发布
阅读量807 收藏 5
点赞数 2
分类专栏： # Flutter 移动应用开发 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hjh1906008151/article/details/128763688
版权

目录

0. 项目简介

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

整个APP思路如下：

在这里插入图片描述

这篇博客主要服务于管理员界面的个人中心界面和乘客界面的个人中心界面。模仿淘宝的设置的设计，就是个壳子，目的是为了方便在点击后回到登陆界面切换账号和用户身份。

1. 管理员

1.1. 效果展示

在这里插入图片描述

1.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.
  flutter_screenutil: ^3.1.0

代码如下


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


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

  @override
  State<adminself> createState() => _adminselfState();
}

class _adminselfState extends State<adminself> {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, allowFontScaling: false);


    Widget namecard = Card(
      color: Colors.white,
      child: Container(
        child: Padding(
            padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
            child: Row(
                children: [
                  CircleAvatar(
                    backgroundImage: AssetImage('assets/images/hjh1.jpg'),
                    radius: 40,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("管理员1号", style: TextStyle(fontSize: 20, height: 1.5),),
                      Text("管理员工号：1129", style: TextStyle(fontSize: 14, color: Colors.grey))
                    ],
                  ),
                  Spacer(),
                  Icon(Icons.chevron_right),
                ]
            )
        ),
      ),
    );


    Widget choice = Column(
        children: [
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '我的档案',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),

            trailing: RichText(
              textDirection: TextDirection.ltr,
              text: TextSpan(
                children: <TextSpan>[
                  TextSpan(
                    text: "添加档案，获得精准推荐",
                    style: TextStyle(color: Colors.grey.withOpacity(1.0)),
                  ),
                  TextSpan(
                    text: "  > ",
                    style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(height: ScreenUtil().setHeight(20),),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '账号与安全',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),

          ),
          Divider(height: 1,),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '管理员权限',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),

            trailing: RichText(
              textDirection: TextDirection.ltr,
              text: TextSpan(
                children: <TextSpan>[
                  TextSpan(
                    text: "通知、删除数据",
                    style: TextStyle(color: Colors.grey.withOpacity(1.0)),
                  ),
                  TextSpan(
                    text: "  > ",
                    style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
                  ),
                ],
              ),
            ),

          ),
          SizedBox(height: ScreenUtil().setHeight(20),),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '隐私',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),

          ),
          Divider(height: 1,),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '通用',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),

          ),
          Divider(height: 1,),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '用户debug模式',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),

            trailing: RichText(
              textDirection: TextDirection.ltr,
              text: TextSpan(
                children: <TextSpan>[
                  TextSpan(
                    text: "管理员模式/用户模式",
                    style: TextStyle(color: Colors.grey.withOpacity(1.0)),
                  ),
                  TextSpan(
                    text: "  > ",
                    style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
                  ),
                ],
              ),
            ),
          ),
          SizedBox(height: ScreenUtil().setHeight(20),),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '帮助与反馈',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),

          ),
          Divider(height: 1,),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              '意见与建议',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
          ),
          SizedBox(height: ScreenUtil().setHeight(20),),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              textAlign: TextAlign.center,
              '切换账号',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
          ),
          SizedBox(height: ScreenUtil().setHeight(20),),
          ListTile(
            tileColor: Colors.white,
            title: const Text(
              textAlign: TextAlign.center,
              '退出登录',
              style: TextStyle(fontWeight: FontWeight.w500),
            ),
            onTap: (){
              Navigator.pushNamed(context,"login");
            },
          ),
        ]
    );

    Widget protocol = Text(
      "《证照信息》《平台服务协议》《个人信息共享清单》",
      style: TextStyle(
        fontSize: 12,
        color: Colors.blue.shade800,
      ),
    );


    return Scaffold(
      // appBar: AppBar(
      //   title: Text('个人中心', textAlign: TextAlign.center, style: TextStyle( color: Colors.black87),),
      //   centerTitle: true,
      //   backgroundColor: Colors.transparent,
      //   elevation: 0,
      // ),
      backgroundColor: Colors.grey.shade300,
      body: Column(
        children: [
          SizedBox(height: ScreenUtil().setHeight(40),),
          namecard,
          SizedBox(height: ScreenUtil().setHeight(20),),
          choice,
          SizedBox(height: ScreenUtil().setHeight(30),),
          protocol,
        ],
      ),
    );
  }
}

2. 乘客

2.1. 效果展示

在这里插入图片描述

2.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.
  flutter_screenutil: ^3.1.0

代码如下


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


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

  @override
  State<passengerself> createState() => _passengerselfState();
}

class _passengerselfState extends State<passengerself> {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, allowFontScaling: false);


    Widget namecard = Card(
      color: Colors.white,
      child: Container(
        child: Padding(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
          child: Row(
            children: [
              CircleAvatar(
                backgroundImage: AssetImage('assets/images/head.jpg'),
                radius: 40,
              ),
              SizedBox(
                width: 20,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("铖铖的公主", style: TextStyle(fontSize: 20, height: 1.5),),
                  Text("用户名：1234567890", style: TextStyle(fontSize: 14, color: Colors.grey))
                ],
              ),
              Spacer(),
              Icon(Icons.chevron_right),
            ]
          )
        ),
      ),
    );


    Widget choice = Column(
      children: [
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '我的档案',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
          trailing: RichText(
            textDirection: TextDirection.ltr,
            text: TextSpan(
              children: <TextSpan>[
                TextSpan(
                  text: "添加档案，获得精准推荐",
                  style: TextStyle(color: Colors.grey.withOpacity(1.0)),
                ),
                TextSpan(
                  text: "  > ",
                  style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: ScreenUtil().setHeight(20),),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '账号与安全',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
        ),
        Divider(height: 1,),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '支付',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
          trailing: RichText(
            textDirection: TextDirection.ltr,
            text: TextSpan(
              children: <TextSpan>[
                TextSpan(
                  text: "支付宝、微信、银行卡",
                  style: TextStyle(color: Colors.grey.withOpacity(1.0)),
                ),
                TextSpan(
                  text: "  > ",
                  style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
                ),
              ],
            ),
          ),

        ),
        SizedBox(height: ScreenUtil().setHeight(20),),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '隐私',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
        ),
        Divider(height: 1,),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '通用',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
        ),
        Divider(height: 1,),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '青少年模式',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
          trailing: RichText(
            textDirection: TextDirection.ltr,
            text: TextSpan(
              children: <TextSpan>[
                TextSpan(
                  text: "标准模式/长辈模式",
                  style: TextStyle(color: Colors.grey.withOpacity(1.0)),
                ),
                TextSpan(
                  text: "  > ",
                  style: TextStyle(color: Colors.black54, fontSize: 20, fontWeight: FontWeight.bold,),
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: ScreenUtil().setHeight(20),),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '帮助与反馈',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
        ),
        Divider(height: 1,),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            '商家入驻',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
          leading: Icon(
            Icons.restaurant_menu,
            color: Colors.blue[500],
          ),
        ),
        SizedBox(height: ScreenUtil().setHeight(20),),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            textAlign: TextAlign.center,
            '切换账号',
            style: TextStyle(fontWeight: FontWeight.w500),
          ),
        ),
        SizedBox(height: ScreenUtil().setHeight(20),),
        ListTile(
          tileColor: Colors.white,
          title: const Text(
            textAlign: TextAlign.center,
            '退出登录',
            style: TextStyle(fontWeight: FontWeight.w500),

          ),
          onTap: (){
            Navigator.pushNamed(context,"login");
          },
        ),
      ]
    );

    Widget protocol = Text(
      "《证照信息》《平台服务协议》《个人信息共享清单》",
      style: TextStyle(
        fontSize: 12,
        color: Colors.blue.shade800,
      ),
    );


    return Scaffold(
      appBar: AppBar(
        title: Text('个人中心', textAlign: TextAlign.center, style: TextStyle( color: Colors.black87),),
        centerTitle: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
      ),
      backgroundColor: Colors.grey.shade300,
      body: Column(
        children: [
          namecard,
          SizedBox(height: ScreenUtil().setHeight(20),),
          choice,
          SizedBox(height: ScreenUtil().setHeight(30),),
          protocol,
        ],
      ),
    );
  }
}
铖铖的花嫁
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
flutter-quiz-app:带有入职用户界面的Flutter编程测验应用
03-20
quiz_app_riverpod 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
头像上传/拍照/从相册选择（个人信息模块会用到）
07-27
个人信息中一般都会带有头像设置功能，本Demo是从我项目中拿出来的，在做个模块时遇到了许多问题，最后百度一一坚决了，虽不说是最好的，但也能应付基本功能了。 也许新手会遇到一个问题，在其它手机均没问题，但在小米3手机就是不行，后来发现利用绑定URI传递数据可以截取很大的图，但使用Data返回的话，截取大图会OOM，所以本Demo做了一些限定。 测试完美通过的有以下系统： 三星I8150的2.3系统， 三星Note3的4.3系统， 小米2s的4.1系统， 小米3的4.4.2系统。
flutter个人中心
sinat_33250050的博客
04-28 970
import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; class MemberPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: T.
flutter_template:制作新项目时的个人模板
03-19
NFlutter模板 该项目使用带有NullSafety支持的NFlutter模板（ ）！ 在开始之前，请使用这些插件来确保一切都已设置！ dio : 4.0.0-beta7 # Use nullsafety version provider : any shimmer : ^2.0.0-nullsafety.0 # Use nullsafety version cached_network_image : ^3.0.0-nullsafety # User nullsafety veresion shared_preferences : any ndialog : any 小工具的东西！ 定制分隔线 您可以使用ColumnDivider和RowDivider来使小部件之间RowDivider距离，默认间距为10（可以在customDivider.dart上进行更改
First-Flutter-Project-:这是个人资料页面
04-23
flutter_application_12 一个新的Flutter项目。 入门 该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门： 要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关移动开发的指南以及完整的API参考。
Flutter系列（十）实现个人中心页
摸金校尉的博客
06-23 1412
本文用flutter实现个人中心页布局
Flutter移动应用开发 - 个人简介界面（图片轮播，Card布局）
如果没有躺赢的命，那就站起来奔跑，你的努力一定会对得起这一路的颠沛流离。
02-07 389
项目想法脱胎于2023年服务外包大赛A18题 随手买（详情整个APP思路如下：这篇博客主要服务于个人简介界面，在登录界面点击指纹解锁按钮后进入本界面。本界面主要是在 Card widget 中加入图片轮播，主要涉及 FloatingActionButton 和 Text
FlutterMates：关于如何在Flutter中实现朋友列表和个人资料页面的快速示例应用程序
02-04
FlutterMates 所有代码都位于：不需要Android / iOS特定代码。 我们内部公司的示例应用程序谈论Flutter。 最终结果看起来像这样：
Flutter从入门到奔溃（二）：撸一个个人界面
飞翔的熊blabla
11-06 1438
转载于https://blog.csdn.net/weixin_28717693/article/details/81811730 Flutter从入门到奔溃（二）：撸一个个人中心界面 前记 上一篇遗留问题的答复 个人中心界面的实现 效果展示 页面拆解 实现思路一,使用CustomScrollView： CustomScrollView介绍 CustomScrollView使用 白话文时间 C...
Flutter高仿微信-第28篇-好友详情-查看个人头像
maoning20080808的专栏
11-24 463
点击用户的头像，查看详情资料。
flutter-furniture-app:颤振家具用户界面
05-30
Flutter 家具应用 一个新的 Flutter 项目。 截图 入门 该项目是 Flutter 应用程序的起点。 如果这是您的第一个 Flutter 项目，请提供一些帮助您入门的资源： 如需有关 Flutter 入门的帮助，请查看我们的，其中提供了教程、示例、移动开发指南和完整的 API 参考。
基于Flutter+SpringBoot的个人习惯监测系统
01-14
java毕设 青少年时期是习惯养成的关键期。如何辅助个人养成一个良好的习惯成为了 一个重要的问题。本文设计、实现一个个人习惯监测软件，通过该软件，青少年 可以简单方便的培养自己的生活习惯、学习习惯、运动习惯以及等等。 本课题的设计与实现主要基于 Flutter、Spring Boot、Docker 三大技术设计、 开发与部署。结合市场现状，分析需求、并进行了详细的界面设计与功能实现。 在功能方面，除了核心的监测记录功能外还实现了主题、国际化、社区、商 城、数据同步等功能。其中社区功能应用了综合激励模型，用户记录数据可获得 奖励，奖励可用于排名与商城使用。 在技术方面本设计有两大创新点：一是设计并实现了一套基于 Flutter 的解 耦方案，在 Flutter 应用开发中利用自定义状态管理拆分了业务逻辑与 UI 界面， 提升了运行效率、缩短了开发周期、提升了代码的复用率；二是设计并实现了一 个简单的基于 Flutter 的 ORM 框架，提高了对移动端数据库 IO 的便捷度。 本文详细描述了个人习惯监测软件的设计与开发过程，包括需求分析、架构 设计、系统设计与实现。并通过测试和部署最终
flutter.rar
10-19
flutter-小项目实战 listView 网络获取数据 页面传参 聊天页面 个人中心 因为flutter整个项目太大了 就只上传了lib 代码文件
Flutter酒店预订界面-JavaScript开发
05-26
如果这是您的第一个Flutter项目，则有一些资源可帮助您入门：实验：编写您的第一个Flutter应用程序食谱：有用的Flutter示例为了帮助Flutter入门，请查看我们的在线文档，其中提供了教程，示例，移动开发指南，以及...
移动应用开发教程案例.docx
最新发布
04-02
好的，让我们以一个简单的待办事项列表应用为例，演示移动应用开发的基本流程。我们将使用Flutter框架进行开发，这样我们可以同时支持iOS和Android平台。 ### 待办事项列表应用 #### 功能特点： - 用户可以添加待...
flutter模仿boss直聘客户端效果
xq610928的博客
05-02 1153
效果图： 前言： 各位同学大家好 boss直聘APP相信大家都用过吧, 今天给大家带来一个开源项目模仿了boss直聘中的一些经典页面的实现 希望能帮助到各位flutter。原生安卓 iOS 实现都比较的简单我这里就不展开讲，今天主要讲解flutter版本如何实现 废话不多说我正式开始 。 ###准备工作： 安装flutter环境 如果只是跑安卓设备 win系统就行了 要是同时运行安卓和i...
flutter使用Scaffold中的bottomNavigationBar创建项目中的首页、个人中心等主页面
androidhyf的博客
08-05 507
flutter优缺点就不说了，最令人崩溃的是遇到各种非常规的bug时无助啊，还好有万能的网友 不bb了~ bottomNavigationBar创建应用主页面简单，但在网上没看到自己想要的： 1.导航栏icon的修改(使用自己的icon而非环境中配置的Icons库中的) 2.切换Tab时,页面的刷新导致的再次数据请求及资源浪费，体验也不好 1关于icon的更换，点就在要在inItState()方法中加载在后面代码里会有 2切换Tab时常规写法一般会这么干 final _pages = [HomePage
Flutter 实现登录页
热门推荐
zhuangch的专栏
01-11 1万+
登录页几乎是每个联网app必备的界面，下面以我工作中开发的百卓优采云进销存app软件的登录页为例使用Flutter来实现
flutter 模仿boss直聘个人中心页面简单实现
xq610928的博客
02-23 1995
##Android 模仿QQ消息列表拖拽滑动和侧滑效果简单实现 ###前言:相信大家都用过QQ 我们在消息列表里面可以使用拖拽滑动改变当前聊天联系人的位置 最近我有模仿做了一个相同的效果，所以现在分享给大家 废话不多说 我们正式开始##效果图:###具体实现 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns...
flutter-embedded-linux
07-15
而Flutter是一种跨平台的移动应用开发框架，可以同时在Android和iOS上运行。 使用Flutter-embedded-linux可以让开发者在嵌入式Linux平台上开发出跨平台的应用。这样一来，开发者不再需要针对不同的平台编写不同的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

铖铖的花嫁

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

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

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

打赏作者

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

抵扣说明：

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

余额充值