huixiang_app/lib/home/home_view/coupon.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/utils/font_weight.dart';
import 'package:huixiang/view_widget/item_title.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:huixiang/view_widget/round_button.dart';
import 'package:huixiang/view_widget/separator.dart';

class CouponView extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _CouponView();
  }
}

class _CouponView extends State<CouponView> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: 20.h,
        ),
        ItemTitle(
          text: S.of(context).chaojiyouhuiquan,
          imgPath: "assets/image/icon_points_mall.png",
        ),
        Container(
          height: 132,
          margin: EdgeInsets.only(top: 10),
          child: ListView.builder(
            scrollDirection: Axis.horizontal,
            physics: BouncingScrollPhysics(),
            padding: EdgeInsets.symmetric(horizontal: 10),
            itemBuilder: (context, position) {
              return couponItem();
            },
            itemCount: 10,
          ),
        ),
      ],
    );
  }

  Widget couponItem() {
    return Container(
      width: 0.9.sw,
      height: 122.h,
      child: Stack(
        children: [
          Container(
            width: 0.9.sw,
            height: 122.h,
            child: SvgPicture.asset(
              "assets/svg/youhuiquan_bg.svg",
              width: double.infinity,
              height: 122.h,
              fit: BoxFit.fill,
            ),
          ),
          Container(
            width: 0.9.sw,
            height: 122.h,
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    child: Container(
                      width: 74,
                      height: 74,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6),
                        gradient: LinearGradient(
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                          colors: [
                            Color(0xFFACDD60),
                            Color(0xFF32A060),
                          ],
                        ),
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          Text.rich(
                            TextSpan(
                              children: [
                                TextSpan(
                                  text: "¥",
                                  style: TextStyle(
                                    fontSize: 16.sp,
                                    fontWeight: MyFontWeight.regular,
                                    color: Colors.white,
                                  ),
                                ),
                                TextSpan(
                                  text: "20",
                                  style: TextStyle(
                                    fontSize: 25.sp,
                                    fontWeight: MyFontWeight.regular,
                                    color: Colors.white,
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Text(
                            "抵扣劵",
                            style: TextStyle(
                              fontWeight: MyFontWeight.regular,
                              fontSize: 14.sp,
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  flex: 37,
                ),
                Container(
                  margin: EdgeInsets.only(
                    top: 24.h,
                    bottom: 24.h,
                  ),
                  child: MySeparator(
                    height: 5.h,
                    width: 1,
                    color: Color(0xFFD8D8D8),
                  ),
                ),
                Expanded(
                  child: Container(
                    margin:
                        EdgeInsets.symmetric(vertical: 10.h, horizontal: 15.w),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          "海峡姐妹(楚河汉街店)",
                          style: TextStyle(
                            color: Color(0xFF181818),
                            fontWeight: MyFontWeight.medium,
                            fontSize: 14.sp,
                          ),
                        ),
                        Row(
                          children: [
                            Text(
                              "1张",
                              style: TextStyle(
                                color: Color(0xFF868686),
                                fontWeight: MyFontWeight.regular,
                                fontSize: 12.sp,
                              ),
                            ),
                            SizedBox(
                              width: 4.w,
                            ),
                            Text(
                              "20元无门槛抵扣 ",
                              style: TextStyle(
                                color: Color(0xFF868686),
                                fontWeight: MyFontWeight.regular,
                                fontSize: 12.sp,
                              ),
                            ),
                          ],
                        ),
                        SizedBox(
                          width: 12.w,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: [
                            Text(
                              "2021/10/11到期",
                              style: TextStyle(
                                color: Color(0xFF868686),
                                fontWeight: MyFontWeight.semi_bold,
                                fontSize: 10.sp,
                              ),
                            ),
                            Expanded(
                              child: Container(),
                              flex: 1,
                            ),
                            RoundButton(
                              text: "领取",
                              textColor: Colors.white,
                              backgroup: Color(0xFF32A060),
                              radius: 100,
                              padding: EdgeInsets.symmetric(vertical: 3.h, horizontal: 14.w),
                            ),
                            SizedBox(
                              width: 10.w,
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                  flex: 63,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}