dating_touchme_app/lib/pages/discover/task_detail.dart

import 'package:dating_touchme_app/components/page_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TaskDetail extends StatefulWidget {
  const TaskDetail({super.key});

  @override
  State<TaskDetail> createState() => _TaskDetailState();
}

class _TaskDetailState extends State<TaskDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PageAppbar(title: "任务详情"),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(
            vertical: 20.w,
            horizontal: 15.w
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 228.w,
                margin: EdgeInsets.only(bottom: 21.w),
                decoration: BoxDecoration(
                    border: Border(
                        bottom: BorderSide(width: 1.w, color: const Color.fromRGBO(212, 212, 212, 1))
                    )
                ),
                child: Row(
                  children: [
                    Container(
                      width: 229.w,
                      decoration: BoxDecoration(
                          border: Border(
                              right: BorderSide(width: 1.w, color: const Color.fromRGBO(212, 212, 212, 1))
                          )
                      ),
                      child: Column(
                        children: [
                          Container(
                            height: 37.w,
                            color: const Color.fromRGBO(247, 247, 247, 1),
                            child: Center(
                              child: Text(
                                "任务详情",
                                style: TextStyle(
                                    fontSize: 14.w
                                ),
                              ),
                            ),
                          ),
                          Container(
                            height: 50.w,
                            padding: EdgeInsets.only(left: 14.w, right: 18.w),
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(width: 1.w, color: const Color.fromRGBO(212, 212, 212, 1))
                                )
                            ),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              "1.有效开播时长≥4小时;",
                              style: TextStyle(
                                  fontSize: 14.w
                              ),
                            ),
                          ),
                          Container(
                            height: 70.w,
                            padding: EdgeInsets.only(left: 14.w, right: 18.w),
                            decoration: BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(width: 1.w, color: const Color.fromRGBO(212, 212, 212, 1))
                                )
                            ),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              "2.邀请1个女嘉宾上麦，每个女嘉宾≥3个男嘉宾打卡方可下麦;",
                              style: TextStyle(
                                  fontSize: 14.w
                              ),
                            ),
                          ),
                          Container(
                            height: 70.w,
                            padding: EdgeInsets.only(left: 14.w, right: 18.w),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              "3.直播间打卡人数≥5人，每个男嘉宾上麦时间≥3分钟算一次打卡",
                              style: TextStyle(
                                  fontSize: 14.w
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Expanded(
                      child: Column(
                        children: [
                          Container(
                            height: 37.w,
                            color: const Color.fromRGBO(247, 247, 247, 1),
                            child: Center(
                              child: Text(
                                "任务奖励",
                                style: TextStyle(
                                    fontSize: 14.w
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Container(
                              padding: EdgeInsets.only(left: 14.w, right: 18.w),
                              alignment: Alignment.center,
                              child: Text(
                                "10元",
                                style: TextStyle(
                                    fontSize: 18.w,
                                    color: const Color.fromRGBO(239, 19, 46, 1)
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
              Text(
                "任务说明",
                style: TextStyle(
                  fontSize: 14.w
                ),
              ),
              SizedBox(height: 6.w,),
              Text(
                "1.奖励场景：三人相亲直播间\n"
                "2.结算时间：次日9:00\n"
                "3.付费上麦男嘉宾次数：20玫瑰+体验卡\n"
                "4.奖励可叠加",
                style: TextStyle(
                  fontSize: 14.w,
                  color: const Color.fromRGBO(144, 144, 144, 1)
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}