【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开

【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

章节内容【08】

【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心

开发背景

背景说明要提一点：我们所有的开发耗尽2个月的时间，目前只是整合与记录并且呈现过程，大家不要想的太简单，自己试试就知道了哈，而不是你们以为的很快很简单，这点请必须要知道。

闲话不多，开源仓库地址，可以观摩已经写好的代码：

https://gitee.com/youyacao/ff-flutter

demo下载

https://www.youyacao.cn/freefirend

更新代码文件和日志文件-gitee可见

·完善了首页的列表·增加了用户中心·直播间房间的页面内容铺垫·调试变成真机调试采用android studio进行调试

本次gitpull 忘记 记录文件变化了

实战开始

先启用真机调试，进入android studio，左侧打开本项目的android目录，右侧选择device manage

ok 选择一个适配的设配，

点击加号，选择第一个创建虚拟设备。

选择pixel 9 比较适合，我们考虑的机器就是 竖屏手机，没有考虑平板

下一步提示镜像选择，继续next，

创建虚拟机的名字，默认即可

点击run 也就是播放按钮，就开始运行

在左侧的build框我们可以看见运行的过程日志

右侧我们点击 run device 可以看到运行的设备， 上面点击 run 播放按钮 可以看到 直接启动了本项目

我们看到右侧已经显示了整个模拟器情况，我们看到

首页底部的 附近的用户，以及直播列表 已经增加

其次个人中心的选项与设置均已增加，

往下可以滑动，这是整体结果情况，我们来看看具体修改的代码部分，在比较复杂的部分，这里会做解释，

项目的开发我们是用的flutter ，dart语言，因此我们继续回到vscode，android studio 只适合安卓开发很局限。

这是我们增加的页面，以及组件，本次增加大概有13个页面，

最先来看路由

import 'package:get/get.dart';
import 'package:ff_flutter/screens/index.dart';
import 'package:ff_flutter/screens/register.dart';
import 'package:ff_flutter/screens/smslogin.dart' as sms;
import 'package:ff_flutter/routes/app_routes.dart';
import 'package:ff_flutter/controllers/index_controller.dart';
import 'package:ff_flutter/controllers/register_controller.dart';
import 'package:ff_flutter/controllers/sms_login_controller.dart';

class AppPages {
  static final pages = [
    GetPage(
      name: AppRoutes.INDEX,
      page: () => IndexScreen(),
      binding: BindingsBuilder(() {
        Get.lazyPut(() => IndexController());
      }),
    ),
    GetPage(
      name: AppRoutes.REGISTER,
      page: () => const RegisterScreen(),
      binding: BindingsBuilder(() {
        Get.lazyPut(() => RegisterController());
      }),
    ),
    GetPage(
      name: AppRoutes.SMS_LOGIN,
      page: () => const sms.SmsLoginScreen(),
      binding: BindingsBuilder(() {
        Get.lazyPut(() => SmsLoginController());
      }),
    ),
  ];
}

先来看首页组件home_screen.dart：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ff_flutter/screens/home/widgets/popular_live_room.dart';
import 'package:ff_flutter/screens/home/widgets/download_button.dart';
import 'package:ff_flutter/screens/home/widgets/notification_button.dart';
import 'package:ff_flutter/screens/home/widgets/big_popular_live_room.dart';
import 'package:ff_flutter/screens/home/widgets/tab_bar/index.dart';

class HomeScreenWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 顶部状态栏留空
          SizedBox(height: MediaQuery.of(context).padding.top),
          // Free Friend 和下载按钮
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 32.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "Free Friend",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 48.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Row(
                  children: [
                    DownloadButton(),
                    SizedBox(width: 24.w),
                    NotificationButton(),
                  ],
                ),
              ],
            ),
          ),
          SizedBox(height: 32.h),
          // 地区选择
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 32.w),
            child: Row(
              children: [
                Container(
                  width: 64.w,
                  height: 64.h,
                  decoration: BoxDecoration(
                    color: const Color(0xFFE7568C),
                    borderRadius: BorderRadius.circular(16.r),
                  ),
                  child: Icon(
                    Icons.location_on,
                    color: Colors.white,
                    size: 36.sp,
                  ),
                ),
                SizedBox(width: 16.w),
                Text(
                  "America",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 48.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 32.h),
          // Popular Live Room 组件
          PopularLiveRoom(),
          BigPopularLiveRoom(),
          HomeTabBar(),
        ],
      ),
    );
  }
}

再继续看下我们的下载按钮单独做了组件，应该下载要单独download_button.dart

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

class DownloadButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 72.h,
      decoration: BoxDecoration(
        color: const Color(0xFFE7568C),
        borderRadius: BorderRadius.circular(36.r),
      ),
      child: TextButton.icon(
        onPressed: () {},
        icon: Icon(
          Icons.download,
          color: Colors.white,
          size: 32.sp,
        ),
        label: Text(
          'Download',
          style: TextStyle(
            color: Colors.white,
            fontSize: 32.sp,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

首页中的滑动组件，big_popular_live_room.dart

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

class BigPopularLiveRoom extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(height: 50.h),
        SizedBox(
          height: 399.h,
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            padding: EdgeInsets.symmetric(horizontal: 32.w),
            itemCount: 8,
            itemBuilder: (context, index) {
              return Container(
                width: 300.w,
                margin: EdgeInsets.only(right: 24.w),
                child: Column(
                  children: [
                    Container(
                      width: 300.w,
                      height: 300.w,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16.r),
                      ),
                      child: Stack(
                        children: [
                          ClipRRect(
                            borderRadius: BorderRadius.circular(16.r),
                            child: const Image(
                              image: AssetImage(
                                  'assets/images/big_popular_live_girl.png'),
                              width: double.infinity,
                              height: double.infinity,
                              fit: BoxFit.cover,
                              alignment: Alignment.center,
                            ),
                          ),
                          Positioned(
                            right: 16.w,
                            bottom: 16.h,
                            child: Container(
                              padding: EdgeInsets.symmetric(
                                horizontal: 16.w,
                                vertical: 4.h,
                              ),
                              decoration: BoxDecoration(
                                color: Colors.black.withOpacity(0.5),
                                borderRadius: BorderRadius.circular(30.r),
                              ),
                              child: Row(
                                children: [
                                  Icon(
                                    Icons.favorite,
                                    color: Colors.white,
                                    size: 24.sp,
                                  ),
                                  SizedBox(width: 4.w),
                                  Text(
                                    '${index + 1}.2M',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 24.sp,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 16.h),
                    Container(
                      width: 300.w,
                      padding: EdgeInsets.symmetric(horizontal: 16.w),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            [
                              'Bryce Adams',
                              'Emma Stone',
                              'Lucy Liu',
                              'Anna May'
                            ][index % 4],
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 32.sp,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          // SizedBox(height: 8.h),
                          Text(
                            '@${[
                              'fitiajidjisd',
                              'emmastone',
                              'lucyliu',
                              'annamay'
                            ][index % 4]}',
                            style: TextStyle(
                              color: Colors.grey,
                              fontSize: 24.sp,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

通知按钮notification_button.dart

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

class NotificationButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 72.w,
      height: 72.h,
      decoration: const BoxDecoration(
        color: Color(0xFF2A2A2A),
        shape: BoxShape.circle,
      ),
      child: Icon(
        Icons.notifications_none,
        color: Colors.white,
        size: 36.sp,
      ),
    );
  }
}

再来看看 首页 index.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ff_flutter/screens/home/index.dart';
import 'package:ff_flutter/screens/short_video_screen.dart';
import 'package:ff_flutter/screens/message_screen.dart';
import 'package:ff_flutter/screens/account/index.dart';

class IndexScreen extends StatefulWidget {
  // 改为 StatefulWidget
  @override
  State<IndexScreen> createState() => _IndexScreenState();
}

class _IndexScreenState extends State<IndexScreen> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    HomeScreen(),
    ShortVideoScreen(),
    MessageScreen(),
    AccountScreen(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF1E1E1E),
      body: IndexedStack(
        index: _selectedIndex,
        children: _pages,
      ),
      bottomNavigationBar: Container(
        height: 168.h,
        decoration: const BoxDecoration(
          color: Color(0xFF1E1E1E),
        ),
        child: Theme(
          data: ThemeData(
            splashColor: Colors.transparent,
            highlightColor: Colors.transparent,
          ),
          child: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
                activeIcon: Icon(Icons.home, color: Color(0xFFE7568C)),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.play_circle_outline),
                label: 'Short Video',
                activeIcon:
                    Icon(Icons.play_circle_outline, color: Color(0xFFE7568C)),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.notifications_none),
                label: 'Message',
                activeIcon:
                    Icon(Icons.notifications_none, color: Color(0xFFE7568C)),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person_outline),
                label: 'Account',
                activeIcon:
                    Icon(Icons.person_outline, color: Color(0xFFE7568C)),
              ),
            ],
            currentIndex: _selectedIndex,
            selectedItemColor: const Color(0xFFE7568C),
            unselectedItemColor: Colors.grey,
            backgroundColor: const Color(0xFF1E1E1E),
            type: BottomNavigationBarType.fixed,
            selectedFontSize: 24.sp,
            unselectedFontSize: 24.sp,
            iconSize: 48.sp,
            elevation: 0,
            onTap: _onItemTapped,
          ),
        ),
      ),
    );
  }
}

class DownloadButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton.icon(
      onPressed: () {
        // 处理下载逻辑
      },
      icon: const Icon(
        Icons.system_update_alt,
        size: 30,
        color: Color(0xfff1f1f1), // 设置图标颜色为 0xfff1f1f1
      ),
      label: const Text(
        "Download",
        style: TextStyle(
          color: Color(0xfff1f1f1),
          fontSize: 26,
          fontFamily: "PingFang SC",
          fontWeight: FontWeight.w800,
        ),
      ),
      style: ElevatedButton.styleFrom(
        backgroundColor:
            const Color(0xffe7568c), // 使用 backgroundColor 替代 primary
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(27.r),
        ),
        padding: EdgeInsets.symmetric(horizontal: 17.w, vertical: 9.h),
        minimumSize: Size(195.w, 54.h),
      ),
    );
  }
}

class CustomIconButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 54.w,
      height: 54.h,
      child: Stack(
        children: [
          Container(
            width: 54.w,
            height: 54.h,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              color: Color(0xff151313),
            ),
          ),
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: const Icon(
                Icons.notifications,
                size: 36,
                color: Color(0xfff1f1f1), // 设置图标颜色为 0xfff1f1f1
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class MoreButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        const Text(
          "more",
          style: TextStyle(
            color: Color(0xff929292),
            fontSize: 26,
          ),
        ),
        SizedBox(width: 10.w),
        Transform.rotate(
          angle: 3.14,
          child: Container(
            width: 26.w,
            height: 26.h,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.r),
            ),
            child: const Icon(
              Icons.arrow_back, // 替换为合适的图标
              size: 26,
              color: Color(0xfff1f1f1), // 设置图标颜色为 0xfff1f1f1
            ),
          ),
        ),
      ],
    );
  }
}

个人中心，来看头像部分

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

class AccountHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 32.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            width: 72.w,
            height: 72.h,
            decoration: const BoxDecoration(
              color: Color(0xFF2A2A2A),
              shape: BoxShape.circle,
            ),
            child: Image.asset(
              'assets/images/account_notes.png',
              width: 36.w,
              height: 36.h,
            ),
          ),
          Container(
            height: 72.h,
            padding: EdgeInsets.symmetric(horizontal: 32.w),
            decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.circular(36.r),
              border: Border.all(
                color: const Color(0xFFE7568C),
                width: 2.w,
              ),
            ),
            child: Row(
              children: [
                Icon(
                  Icons.download,
                  color: const Color(0xFFE7568C),
                  size: 32.sp,
                ),
                SizedBox(width: 8.w),
                Text(
                  'Download',
                  style: TextStyle(
                    color: const Color(0xFFE7568C),
                    fontSize: 32.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

下方列表

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

class MenuItem {
  final String icon;
  final String title;

  MenuItem(this.icon, this.title);
}

class MenuList extends StatelessWidget {
  final List<MenuItem> menuItems = [
    MenuItem('assets/images/account_icon1.png', 'Bill'),
    MenuItem('assets/images/account_icon2.png', 'Product Management'),
    MenuItem('assets/images/account_icon3.png', 'Order History'),
    MenuItem('assets/images/account_icon4.png', 'Historical'),
    MenuItem('assets/images/account_icon5.png', 'Invite Friends'),
    MenuItem(
        'assets/images/account_icon6.png', 'Apply to become a broadcaster'),
  ];

  final List<MenuItem> systemMenuItems = [
    MenuItem('assets/images/account_icon7.png', 'Online Service'),
    MenuItem('assets/images/account_icon8.png', 'Security Center'),
    MenuItem('assets/images/account_icon9.png', 'Help Center'),
  ];

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 30.w),
      child: Column(
        children: [
          ...menuItems.map((item) => _buildMenuItem(item)).toList(),
          Container(
            height: 1.h,
            color: const Color(0xFF393939),
          ),
          SizedBox(height: 70.h),
          ...systemMenuItems.map((item) => _buildMenuItem(item)).toList(),
        ],
      ),
    );
  }

  Widget _buildMenuItem(MenuItem item) {
    return Column(
      children: [
        SizedBox(
          height: 46.h,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Image.asset(
                    item.icon,
                    width: 48.w,
                    height: 48.h,
                  ),
                  SizedBox(width: 24.w),
                  Text(
                    item.title,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 32.sp,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ],
              ),
              Icon(
                Icons.chevron_right,
                color: Colors.white,
                size: 48.sp,
              ),
            ],
          ),
        ),
        SizedBox(height: 70.h),
      ],
    );
  }
}

