import 'package:flutter/material.dart'; import 'package:huixiang/generated/l10n.dart'; import 'package:huixiang/view_widget/border_text.dart'; import 'package:huixiang/view_widget/pay_input_view.dart'; import 'package:huixiang/view_widget/round_button.dart'; import 'package:huixiang/view_widget/separator.dart'; class OrderDetailPage extends StatefulWidget { @override State createState() { return _OrderDetailPage(); } } class _OrderDetailPage extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( S.of(context).jinxingzhongdedingdan, style: TextStyle(color: Colors.white), ), centerTitle: false, backgroundColor: Color(0xFF3A405A), brightness: Brightness.dark, elevation: 0, 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, bottom: PreferredSize( preferredSize: Size(double.infinity, 88), child: Container( height: 88, padding: EdgeInsets.fromLTRB(16, 0, 16, 14), child: Row( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end, children: [ Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: 20, width: 82, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), border: Border.all( width: 1, color: Color(0xFF32A060), ), ), child: Stack( alignment: Alignment.lerp( Alignment.centerLeft, Alignment.centerRight, 0, ), children: [ Positioned( left: 0, child: GestureDetector( onTap: () { setState(() { type = 0; }); }, child: RoundButton( text: S.of(context).ziqu, width: 42, height: 20, textColor: Colors.white, padding: EdgeInsets.fromLTRB(8, 1, 8, 1), backgroup: type == 0 ? Color(0xFF32A060) : Colors.transparent, radius: 15, ), ), ), Positioned( right: 0, child: GestureDetector( onTap: () { setState(() { type = 1; }); }, child: RoundButton( text: S.of(context).waisong, width: 42, height: 20, textColor: Colors.white, padding: EdgeInsets.fromLTRB(8, 1, 8, 1), backgroup: type == 1 ? Color(0xFF32A060) : Colors.transparent, radius: 15, ), ), ), ], ), ), Text( S.of(context).qingzaiguidingshijianneizhifu, style: TextStyle( color: Colors.white, fontSize: 12, ), ), ], ), ), Container( height: 33, child: Row( mainAxisSize: MainAxisSize.min, children: [ AspectRatio( aspectRatio: 1, child: BorderText( text: "02", textColor: Colors.white, fontSize: 21, fontWeight: FontWeight.bold, borderColor: Colors.white, borderWidth: 1, padding: EdgeInsets.all(2), ), ), SizedBox( width: 8, ), Text( ":", style: TextStyle( color: Colors.white, fontSize: 21, ), ), SizedBox( width: 8, ), AspectRatio( aspectRatio: 1, child: BorderText( text: "02", textColor: Colors.white, fontSize: 21, fontWeight: FontWeight.bold, borderColor: Colors.white, borderWidth: 1, padding: EdgeInsets.all(2), ), ), ], ), ) ], ), ), ), ), body: Container( child: Stack( children: [ Container( height: 36, color: Color(0xFF3A405A), ), SingleChildScrollView( physics: BouncingScrollPhysics(), child: Container( child: Column( children: [ buildAddress(), buildCommodity(), buildOrderInfo(), Container( height: 42, ), ], ), ), ), ], ), ), ); } var type = 0; Widget buildAddress() { return Container( margin: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 2), padding: EdgeInsets.all(20), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.black.withAlpha(12), offset: Offset(0, 3), blurRadius: 14, spreadRadius: 0, ), ], borderRadius: BorderRadius.all(Radius.circular(8)), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Image.asset( "assets/image/icon_location_address.png", width: 28, height: 28, ), Expanded( child: Text( "前进麦味·天然烘焙(凯德1818店)", overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 14, color: Color(0xFF4C4C4C)), ), ), Icon( Icons.keyboard_arrow_right, size: 16, color: Colors.black, ) ], ), Container( margin: EdgeInsets.only(left: 28), child: Text( "武昌区中国铁建凯德1818蓝调步行街中北路109附33门牌号05", overflow: TextOverflow.ellipsis, style: TextStyle(fontSize: 10, color: Color(0xFFA29E9E)), ), ), Container( margin: EdgeInsets.only(top: 20, bottom: 16), child: MySeparator( width: 5, height: 1, color: Color(0xFFA29E9E), ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, crossAxisAlignment: CrossAxisAlignment.center, children: [ Column( children: [ Image.asset( "assets/image/icon_order_cancel.png", width: 24, height: 24, fit: BoxFit.contain, ), SizedBox( height: 8, ), Text( S.of(context).quxiaodingdan, style: TextStyle( color: Color(0xFF353535), fontSize: 12, ), ) ], ), GestureDetector( onTap: () { showModalBottomSheet( context: context, builder: (context) { return PayInputWidget(); }); }, child: Column( children: [ Image.asset( "assets/image/icon_order_renminbi.png", width: 24, height: 24, fit: BoxFit.contain, ), SizedBox( height: 8, ), Text( S.of(context).jixuzhifu, style: TextStyle(color: Color(0xFF32A060), fontSize: 12), ) ], ), ), ], ), ], ), ); } Widget buildCommodity() { return Stack( alignment: Alignment.centerRight, children: [ Container( margin: EdgeInsets.only(left: 16, right: 16, top: 2, bottom: 8), padding: EdgeInsets.only(left: 20, right: 20, top: 12, bottom: 12), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.black.withAlpha(12), offset: Offset(0, 1), blurRadius: 12, spreadRadius: 0) ], borderRadius: BorderRadius.all(Radius.circular(8))), child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: commodityList(), ), ), buildQrCode() ], ); } List commodityList() { return [ commodityItem(), commodityItem(), commodityItem(), commodityItem(), commodityItem(), commodityItem(), commodityItem(), SizedBox(height: 20), discountItem(Color(0xFF32A060)), discountItem(Color(0xFFFF7A1A)), Container( margin: EdgeInsets.only( top: 24, bottom: 4, ), child: MySeparator( height: 1, width: 5, color: Colors.grey, ), ), buildTotalPrice(), ]; } Widget buildQrCode() { return Container( margin: EdgeInsets.only(right: 16), child: Stack( children: [ Container( width: 94, height: 33, margin: EdgeInsets.only(left: 12), padding: EdgeInsets.only(left: 16), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.black.withAlpha(25), offset: Offset(0, 1), blurRadius: 12, spreadRadius: 0) ], borderRadius: BorderRadius.only( topLeft: Radius.circular(2), bottomLeft: Radius.circular(2), )), child: Row( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( S.of(context).qujianma, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 12, color: Colors.black), ), Icon( Icons.keyboard_arrow_right, color: Colors.black, size: 16, ) ], ), ), Container( margin: EdgeInsets.only(top: 6, bottom: 6), // padding: EdgeInsets.all(2), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.black.withAlpha(25), offset: Offset(0, 1), blurRadius: 12, spreadRadius: 0) ], borderRadius: BorderRadius.all(Radius.circular(2))), child: Icon( Icons.qr_code, size: 20, color: Color(0xFF32A060), )), ], ), ); } Widget buildOrderInfo() { return Container( margin: EdgeInsets.only(left: 16, right: 16, top: 16, bottom: 8), padding: EdgeInsets.only(left: 20, right: 20, top: 12, bottom: 12), decoration: BoxDecoration( color: Colors.white, boxShadow: [ BoxShadow( color: Colors.black.withAlpha(12), offset: Offset(0, 1), blurRadius: 12, spreadRadius: 0) ], borderRadius: BorderRadius.all(Radius.circular(8))), child: Column( children: [ orderInfoItem(S.of(context).shoujihao, "13800138000"), orderInfoItem( S.of(context).beizhu, S.of(context).qingshurubeizhuyaoqiu), orderInfoItem(S.of(context).fapiao, S.of(context).buzhichikaipiao), orderInfoItem(S.of(context).zhifufangshi, S.of(context).yue), ], ), ); } Widget orderInfoItem(leftText, rightText) { return Container( margin: EdgeInsets.only(top: 8, bottom: 8), child: Row( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( leftText, style: TextStyle( fontWeight: FontWeight.bold, fontSize: 12, color: Color(0xFF727272)), ), Expanded( child: Text( rightText, textAlign: TextAlign.end, style: TextStyle( fontSize: 12, color: Color(0xFF353535), ), ), flex: 1, ), SizedBox( width: 16, ), Icon( Icons.keyboard_arrow_right, size: 16, color: Colors.black, ) ], ), ); } Widget commodityItem() { return Container( margin: EdgeInsets.only(top: 8, bottom: 8), child: Row( children: [ Container( child: Image.network( "https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF", width: 44, fit: BoxFit.cover, height: 44, ), ), Expanded( flex: 1, child: Container( margin: EdgeInsets.only(left: 16, right: 16), height: 44, child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( "海盐牛角", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 14, color: Color(0xFF353535)), ), Text( "x2", style: TextStyle(fontSize: 12, color: Color(0xFF727272)), ), ], ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( flex: 1, child: Text( S.of(context).ge(200), overflow: TextOverflow.ellipsis, style: TextStyle( fontSize: 12, color: Color(0xFFA29E9E)), )), Text( S.of(context).yuan(8), style: TextStyle( fontWeight: FontWeight.bold, fontSize: 12, color: Color(0xFF4C4C4C)), ) ], ), ], ), ), ), ], ), ); } Widget discountItem(Color color) { return Container( margin: EdgeInsets.only(top: 9, bottom: 9), child: Row( children: [ Container( padding: EdgeInsets.fromLTRB(4, 2, 4, 2), decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(2)), border: Border.all( width: 1, color: color, style: BorderStyle.solid)), child: Text( S.of(context).peisongfei, style: TextStyle( fontSize: 10, color: color, ), ), ), SizedBox( width: 27, ), Expanded( child: Text( S.of(context).huodongjianmianpeisongfei(3), style: TextStyle( fontSize: 10, color: Color(0xFFA29E9E), ), ), flex: 1, ), Text( S.of(context).yuan(-3.0), style: TextStyle( fontSize: 12, color: color, ), ), ], ), ); } Widget buildTotalPrice() { return Container( margin: EdgeInsets.only(top: 7, bottom: 11), child: Row( mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic, children: [ Expanded( child: Text( S.of(context).huodongjianmianpeisongfei(3), style: TextStyle( fontSize: 10, color: Color(0xFFA29E9E), ), ), flex: 1, ), Container( child: Text( S.of(context).jiesuanjine, style: TextStyle( fontSize: 10, color: Color(0xFF353535), ), ), ), Text( "20.4", textAlign: TextAlign.end, style: TextStyle( fontSize: 30, color: Color(0xFF32A060), ), ) ], ), ); } }