Flutter移动应用开发 - 软件界面设计（含带用户信息的侧边栏、视频自动循环播放）

本文链接：https://blog.youkuaiyun.com/Hjh1906008151/article/details/128763705

该篇博客展示了使用Flutter构建的一个乘客主界面的项目，包括个人中心、侧边栏和视频播放功能。代码中详细介绍了如何集成视频播放器、设置侧拉菜单以及处理用户交互。目前部分功能如扫描和搜索等尚未完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.
  flutter_screenutil: ^3.1.0
  image_picker: 0.8.6
  video_player: ^2.2.11

相关文件如下

passager.dart

passager.dart

import 'dart:async';
//拍照后进入
import 'package:final_work/pic_loading.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:video_player/video_player.dart';
import 'passengerself.dart';
import 'package:flutter/cupertino.dart';
import 'package:image_picker/image_picker.dart';


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

  @override
  State<passenger> createState() => _passengerState();
}

class _passengerState extends State<passenger> {
  // 视频控制器
  late VideoPlayerController _controller;
  // 视频加载
  late Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.asset('assets/images/ad3.mp4');
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.play();
    _controller.setLooping(true);
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, allowFontScaling: false);

    // 侧拉边框header
    final drawerHeader = UserAccountsDrawerHeader(
      margin: EdgeInsets.only(bottom: 28.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20),),
        image: DecorationImage(
          image: AssetImage("assets/images/bg1.png"),
          fit: BoxFit.cover,
        ),
      ),
      accountName: Text(
        "  如有疑问，请联系： Clark Hu"
      ),
      accountEmail: Text(
        "  1906008151",
      ),
      currentAccountPictureSize: Size.square(72.0),
      currentAccountPicture: CircleAvatar(
        child: CircleAvatar(
          backgroundImage: AssetImage('assets/images/LOGO_w.png'),
          radius: 100,
        ),
      ),
    );

    // 侧拉边框item
    final drawerItems = ListView(
      children: [
        drawerHeader,
        ListTile(
          leading: Icon(Icons.crop_free_outlined),
          title: Text("扫一扫"),
          subtitle: Text("添加好友、收付款"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                    content: Text("阿巴阿巴阿巴这部分还没做完"),
                    action: SnackBarAction(
                        label: "单击下一步",
                        onPressed: () {
                          ScaffoldMessenger.of(context).hideCurrentSnackBar();
                          ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                  content: Text("别点了别点了，真没时间做~~~~")
                              )
                          );
                        }
                    )
                )
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.search),
          title: Text("搜索"),
          subtitle: Text("快速找到相关功能"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("阿巴阿巴阿巴这部分还没做完"),
                action: SnackBarAction(
                  label: "单击下一步",
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text("别点了别点了，真没时间做~~~~")
                      )
                    );
                  }
                )
              )
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text("返回主页"),
          subtitle: Text("点我能回登录界面嗷"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                    content: Text("阿巴阿巴阿巴这部分还没做完"),
                    action: SnackBarAction(
                        label: "单击下一步",
                        onPressed: () {
                          ScaffoldMessenger.of(context).hideCurrentSnackBar();
                          ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                  content: Text("别点了别点了，真没时间做~~~~")
                              )
                          );
                        }
                    )
                )
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.account_box),
          title: Text("通讯录"),
          subtitle: Text("一键连接其他用户"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("阿巴阿巴阿巴这部分还没做完"),
                action: SnackBarAction(
                  label: "单击下一步",
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                          content: Text("别点了别点了，真没时间做~~~~")
                      )
                    );
                  }
                )
              )
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.rocket),
          title: Text("成为会员"),
          subtitle: Text("享受海量资源与优惠"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("阿巴阿巴阿巴这部分还没做完"),
                action: SnackBarAction(
                  label: "单击下一步",
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text("别点了别点了，真没时间做~~~~")
                      )
                    );
                  }
                )
              )
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.video_collection),
          title: Text("广告"),
          subtitle: Text("投放广告咨询"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("阿巴阿巴阿巴这部分还没做完"),
                action: SnackBarAction(
                  label: "单击下一步",
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text("别点了别点了，真没时间做~~~~")
                      )
                    );
                  }
                )
              )
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.brightness_medium),
          title: Text("显示"),
          subtitle: Text("夜间模式"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text("阿巴阿巴阿巴这部分还没做完"),
                action: SnackBarAction(
                  label: "单击下一步",
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentSnackBar();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(
                        content: Text("别点了别点了，真没时间做~~~~")
                      )
                    );
                  }
                )
              )
            );
          },
        ),
        ListTile(
          leading: Icon(Icons.person),
          title: Text("帮助"),
          subtitle: Text("人工客服为您服务"),
          onTap: () {
            Navigator.pop(context);
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
            ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                    content: Text("阿巴阿巴阿巴这部分还没做完"),
                    action: SnackBarAction(
                        label: "单击下一步",
                        onPressed: () {
                          ScaffoldMessenger.of(context).hideCurrentSnackBar();
                          ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
                                  content: Text("别点了别点了，真没时间做~~~~")
                              )
                          );
                        }
                    )
                )
            );
          },
        ),
      ],
    );

    // 侧拉边框
    Widget buildDrawer = Drawer(
      child: SafeArea(
        child: drawerItems,
      ),
    );

    // 顶部
    PreferredSizeWidget buildBarr = AppBar(
      backgroundColor: Colors.transparent,
      elevation: 0,
      leading: Builder(
        builder: (BuildContext context) {
          return IconButton(
            icon: const Icon(
              Icons.menu,
              color: Colors.red, // Change Custom Drawer Icon Color
            ),
            onPressed: () {
              Scaffold.of(context).openDrawer();
            },
            tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
          );
        },
      ),
      actions: [
        IconButton(
          tooltip: "个人信息",
          icon: const Icon(
            Icons.person,
            color: Colors.blueGrey,
          ),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute<void>(
                builder: (BuildContext context) {
                  return passengerself();
                },
              ),
            );
          },
        )
      ],
    );

    // 标题
    Widget buildTitle = Center(
      child: Stack(
      alignment: Alignment.center,
      children: <Widget>[
        // Stroked text as border.
        Text(
          textDirection: TextDirection.ltr,
          '一键识物',
          style: TextStyle(
            fontSize: 40,
            foreground: Paint()
              ..style = PaintingStyle.stroke
              ..strokeWidth = 6
              ..color = Colors.blue[700]!,
          ),
        ),
        // Solid text as fill.
        Text(
          textDirection: TextDirection.ltr,
          '一键识物',
          style: TextStyle(
            fontSize: 40,
            color: Colors.grey[300],
          ),
        ),
      ],
    )
    );




    void _showActionSheet(BuildContext context) {
      showCupertinoModalPopup<void>(
        context: context,
        builder: (BuildContext context) => CupertinoActionSheet(
          title: const Text('请选择'),
          // message: const Text('Message'),
          actions: <CupertinoActionSheetAction>[
            CupertinoActionSheetAction(
              isDefaultAction: true,
              onPressed: (){},
              child: const Text('打开相机'),
            ),
            CupertinoActionSheetAction(
              onPressed: (){},
              child: const Text('打开本地相簿'),
            ),
            CupertinoActionSheetAction(
              isDestructiveAction: true,
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text('取消'),
            ),
          ],
        ),
      );
    }

    void showCupertinoAlertDialog() {
      showDialog(
          context: context,
          builder: (BuildContext context) {
            return CupertinoAlertDialog(
              title: Text("“Clark NB”想访问您的相机"),
              content: Column(
                children: <Widget>[
                  SizedBox(
                    height: 10,
                  ),
                  Align(
                    child: Text("使用相机获取照片用于识别商品"),
                    alignment: Alignment(0, 0),
                  ),
                ],
              ),
              actions: <Widget>[
                CupertinoDialogAction(
                  child: Text("不允许"),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
                CupertinoDialogAction(
                  child: Text("好"),
                  onPressed: () {
                    Navigator.pop(context);
                    _showActionSheet(context);
                  },
                ),
              ],
            );
          });
    }


    // 点击出现相机
    Widget buildPhoto = Center(
      child: SizedBox(
        width: double.maxFinite,
        child: IconButton(
          padding: EdgeInsets.zero,
          onPressed: showCupertinoAlertDialog,
          tooltip: 'Pick Image',
          icon: Icon(
            Icons.add_a_photo,
            size: 200,
          ),
        ),
      ),
    );


    // 播放视频
    Widget buildVideo_2 = Container(
      alignment: Alignment.center,
      child: SizedBox(
          height: 200,
          child: Stack(
            children: [
              FutureBuilder(
                future: _initializeVideoPlayerFuture,
                builder: (context, snapshot) {
                  if (snapshot.connectionState == ConnectionState.done) {
                    return AspectRatio(
                      aspectRatio: _controller.value.aspectRatio,
                      child: VideoPlayer(_controller),
                    );
                  } else {
                    return const Center(
                      child: CircularProgressIndicator(),
                    );
                  }
                },
              ),
            ],
          )
      ),
    );

    // 循环播放视频
    Widget buildVideo = Container(
      alignment: Alignment.center,
      child: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );


    return Scaffold(
      drawer: buildDrawer,
      appBar: buildBarr,
      body: Column(
        children: <Widget>[
          buildTitle,
          SizedBox(height: ScreenUtil().setHeight(240),),
          buildPhoto,
          SizedBox(height: ScreenUtil().setHeight(70),),
          Spacer(),
          buildVideo,
        ],
      ),
    );
  }
}