logistics-client-flutter/lib/pages/send_express_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:city_pickers/city_pickers.dart';

class SendExpressPage extends StatefulWidget {
  final Widget child;

  SendExpressPage({
    Key key,
    this.child
  }): super(key: key);

  _SendExpressPageState createState() => _SendExpressPageState();
}

class _SendExpressPageState extends State < SendExpressPage > with AutomaticKeepAliveClientMixin {


  ScrollController _scrollController = ScrollController();
  GlobalKey _sendPhoneKey = GlobalKey();
  GlobalKey _getPhoneKey = GlobalKey();

  String _sendPhoneStr = '';
  String _getPhoneStr = '';

  double tipWidth = 0;
  double tipHeight = 0;
  double tipPosX = 0;
  double tipPosY = 0;

  bool tipStatus = true;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (!tipStatus) {
        setState(() {
          tipStatus = true;
        });
      }
      print('滚动了');
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {}
    });
  }

  @override
  bool get wantKeepAlive => true;

  final Map < Object,
    String > sendInfo = {
      "icon": 'lib/images/icon_send.png',
      "title": "发件信息",
      "phone": "010-8788 6890",
      "code": "345678",
      "name": "朝阳门大阳汽贸",
      "address": "",
      "addressDetail": "朝阳门外大街28号"
    };

  final Map < Object,
    String > getInfo = {
      "icon": 'lib/images/icon_shoujian.png',
      "title": "收件信息",
      "name": "香河汽修厂",
      "phone": "010-6734 3426",
      "address": "",
      "addressDetail": "香河县东大街29号院18栋3单元206"
    };

  Map < String,
    String > _itemInfo = {
      "icon": "lib/images/icon_huowu.png",
      "title": "货物信息",
      "itemName": "汽车轮胎",
      "itemNo": "4",
      "expressPrice": "15",
      "collectionPrice": "15800",
      "supportPrice": "5000",
      "weight": "600",
      "itemDesc": "轮胎请核对数量轮胎请"
    };
  @override
  Widget build(BuildContext context) {
    return Container(

      child: Scaffold(
        appBar: AppBar(
          title: Text('发件', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(36)), ),
          centerTitle: true,
          backgroundColor: Color.fromRGBO(64, 98, 254, 1),
          // leading: GestureDetector(
          //   child: Icon(Icons.arrow_back),
          //   onTap: (){
          //      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context){
          //       return HomePage();
          //     }));
          //   },
          // ),
        ),
        body:
        Stack(
          children: < Widget > [
            Container(
              color: Color.fromRGBO(246, 246, 254, 1),
              padding: EdgeInsets.fromLTRB(0, ScreenUtil.getInstance().setHeight(20), 0, ScreenUtil.getInstance().setHeight(20)),
              child: ListView(
                controller: _scrollController,
                children: < Widget > [
                  _sendInfo(sendInfo, context),
                  _getInfo(getInfo),
                  _itemInfoWidget(_itemInfo),
                  _submitBtn()
                ],
              ),
            ),
            Positioned(
              top: tipPosY,
              left: tipPosX,
              child: Offstage(
                offstage: tipStatus,
                child: Container(
                  width: tipWidth,
                  height: ScreenUtil.getInstance().setHeight(450),
                  padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(30)),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(244, 248, 251, 1),
                  ),
                  child: ListView(
                    children: < Widget > [
                      _tipItem(),
                      _tipItem(),
                    ],
                  ),
                ),
              )
            )
          ],
        ),
        resizeToAvoidBottomPadding: false //键盘弹出，页面不跟随向上滑动,防止出现溢出错误
      ),
    );
  }

  Widget _sendInfo(Map str, BuildContext context) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(20)),
      child: Column(
        children: < Widget > [
          _titleWidget(str['icon'], str['title']),
          _underLine(),
          _inputWiget('电话', 'sendPhone'),
          _contentWiget('企业编码', str['code'],true),
          _contentWiget('企业名称', str['name'],true),
          _cityWiget('城市/区域', str['address'], context),
          _lastContentWiget('详细地址', str['addressDetail'])
        ],
      )
    );
  }

  Widget _getInfo(Map str) {
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(bottom: ScreenUtil.getInstance().setHeight(20)),
      child: Column(
        children: < Widget > [
          _titleWidget(str['icon'], str['title']),
          _underLine(),
          _contentWiget('企业名称', str['name'],true),
          _inputWiget('电话', 'getPhone'),
          _cityWiget('城市/区域', str['address'], context),
          _lastContentWiget('详细地址', str['addressDetail'])
        ],
      )
    );
  }

  Widget _itemInfoWidget(Map _itemInfo) {
    return Container(
      child: Container(
        color: Colors.white,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: < Widget > [
            _titleWidget(_itemInfo['icon'], "货物信息"),
            _underLine(),
            _contentWiget("货物名称", _itemInfo["itemName"],true),
            _contentWiget("数量", _itemInfo["itemNo"]),
            _contentWiget("运费", _itemInfo["expressPrice"]),
            _contentWiget("代收", _itemInfo["collectionPrice"]),
            _contentWiget("保价", _itemInfo["supportPrice"]),
            _contentWiget("重量", _itemInfo["weight"]),
            _descWidget(_itemInfo['itemDesc'])
          ],
        ),
      )
    );
  }


  Widget _titleWidget(String iconUrl, String str) {
    return Container(
      height: ScreenUtil.getInstance().setHeight(90),
      padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(30)),
      child: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: < Widget > [
            Padding(
              padding: EdgeInsets.only(right: ScreenUtil.getInstance().setHeight(20)),
              child: Image.asset(
                iconUrl,
                width: ScreenUtil.getInstance().setWidth(40),
                height: ScreenUtil.getInstance().setHeight(40),
              )
            ),
            Text(str, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32)), )
          ],
        ),
      ),
    );
  }

  Widget _underLine() {
    return Container(
      color: Color.fromRGBO(223, 223, 223, 1),
      height: ScreenUtil.getInstance().setHeight(1),
    );
  }

  Widget _inputWiget(String key, String tab) {
    return Padding(
      key: tab == 'sendPhone' ? _sendPhoneKey : _getPhoneKey,
      padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(30)),
      child: Column(
        children: < Widget > [
          SizedBox(
            height: ScreenUtil.getInstance().setHeight(89),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: < Widget > [
                  Expanded(
                    flex: 0,
                    child: Text('${key}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(74, 74, 74, 1)), ),
                  ),
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: < Widget > [
                        //Text('${value}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(136, 136, 136, 1)), ),
                        SizedBox(
                          width: ScreenUtil.getInstance().setWidth(500),
                          child: TextField(
                            keyboardType: TextInputType.number,
                            textAlign: TextAlign.end,
                            decoration: InputDecoration(
                              border: InputBorder.none
                            ),
                            onChanged: ((value) {
                              if (tab == 'sendPhone') {
                                if(value.length>=4){
                                  RenderObject sendPhoneObj = _sendPhoneKey.currentContext.findRenderObject();
                                  setState(() {
                                    tipWidth = sendPhoneObj.paintBounds.size.width;
                                    tipHeight = sendPhoneObj.paintBounds.size.height;
                                    tipPosX = sendPhoneObj.getTransformTo(null).getTranslation().x;
                                    tipPosY = sendPhoneObj.getTransformTo(null).getTranslation().y - ScreenUtil.getInstance().setHeight(90);
                                    tipStatus = false;
                                  });
                                }else{
                                  setState(() {
                                    tipStatus = true;
                                  });
                                }
                                
                                // print(tipWidth);
                                // print(tipHeight);
                                // print(tipPosX);
                                // print(tipPosY);
                              } else if (tab == 'getPhone') {
                                if(value.length>=4){
                                  RenderObject sendPhoneObj = _getPhoneKey.currentContext.findRenderObject();
                                  setState(() {
                                    tipWidth = sendPhoneObj.paintBounds.size.width;
                                    tipHeight = sendPhoneObj.paintBounds.size.height;
                                    tipPosX = sendPhoneObj.getTransformTo(null).getTranslation().x;
                                    tipPosY = sendPhoneObj.getTransformTo(null).getTranslation().y - ScreenUtil.getInstance().setHeight(90);
                                    tipStatus = false;
                                  });
                                }else{
                                  setState(() {
                                    tipStatus = true;
                                  });
                                }
                                
                                // print(tipWidth);
                                // print(tipHeight);
                                // print(tipPosX);
                                // print(tipPosY);
                              }
                            }),
                            onEditingComplete: () {
                              setState(() {
                                FocusScope.of(context).requestFocus(FocusNode());
                                tipStatus = true;
                              });
                            },

                          ),
                        ),

                        Icon(Icons.keyboard_arrow_right, color: Color.fromRGBO(199, 199, 204, 1), )
                      ],
                    )
                  )
                ],
              ),
            )
          ),
          Expanded(
            flex: 0,
            child: _underLine()
          )
        ],
      )
    );
  }


  Widget _contentWiget(String key, String value,[bool keyboardType=false]) {//false是数字键盘
    return Padding(
      padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(30)),
      child: Column(
        children: < Widget > [
          SizedBox(
            height: ScreenUtil.getInstance().setHeight(89),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: < Widget > [
                  Expanded(
                    flex: 0,
                    child: Text('${key}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(74, 74, 74, 1)), ),
                  ),
                  Expanded(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: < Widget > [
                        //Text('${value}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(136, 136, 136, 1)), ),
                        SizedBox(
                          width: ScreenUtil.getInstance().setWidth(500),
                          child: TextField(
                            keyboardType:keyboardType?TextInputType.text:TextInputType.number,
                            textAlign: TextAlign.end,
                            decoration: InputDecoration(
                              border: InputBorder.none
                            ),
                          ),
                        ),

                        Icon(Icons.keyboard_arrow_right, color: Color.fromRGBO(199, 199, 204, 1), )
                      ],
                    )
                  )
                ],
              ),
            )
          ),
          Expanded(
            flex: 0,
            child: _underLine()
          )
        ],
      )
    );
  }

  Widget _cityWiget(String key, String value, BuildContext context) {
    return
    GestureDetector(
      child: Padding(
        padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(30)),
        child: Column(
          children: < Widget > [
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(89),
              child: Center(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: < Widget > [
                    Expanded(
                      flex: 0,
                      child: Text('${key}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(74, 74, 74, 1)), ),
                    ),
                    Expanded(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: < Widget > [
                          //Text('${value}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(136, 136, 136, 1)), ),
                          SizedBox(
                            width: ScreenUtil.getInstance().setWidth(500),
                            child: Text(value, textAlign: TextAlign.end, overflow: TextOverflow.ellipsis, )
                          ),
                          Icon(Icons.keyboard_arrow_right, color: Color.fromRGBO(199, 199, 204, 1), )
                        ],
                      )
                    )
                  ],
                ),
              )
            ),
            Expanded(
              flex: 0,
              child: _underLine()
            )
          ],
        )
      ),
      onTap: () {
        getCity(context).then((resp) {
          if (resp == null) {
            return;
          }
          setState(() {
            sendInfo['address'] = resp.provinceName + ' ' + resp.cityName + ' ' + ' ' + resp.areaName;
          });
          //print(value);
        });
      },
    );
  }

  Widget _lastContentWiget(String key, String value) {
    return Padding(
      padding: EdgeInsets.only(left: ScreenUtil.getInstance().setWidth(30)),
      child: SizedBox(
        height: ScreenUtil.getInstance().setHeight(89),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: < Widget > [
              Expanded(
                flex: 0,
                child: Text('${key}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(74, 74, 74, 1)), ),
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: < Widget > [
                    //Text('${value}', style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(136, 136, 136, 1)), ),
                    SizedBox(
                      width: ScreenUtil.getInstance().setWidth(500),
                      child: TextField(
                        //keyboardType: TextInputType.number,
                        textAlign: TextAlign.end,
                        decoration: InputDecoration(
                          border: InputBorder.none
                        ),
                      ),
                    ),

                    Icon(Icons.keyboard_arrow_right, color: Color.fromRGBO(199, 199, 204, 1), )
                  ],
                )
              )
            ],
          ),
        )
      )
    );
  }

  Widget _descWidget(String str) {
    return
    Container(
      padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(30)),
      //child: Text(str, maxLines: 100, style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(30), color: Color.fromRGBO(74, 74, 74, 1)), ),
      child: TextField(
        maxLines: 3,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: "请输入备注内容"
        ),
      ),
    );
  }

  Widget _submitBtn() {
    return GestureDetector(
      child: Container(
        margin: EdgeInsets.fromLTRB(ScreenUtil.getInstance().setWidth(30), ScreenUtil.getInstance().setWidth(50), ScreenUtil.getInstance().setWidth(30), ScreenUtil.getInstance().setWidth(40)),
        height: ScreenUtil.getInstance().setHeight(88),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(4)),
          color: Color.fromRGBO(37, 102, 242, 1),
        ),
        child: Center(
          child: Text("提交", style: TextStyle(fontSize: ScreenUtil.getInstance().setSp(32), color: Colors.white), ),
        ),
      ),
      onTap: () {
        print('提交');
      },
    );
  }
  Future getCity(context) async {
    Result result = await CityPickers.showCityPicker(
      context: context,
    );
    return result;
  }

  Widget _tipItem() {
    return Container(
      child: Column(
        children: < Widget > [
          Container(
            height: ScreenUtil.getInstance().setHeight(89),
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: < Widget > [
                  Padding(
                    padding: EdgeInsets.only(right: ScreenUtil.getInstance().setWidth(50)),
                    child: Text("15901462275", style: TextStyle(
                      fontSize: ScreenUtil.getInstance().setSp(28),
                      color: Color.fromRGBO(74, 74, 74, 1)
                    ), )
                  ),
                  SizedBox(
                    width: ScreenUtil.getInstance().setWidth(185),
                    child: Text('WX11042',
                    textAlign: TextAlign.left,
                    style: TextStyle(
                      fontSize: ScreenUtil.getInstance().setSp(28),
                      color: Color.fromRGBO(155,155,155,1)
                    ),),
                  ),
                  Text('天华盛业',
                    textAlign: TextAlign.left,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: ScreenUtil.getInstance().setSp(28),
                       color: Color.fromRGBO(155,155,155,1)
                    ),
                  )
                ],
              ),
            ),
          ),
          _underLine()
        ],
      ),
    );
  }
}