import 'package:feelverapp/util/SizeConfig.dart';
import 'package:feelverapp/util/rating_star.dart';
import 'package:flutter/material.dart';

class ShopServicePage extends StatefulWidget {
  @override
  _ShopServicePageState createState() => _ShopServicePageState();
}

class _ShopServicePageState extends State<ShopServicePage> {
  double rate1 = 0;
  double rate2 = 0;
  double rate3 = 0;
  double rate4 = 0;
  double rate5 = 0;

  @override
  Widget build(BuildContext context) {
    SizeConfig(context);
    return Container(
      child: ListView(
        children: <Widget>[
          Card1(),
          Card2(),
          Card3(),
          Card4(),
          Card5(),
        ],
      ),
    );
  }

  Widget Card1() {
    return Card(
      margin: EdgeInsets.only(
          right: SizeConfig.getPadding(16),
          left: SizeConfig.getPadding(16),
          top: SizeConfig.getPadding(10),
          bottom: SizeConfig.getPadding(10)),
      child: Container(
        margin: EdgeInsets.only(right: 15, left: 15, bottom: 20, top: 20),
//                          color: Colors.blueGrey,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 3,
                  child: Container(
//                          color: Colors.blue,
                    height: SizeConfig.getHeight(250),
                    child: Image.asset(
                      "assets/images/demo_img.png",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Container(
                    margin: EdgeInsets.only(left: 15),
//                          color: Colors.yellow,
                    height: SizeConfig.getHeight(250),
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(10),
                          alignment: Alignment.topLeft,
//                                  color: Colors.red,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "Thai Body Balance",
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: SizeConfig.getFontSize(18),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                "SPA Cenvaree @ Centara Grand CentralWorld Bangkok",
                                style: TextStyle(
                                    color: Color(0xff969696),
                                    fontSize: SizeConfig.getFontSize(11),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 10, right: 10),
                          alignment: Alignment.topLeft,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/pin_drop.png',
                                    height: 20,
                                    width: 20,
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "พญาไท กรุงเทพฯ",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Icon(
                                    Icons.access_time,
                                    color: Color(0xffEEAFB7),
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "150 Min",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget>[
                                  Text(
                                    "฿599.0",
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(12),
                                      decoration: TextDecoration.lineThrough,
                                    ),
                                  ),
                                  SizedBox(
                                    width: 15,
                                  ),
                                  Text(
                                    "฿199.00",
                                    style: TextStyle(
                                        color: Colors.red,
                                        fontSize: SizeConfig.getFontSize(18),
                                        fontFamily: "SF_Pro_Text",
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: SizeConfig.getHeight(5),
                              ),
                              Container(
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    RatingStar(
                                      isRating: true,
                                      rate: rate1,
                                      starSize: 20,
                                      onChangeRate: (i) {
                                        setState(() {
                                          rate1 = i;
                                          print(i);
                                        });
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget Card2() {
    return Card(
      margin: EdgeInsets.only(
          right: SizeConfig.getPadding(16),
          left: SizeConfig.getPadding(16),
          top: SizeConfig.getPadding(10),
          bottom: SizeConfig.getPadding(10)),
      child: Container(
        margin: EdgeInsets.only(right: 15, left: 15, bottom: 20, top: 20),
//                          color: Colors.blueGrey,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 3,
                  child: Container(
//                          color: Colors.blue,
                    height: SizeConfig.getHeight(250),
                    child: Image.asset(
                      "assets/images/demo_img.png",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Container(
                    margin: EdgeInsets.only(left: 15),
//                          color: Colors.yellow,
                    height: SizeConfig.getHeight(250),
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(10),
                          alignment: Alignment.topLeft,
//                                  color: Colors.red,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "Thai Body Balance",
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: SizeConfig.getFontSize(18),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                "SPA Cenvaree @ Centara Grand CentralWorld Bangkok",
                                style: TextStyle(
                                    color: Color(0xff969696),
                                    fontSize: SizeConfig.getFontSize(11),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 10, right: 10),
                          alignment: Alignment.topLeft,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/pin_drop.png',
                                    height: 20,
                                    width: 20,
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "พญาไท กรุงเทพฯ",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Icon(
                                    Icons.access_time,
                                    color: Color(0xffEEAFB7),
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "150 Min",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget>[
                                  Text(
                                    "฿599.0",
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(12),
                                      decoration: TextDecoration.lineThrough,
                                    ),
                                  ),
                                  SizedBox(
                                    width: 15,
                                  ),
                                  Text(
                                    "฿199.00",
                                    style: TextStyle(
                                        color: Colors.red,
                                        fontSize: SizeConfig.getFontSize(18),
                                        fontFamily: "SF_Pro_Text",
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: SizeConfig.getHeight(5),
                              ),
                              Container(
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    RatingStar(
                                      isRating: true,
                                      rate: rate2,
                                      starSize: 20,
                                      onChangeRate: (i) {
                                        setState(() {
                                          rate2 = i;
                                          print(i);
                                        });
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget Card3() {
    return Card(
      margin: EdgeInsets.only(
          right: SizeConfig.getPadding(16),
          left: SizeConfig.getPadding(16),
          top: SizeConfig.getPadding(10),
          bottom: SizeConfig.getPadding(10)),
      child: Container(
        margin: EdgeInsets.only(right: 15, left: 15, bottom: 20, top: 20),
//                          color: Colors.blueGrey,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 3,
                  child: Container(
//                          color: Colors.blue,
                    height: SizeConfig.getHeight(250),
                    child: Image.asset(
                      "assets/images/demo_img.png",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Container(
                    margin: EdgeInsets.only(left: 15),
//                          color: Colors.yellow,
                    height: SizeConfig.getHeight(250),
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(10),
                          alignment: Alignment.topLeft,
//                                  color: Colors.red,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "Thai Body Balance",
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: SizeConfig.getFontSize(18),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                "SPA Cenvaree @ Centara Grand CentralWorld Bangkok",
                                style: TextStyle(
                                    color: Color(0xff969696),
                                    fontSize: SizeConfig.getFontSize(11),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 10, right: 10),
                          alignment: Alignment.topLeft,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/pin_drop.png',
                                    height: 20,
                                    width: 20,
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "พญาไท กรุงเทพฯ",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Icon(
                                    Icons.access_time,
                                    color: Color(0xffEEAFB7),
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "150 Min",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget>[
                                  Text(
                                    "฿599.0",
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(12),
                                      decoration: TextDecoration.lineThrough,
                                    ),
                                  ),
                                  SizedBox(
                                    width: 15,
                                  ),
                                  Text(
                                    "฿199.00",
                                    style: TextStyle(
                                        color: Colors.red,
                                        fontSize: SizeConfig.getFontSize(18),
                                        fontFamily: "SF_Pro_Text",
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: SizeConfig.getHeight(5),
                              ),
                              Container(
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    RatingStar(
                                      isRating: true,
                                      rate: rate3,
                                      starSize: 20,
                                      onChangeRate: (i) {
                                        setState(() {
                                          rate3 = i;
                                          print(i);
                                        });
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget Card4() {
    return Card(
      margin: EdgeInsets.only(
          right: SizeConfig.getPadding(16),
          left: SizeConfig.getPadding(16),
          top: SizeConfig.getPadding(10),
          bottom: SizeConfig.getPadding(10)),
      child: Container(
        margin: EdgeInsets.only(right: 15, left: 15, bottom: 20, top: 20),
//                          color: Colors.blueGrey,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 3,
                  child: Container(
//                          color: Colors.blue,
                    height: SizeConfig.getHeight(250),
                    child: Image.asset(
                      "assets/images/demo_img.png",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Container(
                    margin: EdgeInsets.only(left: 15),
//                          color: Colors.yellow,
                    height: SizeConfig.getHeight(250),
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(10),
                          alignment: Alignment.topLeft,
//                                  color: Colors.red,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "Thai Body Balance",
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: SizeConfig.getFontSize(18),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                "SPA Cenvaree @ Centara Grand CentralWorld Bangkok",
                                style: TextStyle(
                                    color: Color(0xff969696),
                                    fontSize: SizeConfig.getFontSize(11),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 10, right: 10),
                          alignment: Alignment.topLeft,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/pin_drop.png',
                                    height: 20,
                                    width: 20,
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "พญาไท กรุงเทพฯ",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Icon(
                                    Icons.access_time,
                                    color: Color(0xffEEAFB7),
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "150 Min",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget>[
                                  Text(
                                    "฿599.0",
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(12),
                                      decoration: TextDecoration.lineThrough,
                                    ),
                                  ),
                                  SizedBox(
                                    width: 15,
                                  ),
                                  Text(
                                    "฿199.00",
                                    style: TextStyle(
                                        color: Colors.red,
                                        fontSize: SizeConfig.getFontSize(18),
                                        fontFamily: "SF_Pro_Text",
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: SizeConfig.getHeight(5),
                              ),
                              Container(
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    RatingStar(
                                      isRating: true,
                                      rate: rate4,
                                      starSize: 20,
                                      onChangeRate: (i) {
                                        setState(() {
                                          rate4 = i;
                                          print(i);
                                        });
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget Card5() {
    return Card(
      margin: EdgeInsets.only(
          right: SizeConfig.getPadding(16),
          left: SizeConfig.getPadding(16),
          top: SizeConfig.getPadding(10),
          bottom: SizeConfig.getPadding(10)),
      child: Container(
        margin: EdgeInsets.only(right: 15, left: 15, bottom: 20, top: 20),
//                          color: Colors.blueGrey,
        child: Column(
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  flex: 3,
                  child: Container(
//                          color: Colors.blue,
                    height: SizeConfig.getHeight(250),
                    child: Image.asset(
                      "assets/images/demo_img.png",
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Container(
                    margin: EdgeInsets.only(left: 15),
//                          color: Colors.yellow,
                    height: SizeConfig.getHeight(250),
                    child: Column(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.all(10),
                          alignment: Alignment.topLeft,
//                                  color: Colors.red,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "Thai Body Balance",
                                style: TextStyle(
                                    color: Colors.black,
                                    fontSize: SizeConfig.getFontSize(18),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                              SizedBox(
                                height: 5,
                              ),
                              Text(
                                "SPA Cenvaree @ Centara Grand CentralWorld Bangkok",
                                style: TextStyle(
                                    color: Color(0xff969696),
                                    fontSize: SizeConfig.getFontSize(11),
                                    fontFamily: "SF_Pro_Text",
                                    fontWeight: FontWeight.w500),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          padding: EdgeInsets.only(left: 10, right: 10),
                          alignment: Alignment.topLeft,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Image.asset(
                                    'assets/images/pin_drop.png',
                                    height: 20,
                                    width: 20,
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "พญาไท กรุงเทพฯ",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.center,
                                children: <Widget>[
                                  Icon(
                                    Icons.access_time,
                                    color: Color(0xffEEAFB7),
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    "150 Min",
                                    style: TextStyle(
                                      color: Colors.black,
                                      fontSize: SizeConfig.getFontSize(13),
                                      fontFamily: "SF_Pro_Text",
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget>[
                                  Text(
                                    "฿599.0",
                                    style: TextStyle(
                                      fontSize: SizeConfig.getFontSize(12),
                                      decoration: TextDecoration.lineThrough,
                                    ),
                                  ),
                                  SizedBox(
                                    width: 15,
                                  ),
                                  Text(
                                    "฿199.00",
                                    style: TextStyle(
                                        color: Colors.red,
                                        fontSize: SizeConfig.getFontSize(18),
                                        fontFamily: "SF_Pro_Text",
                                        fontWeight: FontWeight.w500),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: SizeConfig.getHeight(5),
                              ),
                              Container(
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    RatingStar(
                                      isRating: true,
                                      rate: rate5,
                                      starSize: 20,
                                      onChangeRate: (i) {
                                        setState(() {
                                          rate5 = i;
                                          print(i);
                                        });
                                      },
                                    ),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
