Fiji/ysairplane/lib/code/YSSightseeingPlaneDetail.dart

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:ysairplane/code/YSComment.dart';
import 'package:ysairplane/tools/YSTools.dart';

class YSSightseeingPlaneDetail extends StatefulWidget {
  @override
  _YSSightseeingPlaneDetailState createState() => _YSSightseeingPlaneDetailState();
}

class _YSSightseeingPlaneDetailState extends State<YSSightseeingPlaneDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF1F2F3),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(0),
        child: Stack(
          children: [
            Container(
              height: MediaQuery.of(context).padding.top+hsp(370),
              width: MediaQuery.of(context).size.width,
              color: Colors.lightGreen,
            ),
            GestureDetector(
              onTap: (){
                Navigator.pop(context);
              },
              child: Container(
                margin: EdgeInsets.only(left: hsp(30),right: wsp(30),top: MediaQuery.of(context).padding.top+hsp(50)),
                child: Icon(Icons.arrow_back_ios,color: Colors.white,size: hsp(50),),
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: MediaQuery.of(context).size.width-hsp(150),top: MediaQuery.of(context).padding.top+hsp(50)),
              child: Row(
                children: [
                  GestureDetector(
                    child: Icon(Icons.star_half,size: zsp(50),color: Colors.white,),
                    onTap: (){
                      showModalBottomSheet(
                        backgroundColor: Colors.transparent,
                        isScrollControlled: true,
                        context: context,
                        builder: (context){
                          return Container(
                            height: MediaQuery.of(context).size.height,
                            child: Column(
                              children: [
                                Container(
                                  margin: EdgeInsets.only(top: hsp(100),left: hsp(75),right: hsp(75),bottom: hsp(50)),
                                  decoration: BoxDecoration(
                                    color: Colors.lightGreen,
                                    borderRadius: BorderRadius.all(Radius.circular(10))
                                  ),
                                  height: MediaQuery.of(context).size.height-hsp(450),
                                ),
                                Container(
                                  height: hsp(300),
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.only(topLeft: Radius.circular(10),topRight: Radius.circular(10))
                                  ),
                                  child: Column(
                                    children: [
                                      Container(
                                        height: hsp(100),
                                        padding: EdgeInsets.only(left: 15,right: 15),
                                        child: Row(
                                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                          children: [
                                            Container(),
                                            Text('分享到',style: TextStyle(fontSize: 15,color: Color(0xFF000000),decoration: TextDecoration.none,fontWeight: FontWeight.bold),),
                                            GestureDetector(child: Icon(Icons.close,size: 20,color: Color(0xFF000000),),onTap: (){Navigator.pop(context);},)
                                          ],
                                        ),
                                      ),
                                      Divider(height: 0.5,thickness: 0.5,color: Color(0x1A000000),),
                                      Container(
                                        height: hsp(200)-0.5,
                                        child: Row(
                                          children: [
                                            GestureDetector(
                                              child: Container(
                                                width: MediaQuery.of(context).size.width/2-0.25,
                                                height: hsp(150),
                                                child: Column(
                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                  children: [
                                                    Image(
                                                        image: AssetImage('lib/images/wexinLogo.png'),
                                                        height: 30,
                                                        width: 30
                                                    ),
                                                    Text('微信好友',style: TextStyle(fontSize: 15,color: Color(0xFF81858C),decoration: TextDecoration.none),),
                                                  ],
                                                ),
                                              ),
                                              onTap: (){
                                                Navigator.pop(context);
                                              },
                                            ),
                                            Container(
                                                height: hsp(100),
                                                width: 0.5,
                                                color: Color(0x1A000000)
                                            ),
                                            GestureDetector(
                                              onTap: (){
                                                Navigator.pop(context);
                                              },
                                              child: Container(
                                                width: MediaQuery.of(context).size.width/2-0.25,
                                                height: hsp(150),
                                                child: Column(
                                                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                                  children: [
                                                    Image(
                                                        image: AssetImage('lib/images/aliLogo.png'),
                                                        height: 30,
                                                        width: 30
                                                    ),
                                                    Text('生成海报',style: TextStyle(fontSize: 15,color: Color(0xFF81858C),decoration: TextDecoration.none),),
                                                  ],
                                                ),
                                              ),
                                            )
                                          ],
                                        ),
                                      ),
                                    ],
                                  ),
                                )
                              ],
                            ),
                          );
                        }
                      );
                    },
                  ),
                  Icon(Icons.star_half,size: zsp(50),color: Colors.white,),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: MediaQuery.of(context).padding.top+hsp(350)),
              height: MediaQuery.of(context).size.height-MediaQuery.of(context).padding.top-hsp(460),
              width: MediaQuery.of(context).size.width,
              decoration: BoxDecoration(
                  color: Color(0xFFF1F2F4),
                  borderRadius: BorderRadius.only(topRight: Radius.circular(10),topLeft: Radius.circular(10))
              ),
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      padding: EdgeInsets.only(left: hsp(30),top: hsp(30),bottom: hsp(20),right: hsp(30)),
                      child: Text('周年特惠 | 成都固定翼飞行体验480元/人',style: TextStyle(fontSize: zsp(36),color: Color(0xFF343434),fontWeight: FontWeight.bold),),
                      color: Colors.white,
                      width: MediaQuery.of(context).size.width,
                    ),
                    Container(
                      color: Colors.white,
                      width: MediaQuery.of(context).size.width,
                      child: Row(
                        children: [
                          Container(
                            width: wsp(70),
                            height: hsp(40),
                            margin: EdgeInsets.only(left: hsp(30)),
                            child: Text('5.0',style: TextStyle(fontSize: zsp(25),color: Colors.white),),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: Color(0xFFED5E58),
                              borderRadius: BorderRadius.only(topLeft: Radius.circular(50),bottomLeft: Radius.circular(50))
                            ),
                          ),
                          GestureDetector(
                            onTap: (){
                              Navigator.of(context).push(
                                CupertinoPageRoute(
                                  builder: (context){
                                    return YSComment();
                                  }
                                )
                              );
                            },
                            child: Container(
                              width: wsp(150),
                              height: hsp(40),
                              child: Text('99条点评 >',style: TextStyle(fontSize: zsp(20),color: Colors.white),),
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                  color: Color(0xFFFD8B86),
                                  borderRadius: BorderRadius.only(bottomRight: Radius.circular(50),topRight: Radius.circular(50))
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    Container(
                      padding: EdgeInsets.only(left: hsp(30),bottom: hsp(20),top: hsp(20)),
                      color: Colors.white,
                      width: MediaQuery.of(context).size.width,
                      child: Row(
                        children: [
                          Icon(Icons.location_on,color: Color(0xFF5E5E5E),size: hsp(35),),
                          Text(' 成都市双流县龙阳山景区',style: TextStyle(fontSize: zsp(23),color: Color(0xFF5E5E5E)),),
                        ],
                      ),
                    ),
                    Divider(height: 0.5,thickness: 0.5,color: Color(0xFFE4E6E7),indent: hsp(30),endIndent: hsp(30),),
                    Container(
                      padding: EdgeInsets.only(left: hsp(30),bottom: hsp(20),top: hsp(20),right: hsp(30)),
                      color: Colors.white,
                      width: MediaQuery.of(context).size.width,
                      height: hsp(80),
                      child: Row(
                        children: [
                          RichText(
                            text: TextSpan(
                              text: '明珠航空  ',
                              style: TextStyle(fontSize: zsp(26),color: Color(0xFF3283D9)),
                              children: [
                                TextSpan(
                                  text: '>',
                                  style: TextStyle(color: Color(0xFFC1C1C1)),
                                )
                              ]
                            ),
                          ),
                          Container(width: wsp(40),),
                          RichText(
                            text: TextSpan(
                                text: 'R144  ',
                                style: TextStyle(fontSize: zsp(26),color: Color(0xFF3283D9)),
                                children: [
                                  TextSpan(
                                    text: '>',
                                    style: TextStyle(color: Color(0xFFC1C1C1)),
                                  )
                                ]
                            ),
                          )

                        ],
                      ),
                    ),
                    Divider(height: 0.5,thickness: 0.5,color: Color(0xFFE4E6E7),indent: hsp(30),endIndent: hsp(30),),
                    Container(
                      padding: EdgeInsets.only(left: hsp(30),bottom: hsp(20),top: hsp(20),right: hsp(30)),
                      child: Text('选择套餐',style: TextStyle(fontSize: zsp(30),color: Color(0xFF222222)),),
                      color: Colors.white,
                      width: MediaQuery.of(context).size.width,
                    ),
                    ListView.separated(
                      itemBuilder: (context,index){
                        return Container(
                          padding: EdgeInsets.only(left: hsp(30),bottom: hsp(20),top: hsp(20),right: hsp(30)),
                          width: MediaQuery.of(context).size.width,
                          color: Colors.white,
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('直升机体验（最大载客3人, 飞行时长3分钟）',style: TextStyle(fontSize: zsp(24),color: Color(0xFF888888)),),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Text('￥599',style: TextStyle(fontSize: zsp(32),color: Color(0xFFEB423B),fontWeight: FontWeight.bold),),
                                  Container(
                                    height: hsp(40),
                                    width: hsp(100),
                                    decoration: BoxDecoration(
                                      color: Color(0xFFEA4D45),
                                      borderRadius: BorderRadius.all(Radius.circular(3))
                                    ),
                                    alignment: Alignment.center,
                                    child: Text('预订',style: TextStyle(fontSize: zsp(20),color: Colors.white),),
                                  )
                                ],
                              )
                            ],
                          ),
                        );
                      },
                      separatorBuilder: (context,index){
                        return Divider(height: 0.5,thickness: 0.5,color: Color(0xFFE4E6E7),);
                      },
                      itemCount: 2,
                      padding: EdgeInsets.all(0),
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                    ),
                    Container(
                      margin: EdgeInsets.only(top: hsp(10)),
                      width: MediaQuery.of(context).size.width,
                      color: Colors.white,
                      padding: EdgeInsets.only(left: hsp(30),bottom: hsp(20),top: hsp(20),right: hsp(30)),
                      child: Text('详情',style: TextStyle(fontSize: zsp(30),color: Color(0xFF343434),fontWeight: FontWeight.bold),),
                    ),
                    Container(
                      padding: EdgeInsets.all(hsp(30)),
                      width: MediaQuery.of(context).size.width,
                      color: Colors.white,
                    ),
                    Container(
                      margin: EdgeInsets.only(top: hsp(10)),
                      width: MediaQuery.of(context).size.width,
                      color: Colors.white,
                      padding: EdgeInsets.only(left: hsp(30),bottom: hsp(20),top: hsp(20),right: hsp(30)),
                      child: Text('相关推荐',style: TextStyle(fontSize: zsp(30),color: Color(0xFF343434),fontWeight: FontWeight.bold),),
                    ),
                    Container(
                      padding: EdgeInsets.all(hsp(30)),
                      width: MediaQuery.of(context).size.width,
                      color: Colors.white,
                    )
                  ],
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.only(top: MediaQuery.of(context).size.height-hsp(110)),
              height: hsp(110),
              color: Colors.white,
              padding: EdgeInsets.only(left: wsp(40),right: wsp(40)),
              alignment: Alignment.center,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.headset,color: Color(0xFF666666),size: zsp(40),),
                      Text('咨询',style: TextStyle(fontSize: zsp(22),color: Color(0xFF767676)),)
                    ],
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(Icons.star_border,color: Color(0xFF666666),size: zsp(40),),
                      Text('加入收藏',style: TextStyle(fontSize: zsp(22),color: Color(0xFF767676)),)
                    ],
                  ),
                  Container(
                    height: hsp(80),
                    width: MediaQuery.of(context).size.width*0.6,
                    decoration: BoxDecoration(
                      color: Color(0xFF007EFF),
                      borderRadius: BorderRadius.all(Radius.circular(50))
                    ),
                    alignment: Alignment.center,
                    child: Text('立即预订',style: TextStyle(fontSize: zsp(36),color: Colors.white,fontWeight: FontWeight.bold),),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}