mobileCyberGamesApp/lib/pages/Shop.dart

import 'package:flutter/material.dart';
import '../styles/colors.dart';

class Shop extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ShopState();
  }

  Shop({Key key}) : super(key: key);
}

class _ShopState extends State<Shop> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商城'),
        centerTitle: true,
      ),
      body: Container(
        padding: EdgeInsets.all(7.5),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            childAspectRatio: 105 / 120,
          ),
          itemCount: 9,
          itemBuilder: (context, index) {
            switch (index) {
              case 0:
                return shopItem(
                  icon: 'images/icon_jifen_01.png',
                  text: '+10%积分',
                  money: 100,
                  color: Color(0xFF3EF166),
                );
              case 1:
                return shopItem(
                  icon: 'images/icon_jifen_02.png',
                  text: '+20%积分',
                  money: 300,
                  color: Color(0xFFF2F2F2),
                );
              case 2:
                return shopItem(
                  icon: 'images/icon_jifen_03.png',
                  text: '+40%积分',
                  money: 500,
                  color: Colors.yellow,
                );
              case 3:
                return shopItem(
                  icon: 'images/icon_jifen_01.png',
                  text: '+10%积分',
                  money: 100,
                  color: Color(0xFF3EF166),
                );
              case 4:
                return shopItem(
                  icon: 'images/icon_jifen_02.png',
                  text: '+20%积分',
                  money: 300,
                  color: Color(0xFFF2F2F2),
                );
              case 5:
                return shopItem(
                  icon: 'images/icon_jifen_03.png',
                  text: '+40%积分',
                  money: 500,
                  color: Colors.yellow,
                );
              case 6:
                return shopItem(
                  icon: 'images/icon_jifen_01.png',
                  text: '+10%积分',
                  money: 100,
                  color: Color(0xFF3EF166),
                );
              case 7:
                return shopItem(
                  icon: 'images/icon_jifen_02.png',
                  text: '+20%积分',
                  money: 300,
                  color: Color(0xFFF2F2F2),
                );
              case 8:
                return shopItem(
                  icon: 'images/icon_jifen_03.png',
                  text: '+40%积分',
                  money: 500,
                  color: Colors.yellow,
                );
            }
            return shopItem(
              icon: 'images/icon_jifen_01.png',
              text: '+10%积分',
              money: 100,
              color: Color(0xFF3EF166),
            );
          },
        ),
      ),
    );
  }

  Widget shopItem(
      {@required String icon,
      @required String text,
      @required int money,
      @required Color color}) {
    return GestureDetector(
      child: Container(
        padding: EdgeInsets.all(7.5),
        height: 120,
        child: Container(
          color: Color(0xFF293354),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.asset(icon),
              Text(
                text,
                style: TextStyle(color: color, fontSize: 10),
              ),
              Container(
                margin: EdgeInsets.only(top: 16),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Image.asset('images/icon_money.png'),
                    Container(
                      margin: EdgeInsets.only(left: 2),
                      child: Text(
                        money.toString(),
                        style: TextStyle(
                          color: Colors.yellow,
                          fontSize: 14,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
      onTap: () {
        // showModalBottomSheet(
        //   context: context,
        //   builder: (context) {
        //     return Theme(
        //       data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
        //       child: ChooseCount(),
        //     );
        //   },
        // );
      },
    );
  }
}

class ChooseCount extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ChooseCountState();
  }
}

class ChooseCountState extends State<ChooseCount> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(16, 0, 16, 10),
      height: 285,
      width: double.infinity,
      color: Colors.transparent,
      child: Column(
        children: <Widget>[
          Container(
            height: 212,
            child: Stack(
              children: <Widget>[
                Align(
                  alignment: Alignment.topCenter,
                  child: Container(
                    height: 197,
                    margin: EdgeInsets.only(top: 15),
                    color: SUB_COLOR,
                  ),
                ),
                Align(
                  alignment: Alignment.topLeft,
                  child: Container(
                    height: 85,
                    width: 85,
                    margin: EdgeInsets.fromLTRB(15, 0, 0, 0),
                    color: SUB_COLOR,
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 15),
            child: MaterialButton(
              highlightElevation: 0,
              elevation: 0,
              color: PRIMARY_COLOR,
              height: 48,
              minWidth: double.infinity,
              child: Text(
                '确定购买',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16,
                  fontWeight: FontWeight.bold,
                ),
              ),
              onPressed: () {},
            ),
          )
        ],
      ),
    );
  }
}