huixiang_app/lib/integral/integral_page.dart

import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/round_button.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';

class IntegralPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _IntegralPage();
  }
}

class _IntegralPage extends State<IntegralPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).jifenxiangqing,
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: false,
        backgroundColor: Color(0xFF3A405A),
        elevation: 0,
        actions: [
          Container(
            alignment: Alignment.center,
            margin: EdgeInsets.only(right: 16),
            child: GestureDetector(
              onTap: () {
                Navigator.of(context)
                    .pushNamed('/router/integral_detailed_page');
              },
              child: Text(
                S.of(context).mingxi,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 18,
                    fontWeight: FontWeight.bold),
              ),
            ),
          )
        ],
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: [
              integralAndVip(),
              inForPoints(),
              integralTask(),
            ],
          ),
        ),
      ),
    );
  }

  Widget integralTask() {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.all(16),
      padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.all(Radius.circular(8)),
          boxShadow: [
            BoxShadow(
                color: Colors.black.withAlpha(12),
                offset: Offset(0, 3),
                blurRadius: 14,
                spreadRadius: 0)
          ]),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 10),
            child: Text(
              S.of(context).zuorenwudejifen,
              style: TextStyle(
                  color: Color(0xFF353535),
                  fontWeight: FontWeight.bold,
                  fontSize: 16),
            ),
          ),
          Container(
            child: AspectRatio(
              aspectRatio: 1.7,
              child: Swiper(
                  pagination: SwiperPagination(
                      alignment: Alignment.bottomCenter,
                      builder: DotSwiperPaginationBuilder(
                          size: 8,
                          activeSize: 8,
                          space: 5,
                          activeColor: Colors.black,
                          color: Colors.black.withAlpha(76))),
                  itemBuilder: (context, position) {
                    return taskPage();
                  },
                  itemCount: 3),
            ),
          ),
        ],
      ),
    );
  }

  Widget taskPage() {
    return Container(
      margin: EdgeInsets.only(left: 10, right: 10, top: 16),
      child: Column(
        children: [
          tashItem("assets/image/icon_integral_sign.png", S.of(context).meiriqiandao, 1),
          tashItem("assets/image/icon_integral_order.png", S.of(context).wanchengyicixiadan, 0),
          tashItem("assets/image/icon_integral_share.png", S.of(context).ricahngfenxiang, 1),
        ],
      ),
    );
  }

  Widget tashItem(img, text, status) {
    return Container(
      margin: EdgeInsets.only(top: 8, bottom: 8),
      alignment: Alignment.center,
      child: Row(
        children: [
          Image.asset(
            img,
            width: 24,
            height: 24,
          ),
          SizedBox(
            width: 21,
          ),
          Expanded(
            flex: 1,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  text,
                  style: TextStyle(fontSize: 14, color: Color(0xFF353535)),
                ),
                SizedBox(
                  width: 7,
                ),
                Row(
                  children: [
                    Text(
                      "+10",
                      style: TextStyle(fontSize: 12, color: Color(0xFF727272)),
                    ),
                    SizedBox(
                      width: 20,
                    ),
                    Text(
                      S.of(context).wancheng_("1/2"),
                      style: TextStyle(fontSize: 12, color: Color(0xFF727272)),
                    ),
                  ],
                )
              ],
            ),
          ),
          RoundButton(
            text: status == 0 ? S.of(context).quwancheng : S.of(context).yiwancheng,
            textColor: Colors.white,
            backgroup: status == 0 ? Color(0xFF32A060) : Color(0xFFA0A0A0),
            radius: 12,
            fontSize: 14,
            fontWeight: FontWeight.bold,
            padding: EdgeInsets.fromLTRB(12, 2, 12, 2),
          )
        ],
      ),
    );
  }

  Widget signInItem(position) {
    if (position == 6) {
      return Container(
        padding: EdgeInsets.all(6),
        decoration: BoxDecoration(
          color: Color(0xFFF0F0F2),
          borderRadius: BorderRadius.all(Radius.circular(4)),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "0${position + 1}",
                  style: TextStyle(
                      color: Color(0xFF353535),
                      fontSize: 14,
                      fontWeight: FontWeight.bold),
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                  alignment: Alignment.center,
                  child: Text(
                    S.of(context).shenmijifendali,
                    style: TextStyle(
                      color: Color(0xFF727272),
                      fontSize: 12,
                    ),
                  ),
                ),
              ],
            ),
            Container(
              alignment: Alignment.center,
              child: Image.asset(
                "assets/image/icon_gold_blessing.png",
                width: 59,
                height: 59,
              ),
            ),
          ],
        ),
      );
    } else {
      return Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Color(0xFFF0F0F2),
          borderRadius: BorderRadius.all(Radius.circular(4)),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "0${position + 1}",
              style: TextStyle(
                  color: Color(0xFF353535),
                  fontSize: 14,
                  fontWeight: FontWeight.bold),
            ),
            Container(
              alignment: Alignment.center,
              child: Image.asset(
                "assets/image/icon_gold_coin.png",
                width: 30,
                height: 30,
              ),
            ),
            Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 2, bottom: 7),
              child: Text(
                "+10",
                style: TextStyle(
                  color: Color(0xFF727272),
                  fontSize: 12,
                ),
              ),
            ),
          ],
        ),
      );
    }
  }

  Widget inForPoints() {
    return Container(
      child: Stack(
        children: [
          Container(
            height: 42,
            color: Color(0xFF3A405A),
          ),
          Container(
            width: double.infinity,
            margin: EdgeInsets.all(16),
            padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(8)),
                boxShadow: [
                  BoxShadow(
                      color: Colors.black.withAlpha(12),
                      offset: Offset(0, 3),
                      blurRadius: 14,
                      spreadRadius: 0)
                ]),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  S.of(context).qiandaolingjifen,
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                      color: Color(0xFF353535)),
                ),
                Text(
                  S.of(context).lianxuqiandaolingqushuangbeijifen,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 11,
                    color: Color(0xFF727272),
                  ),
                ),
                SizedBox(
                  height: 32,
                ),
                StaggeredGridView.countBuilder(
                    crossAxisCount: 4,
                    shrinkWrap: true,
                    itemCount: 7,
                    mainAxisSpacing: 8,
                    crossAxisSpacing: 18,
                    padding: EdgeInsets.only(bottom: 32),
                    physics: new NeverScrollableScrollPhysics(),
                    itemBuilder: (context, position) {
                      return signInItem(position);
                    },
                    staggeredTileBuilder: (position) {
                      return StaggeredTile.count(position == 6 ? 2 : 1, 1.22);
                    }),
                Container(
                  alignment: Alignment.center,
                  child: RoundButton(
                    text: S.of(context).lijiqiandao,
                    textColor: Colors.white,
                    backgroup: Color(0xFF32A060),
                    fontSize: 16,
                    padding: EdgeInsets.fromLTRB(16, 6, 16, 6),
                    radius: 4,
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget integralAndVip() {
    return Container(
      padding: EdgeInsets.only(top: 16, bottom: 16),
      color: Color(0xFF3A405A),
      child: Row(
        children: [
          Expanded(
              flex: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "90",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 21,
                        color: Colors.white),
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Text(
                    S.of(context).wodejifenzhi,
                    style: TextStyle(fontSize: 12, color: Color(0xFFF2F2F2)),
                  )
                ],
              )),
          Container(
            width: 2,
            height: 32,
            color: Color(0xFFFFFFFF),
          ),
          Expanded(
              flex: 1,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text(
                    "白金",
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 21,
                        color: Colors.white),
                  ),
                  SizedBox(
                    height: 6,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        S.of(context).wodehuiyuandengji,
                        style:
                            TextStyle(fontSize: 12, color: Color(0xFFF2F2F2)),
                      ),
                      Icon(
                        Icons.keyboard_arrow_right,
                        color: Colors.white,
                        size: 15,
                      )
                    ],
                  )
                ],
              )),
        ],
      ),
    );
  }
}