farmer_client/lib/pages/machinery/map/widgets/detail.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:amap_flutter_base/amap_flutter_base.dart';
import 'package:farmer_client/widgets/amap/amap.dart';

Widget page({ required BuildContext context, required Size appbarSize, required void Function() handleClick}) {
  final _offset = 20.h;
  final width = MediaQuery.of(context).size.width;
  final height = MediaQuery.of(context).size.height
      - appbarSize.height
      - MediaQuery.of(context).padding.top;
  final mapHeight = height * 0.3;
  final cardHeight = (height - mapHeight) / 2 + _offset;


  final img = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg';
  final LatLng position = LatLng(32.690712, 112.091892);

  return Stack(
    alignment: Alignment.topCenter,
    children: [
      // 第一个组件用来撑满全屏
      SizedBox(
        width: width,
        height: height,
      ),
      SizedBox(
        width: width,
        height: mapHeight,
        child: AMap(position: position),
      ),
      Positioned(
        left: 0,
        top: mapHeight - _offset,
        height: cardHeight,
        child: _thumb(context, img),
      ),
      Positioned(
        left: 0,
        top: mapHeight + cardHeight - 2 * _offset,
        height: cardHeight,
        child: _content(context, handleClick),
      ),
    ],);
}

Widget _card(BuildContext context, Widget child) {
  final _border = 20.w;
  return Container(
    width: MediaQuery.of(context).size.width,
    clipBehavior: Clip.hardEdge,
    decoration: BoxDecoration(
        borderRadius: BorderRadius.vertical(top: Radius.circular(_border))
    ),
    child: child,
  );
}

Widget _thumb(BuildContext context, String imgUrl) {
  return _card(context, Image.network(imgUrl, fit: BoxFit.cover));
}

Widget _title() {
  return Row(
    children: [
      Expanded(
          child: Text("收割机001--S001",
              style: TextStyle(
                color: Color(0xFF222222),
                fontSize: 18.sp,
              )),
          flex: 1),
      Container(
        width: 100.w,
        alignment: Alignment.centerRight,
        child: Text("450元",
            style: TextStyle(
              color: Color(0xFFB61515),
              fontSize: 22.sp,
            )),
      )
    ],
  );
}

Widget _desc() {
  return Row(
    children: [
      Icon(Icons.location_on_outlined, size: 16.sp,),
      Expanded(
        flex: 1,
        child: Text("距离当前位置2.3公里 >>", style: TextStyle(color: Color(0xFF222222), fontSize: 15.sp),),
      ),
    ],
  );
}

Widget _detail() {
  return Container(
    alignment: Alignment.centerLeft,
    child: Text("农机手1的收割机", style: TextStyle(color: Color(0xFF222222), fontSize: 15.sp),),
  );
}

Widget _button(void Function() handleClick) {
  return ElevatedButton(
    child: const Text("预约"),
    style: ElevatedButton.styleFrom(
        primary: const Color(0xFFFF703B),
        textStyle: TextStyle(color: Colors.white, fontSize: 20.sp, letterSpacing: 5.sp),
        elevation: 0,
        minimumSize: Size(double.infinity, 49.w),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(24.5.w)),
        )
    ),
    onPressed: handleClick,
  );
}

Widget _content(BuildContext context, void Function() handleClick) {
  return _card(context, Container(
    padding: EdgeInsets.only(top: 45.w, left: 15.w, right: 15.w, bottom: 20.w),
    decoration: const BoxDecoration(
      color: Colors.white,
    ),
    child: Column(

      children: [
        _title(),
        SizedBox(height: 20.h,),
        _desc(),
        SizedBox(height: 20.h,),
        _detail(),
        SizedBox(height: 20.h,),
        _button(handleClick),
      ],
    ),
  ));
}