ElectronicAssistant/lib/module/chat/start/view.dart

import 'dart:ffi';

import 'package:electronic_assistant/base/base_page.dart';
import 'package:electronic_assistant/module/chat/start/controller.dart';
import 'package:electronic_assistant/resource/assets.gen.dart';
import 'package:electronic_assistant/resource/colors.gen.dart';
import 'package:electronic_assistant/utils/expand.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class ChatStartPage extends BasePage<ChatStartController> {
  const ChatStartPage({super.key});

  @override
  bool immersive() {
    return true;
  }

  @override
  Color backgroundColor() {
    // TODO: implement backgroundColor
    return ColorName.transparent;
  }

  @override
  Widget buildBody(BuildContext context) {
    return Container(
      height: ScreenUtil().screenHeight - 80.h,
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(16),
          topRight: Radius.circular(16),
        ),
        color: Colors.white,
      ),
      child: Stack(
        children: [
          SizedBox(
            width: double.infinity,
            child: Assets.images.bgTalkStart.image(),
          ),
          Column(
            children: [
              buildTopBar(),
              buildDescripe(),
              buildInputTF(),
              Expanded(child: SizedBox()),
              TextButton(
                onPressed: () {
                  print(ScreenUtil().bottomBarHeight);
                },
                child: Container(
                  margin: EdgeInsets.only(
                      left: 16.w,
                      right: 16.w,
                      bottom: ScreenUtil().bottomBarHeight + 6.h),
                  height: 48.h,
                  width: double.infinity,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: ['#6177F2'.toColor(), '#8B9DFF'.toColor()],
                      stops: const [0, 1.0],
                    ),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Text(
                    "下一步",
                    style: TextStyle(
                      color: ColorName.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              )
            ],
          ),
        ],
      ),
    );
  }

  Widget buildTopBar() {
    return Container(
      height: 28.w,
      margin: EdgeInsets.only(left: 16.w, top: 16.h, right: 16.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          GestureDetector(
            child: SizedBox(
              width: 28.w,
              height: 28.w,
              child: Assets.images.iconTalkStartClose.image(),
            ),
          ),
          SizedBox(
            child: Text(
              "定制你的秘书",
              textAlign: TextAlign.center,
              style: TextStyle(
                fontSize: 16.w,
                color: ColorName.primaryTextColor,
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          SizedBox(
            width: 28.w,
            height: 28.w,
          ),
        ],
      ),
    );
  }

  Widget buildDescripe() {
    return Column(
      children: [
        Container(
          margin: EdgeInsets.only(top: 40.h),
          width: 84.w,
          child: Assets.images.iconTalkStartLogo.image(),
        ),
        Container(
          margin: EdgeInsets.only(top: 6.h),
          width: 328.w,
          height: 99.h,
          padding: const EdgeInsets.all(1),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [
                Color.fromRGBO(226, 165, 255, 0.14),
                Color.fromRGBO(99, 122, 255, 0.14)
              ],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0, 1.0],
            ),
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(0.w),
              topRight: Radius.circular(16.w),
              bottomLeft: Radius.circular(16.w),
              bottomRight: Radius.circular(16.w),
            ),
          ),
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: ['#FFF5FD'.toColor(), '#EEF9FF'.toColor()],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                stops: const [0, 1.0],
              ),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(0.w),
                topRight: Radius.circular(16.w),
                bottomLeft: Radius.circular(16.w),
                bottomRight: Radius.circular(16.w),
              ),
            ),
            child: Container(
              padding: const EdgeInsets.only(
                  left: 12, top: 14, right: 12, bottom: 16),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const Text(
                    "👋 Hi，你好呀",
                    style: TextStyle(
                      color: ColorName.primaryTextColor,
                      fontSize: 17,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    "作为专属秘书，告诉小听以下信息吧~",
                    style: TextStyle(
                      color: ColorName.primaryTextColor.withOpacity(0.8),
                      fontSize: 14,
                    ),
                  ),
                  Text(
                    "您填写的内容，会影响我回答的准确度哦~",
                    style: TextStyle(
                      color: ColorName.primaryTextColor.withOpacity(0.8),
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }

  Widget buildInputTF() {
    return Container(
      padding: const EdgeInsets.only(left: 16, right: 16, top: 24),
      child: Column(
        children: [
          Row(
            children: [
              const Text(
                "行业",
                style: TextStyle(
                  color: ColorName.primaryTextColor,
                  fontSize: 15,
                  fontWeight: FontWeight.w500,
                ),
              ),
              Text(
                "*",
                style: TextStyle(
                  color: "#F5574E".toColor(),
                  fontSize: 15,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
          Container(
            margin: const EdgeInsets.only(top: 8, bottom: 18),
            alignment: Alignment.center,
            height: 44.h,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.w),
              border: Border.all(color: '#ECECEC'.toColor(), width: 1),
            ),
            child: TextField(
              maxLines: 1,
              textAlignVertical: TextAlignVertical.center,
              textInputAction: TextInputAction.search,
              decoration: InputDecoration(
                hintText: '如：房地产、金融、电子设备出口、教培',
                hintStyle: TextStyle(fontSize: 14, color: "#AFAFAF".toColor()),
                labelStyle:
                    TextStyle(fontSize: 14, color: ColorName.primaryTextColor),
                contentPadding: EdgeInsets.only(left: 12),
                border: OutlineInputBorder(borderSide: BorderSide.none),
                enabled: true,
              ),
              style: TextStyle(fontSize: 14.sp),
            ),
          ),
          Row(
            children: [
              const Text(
                "岗位",
                style: TextStyle(
                  color: ColorName.primaryTextColor,
                  fontSize: 15,
                  fontWeight: FontWeight.w500,
                ),
              ),
              Text(
                "*",
                style: TextStyle(
                  color: "#F5574E".toColor(),
                  fontSize: 15,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ],
          ),
          Container(
            margin: const EdgeInsets.only(top: 8, bottom: 18),
            alignment: Alignment.center,
            height: 44.h,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(8.w),
              border: Border.all(color: '#ECECEC'.toColor(), width: 1),
            ),
            child: TextField(
              maxLines: 1,
              textAlignVertical: TextAlignVertical.center,
              textInputAction: TextInputAction.search,
              decoration: InputDecoration(
                hintText: '如：行政、助理、销售、总经理、创业者',
                hintStyle: TextStyle(fontSize: 14, color: "#AFAFAF".toColor()),
                labelStyle:
                    TextStyle(fontSize: 14, color: ColorName.primaryTextColor),
                contentPadding: EdgeInsets.only(left: 12),
                border: OutlineInputBorder(borderSide: BorderSide.none),
                enabled: true,
              ),
              style: TextStyle(fontSize: 14.sp),
            ),
          ),
        ],
      ),
    );
  }
}