vip部分

import 'package:flutter/material.dart';

import 'package:flutter\_screenutil/flutter\_screenutil.dart';



class OpenVip extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Padding(

      padding: EdgeInsets.symmetric(horizontal: 30.w),

      child: Container(

        height: 110.h,

        decoration: BoxDecoration(

          color: const Color(0xFF393939),

          borderRadius: BorderRadius.circular(30.r),

        ),

        child: Row(

          mainAxisAlignment: MainAxisAlignment.spaceBetween,

          children: \[

            Row(

              children: \[

                SizedBox(width: 32.w),

                Image.asset(

                  'assets/images/account\_vip.png',

                  width: 48.w,

                  height: 48.h,

                ),

                SizedBox(width: 24.w),

                Text(

                  'Open VIP',

                  style: TextStyle(

                    color: Colors.white,

                    fontSize: 32.sp,

                    fontWeight: FontWeight.bold,

                  ),

                ),

              \],

            ),

            Padding(

              padding: EdgeInsets.only(right: 32.w),

              child: Icon(

                Icons.chevron\_right,

                color: Colors.white,

                size: 48.sp,

              ),

            ),

          \],

        ),

      ),

    );

  }

}

用户信息部分、

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

class UserInfo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // 头像和相机按钮
        Center(
          child: SizedBox(
            width: 319.w,
            height: 319.h,
            child: Stack(
              children: [
                Container(
                  width: 319.w,
                  height: 319.h,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                  ),
                  child: ClipOval(
                    child: Image.asset(
                      'assets/images/girl.png',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Positioned(
                  right: 0,
                  bottom: 0,
                  child: Container(
                    width: 72.w,
                    height: 72.h,
                    decoration: const BoxDecoration(
                      color: Color(0xFFE7568C),
                      shape: BoxShape.circle,
                    ),
                    child: Icon(
                      Icons.camera_alt,
                      color: Colors.white,
                      size: 36.sp,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        SizedBox(height: 24.h),
        // 用户名
        Text(
          'ANNA_122',
          style: TextStyle(
            color: Colors.white,
            fontSize: 48.sp,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 8.h),
        // 用户ID
        Text(
          'ID:012345548787',
          style: TextStyle(
            color: Colors.grey,
            fontSize: 32.sp,
          ),
        ),
        SizedBox(height: 8.h),
        // 职业
        Text(
          'a teacher',
          style: TextStyle(
            color: Colors.white.withOpacity(0.9),
            fontSize: 32.sp,
          ),
        ),
      ],
    );
  }
}

用户状态部分，

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

class UserStats extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 31.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          _buildStatItem('8.6K', 'Gold Coin'),
          SizedBox(width: 120.w),
          _buildStatItem('12', 'Shopping Cart'),
        ],
      ),
    );
  }

  Widget _buildStatItem(String value, String label) {
    return Column(
      children: [
        Text(
          value,
          style: TextStyle(
            color: Colors.white,
            fontSize: 42.sp,
            fontWeight: FontWeight.w900,
          ),
        ),
        SizedBox(height: 4.h),
        Text(
          label,
          style: TextStyle(
            color: Colors.grey,
            fontSize: 26.sp,
          ),
        ),
      ],
    );
  }
}

整体代码中，在头像部分 还需要单独处理

这段代码定义了一个名为 AccountHeader 的无状态小部件，用于显示账户头部信息。它包含一个圆形图片和一个下载按钮。具体功能如下：

• 左侧是一个72x72的圆形容器，内含36x36的图片。
• 右侧是一个带边框的容器，内含下载图标和文本“Download”，点击效果未实现。

控制流图

mermaid

flowchart TD A[开始] --> B[创建Padding] B --> C[创建Row布局] C --> D[创建左侧圆形容器] D --> E[添加图片] C --> F[创建右侧带边框容器] F --> G[添加下载图标] G --> H[添加下载文本] H --> I[结束]

下载按钮部分也是比较值得注意的，

代码解释
这段代码定义了一个名为 DownloadButton 的无状态小部件，用于创建一个下载按钮。按钮的高度为72逻辑像素，背景颜色为粉色（0xFFE7568C），圆角半径为36逻辑像素。按钮包含一个图标和文本“Download”，点击按钮时触发空操作。

控制流图
mermaid
flowchart TD
    A[开始] --> B[创建容器]
    B --> C[设置容器高度和装饰]
    C --> D[创建TextButton.icon]
    D --> E[设置按钮点击事件为空操作]
    E --> F[设置图标和文本样式]
    F --> G[结束]

本次记录和学习已经完成，优雅草卓伊凡。