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

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';
import 'package:get/get.dart';

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

  @override
  bool immersive() {
    return true;
  }

  @override
  Color backgroundColor() {
    return ColorName.transparent;
  }

  // 点击空白处收起键盘
  @override
  void backgroundOnTapEvent() {
    super.backgroundOnTapEvent();
    FocusScope.of(Get.context!).requestFocus(FocusNode());
  }

  @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(),
          ),
          Scaffold(
            // resizeToAvoidBottomInset: false,
            backgroundColor: Colors.transparent,
            appBar: AppBar(
              scrolledUnderElevation: 0,
              leading: IconButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                icon: UnconstrainedBox(
                  child: SizedBox(
                    width: 28.w,
                    height: 28.w,
                    child: Assets.images.iconTalkStartClose.image(),
                  ),
                ),
              ),
              backgroundColor: Colors.transparent,
              title: Text(
                "定制你的秘书",
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 16.w,
                  color: ColorName.primaryTextColor,
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
            body: SingleChildScrollView(
              physics: const ClampingScrollPhysics(),
              child: SizedBox(
                width: double.infinity,
                height: ScreenUtil().screenHeight -
                    80.h -
                    AppBar().preferredSize.height,
                child: Column(
                  children: [
                    buildDescripe(),
                    buildInputTF(),
                    const Expanded(child: SizedBox()),
                    GestureDetector(
                      onTap: () {
                        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: const 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),
            ),
          ),
        ],
      ),
    );
  }
}