huixiang_app/lib/view_widget/mine_vip_view.dart

import 'dart:io';

import 'package:flutter/material.dart';

class MineVipView extends StatelessWidget {

  final int vipLevel;
  final int curLevel;
  final double padding;

  Color levelColor;
  Color textColor;
  List<Color> linearColor;
  String topLeft;
  String levelText;

  MineVipView(this.vipLevel,{
    this.padding = 16,
    this.curLevel
  }){
    linearColor = [
      Color(0xFFD6F6F3),
      Color(0xFF86BEBA),
    ];
    levelColor = Color(0xFF558B87);
    textColor = Colors.white;

    if (curLevel == vipLevel) {
      topLeft = "当前等级";
    } else {
      topLeft = "下一等级";
    }

    switch (vipLevel) {
      case 1:
        {
          linearColor = [
            Color(0xFFD6F6F3),
            Color(0xFF86BEBA),
          ];
          levelColor = Color(0xFF558B87);
          levelText = "LV1 青铜会员";
          break;
        }
      case 2:
        {
          linearColor = [
            Color(0xFFF2F2F2),
            Color(0xFFBEBEBE),
          ];
          levelColor = Color(0xFF575757);
          textColor = Color(0xFF575757);
          levelText = "LV2 白银会员";
          break;
        }
      case 3:
        {
          linearColor = [
            Color(0xFFFEF5DC),
            Color(0xFFD1B97D),
          ];
          levelColor = Color(0xFFAE9B6D);
          levelText = "LV3 黄金会员";
          break;
        }
      case 4:
        {
          linearColor = [
            Color(0xFFEEEEEF),
            Color(0xFFA999DB),
          ];
          levelColor = Color(0xFF887CB4);
          levelText = "LV4 钻石会员";
          break;
        }
      case 5:
        {
          linearColor = [
            Color(0xFFEEEEEF),
            Color(0xFF000000),
          ];
          levelColor = Color(0xFF000000);
          levelText = "LV5 至尊会员";
          break;
        }
    };
  }

  @override
  Widget build(BuildContext context) {


    return AspectRatio(
      aspectRatio: Platform.isAndroid ? 1.7 : 2.0,
      child: Container(
        margin: EdgeInsets.fromLTRB(padding, 16, padding, 8),
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: linearColor),
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                  color: Colors.black.withAlpha(12),
                  offset: Offset(0, 3),
                  blurRadius: 14,
                  spreadRadius: 0)
            ]),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: 95,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Container(
                        padding: EdgeInsets.fromLTRB(9, 4, 8, 4),
                        decoration: BoxDecoration(
                            color: levelColor,
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(8),
                                bottomRight: Radius.circular(8))),
                        child: Text(
                          topLeft,
                          style: TextStyle(
                            fontSize: 12,
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                          ),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.only(left: 13),
                        child: Text(
                          levelText,
                          style: TextStyle(
                            color: textColor,
                            fontWeight: FontWeight.bold,
                            fontSize: 23,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 11, bottom: 9),
                  child: Image.asset(
                    "assets/image/icon_mine_huixiang_logo.png",
                    width: 86,
                    height: 86,
                    fit: BoxFit.contain,
                  ),
                ),
              ],
            ),
            Container(
              margin: EdgeInsets.only(left: 13, right: 12),
              child: Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.baseline,
                    textBaseline: TextBaseline.alphabetic,
                    children: [
                      Text(
                        "41积分 到下一个等级",
                        style: TextStyle(
                          color: textColor,
                          fontSize: 14,
                        ),
                      ),
                      Text.rich(
                        TextSpan(children: [
                          TextSpan(
                            text: "84",
                            style: TextStyle(
                                fontSize: 26,
                                fontWeight: FontWeight.bold,
                                color: textColor),
                          ),
                          TextSpan(
                            text: "/125",
                            style:
                            TextStyle(fontSize: 14, color: textColor),
                          ),
                        ]),
                      ),
                    ],
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 12, bottom: 12),
                    height: 8,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(6.5),
                      child: LinearProgressIndicator(
                        value: 0.672,
                        backgroundColor: Colors.white,
                        color: levelColor,
                      ),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Text(
                        "开通日期:2015.09.06",
                        style: TextStyle(
                          color: textColor,
                          fontSize: 14,
                        ),
                      ),
                      Icon(
                        Icons.qr_code,
                        size: 24,
                        color: Colors.white,
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}