feats

lib/pages/index.dart

@@ -3,4 +3,5 @@ export 'TabBar/index.dart';
 export 'splash/splash.dart';
 export 'login/login.dart';
 export 'machinery/map/index.dart';
+export 'machinery/detail/index.dart';
 // export 'main/index.dart';

lib/pages/machinery/detail/index.dart

@@ -0,0 +1,25 @@
+
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'widgets/detail.dart';
+
+class MachineryDetailPage extends StatelessWidget {
+
+  final title = Rx<String>('查看详情');
+
+  // 响应预约事件
+  void handleClick() {
+
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final appBar = AppBar(title: Obx(() => Text(title.value)), centerTitle: true,);
+
+    return Scaffold(
+      appBar: appBar,
+      body: page(context: context, appbarSize: appBar.preferredSize, handleClick: handleClick),
+    );
+  }
+
+}

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

@@ -0,0 +1,61 @@
+
+import 'package:flutter/widgets.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+import '../../widgets/summary.dart';
+
+Widget page({ required BuildContext context, required Size appbarSize, required void Function() handleClick}) {
+  final _offset = 20.w;
+  final width = MediaQuery.of(context).size.width;
+  final height = MediaQuery.of(context).size.height
+      - appbarSize.height
+      - MediaQuery.of(context).padding.top;
+  final _bannerHeight = 250.w;
+  final img = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg';
+
+  return Stack(
+    alignment: Alignment.topCenter,
+      children: [
+        // 第一个组件用来撑满全屏
+        SizedBox(
+          width: width,
+          height: height,
+        ),
+        Positioned(
+          left: 0,
+          top: 0,
+          child: SizedBox(
+            height: _bannerHeight,
+            child: _banner(img),
+          ),
+        ),
+        Positioned(
+          left: 0,
+          top: _bannerHeight - _offset,
+          child: _content(context),
+        ),
+      ],
+  );
+}
+
+Widget _banner(String imgUrl) {
+  return Image.network(imgUrl);
+}
+
+Widget _content(BuildContext context) {
+  final _border = 20.w;
+  return Container(
+    width: MediaQuery.of(context).size.width,
+    padding: EdgeInsets.only(top: 45.w, left: 15.w, right: 15.w, bottom: 20.w),
+    decoration: BoxDecoration(
+      color: Colors.white,
+        borderRadius: BorderRadius.vertical(top: Radius.circular(_border))
+    ),
+    child: Column(
+      children: [
+        summary(),
+      ],
+    ),
+  );
+}

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

@@ -1,13 +1,14 @@
 
-
 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';
 
+import '../../widgets/summary.dart';
+
 Widget page({ required BuildContext context, required Size appbarSize, required void Function() handleClick}) {
-  final _offset = 20.h;
+  final _offset = 20.w;
   final width = MediaQuery.of(context).size.width;
   final height = MediaQuery.of(context).size.height
       - appbarSize.height
@@ -63,47 +64,6 @@ 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(
@@ -130,12 +90,7 @@ Widget _content(BuildContext context, void Function() handleClick) {
     child: Column(
 
       children: [
-        _title(),
-        SizedBox(height: 20.h,),
-        _desc(),
-        SizedBox(height: 20.h,),
-        _detail(),
-        SizedBox(height: 20.h,),
+        summary(),
         _button(handleClick),
       ],
     ),

lib/pages/machinery/widgets/summary.dart

@@ -0,0 +1,90 @@
+import 'dart:ui' as ui;
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+
+import 'package:farmer_client/widgets/LinearGradientText.dart';
+
+Widget summary() {
+  return Column(
+    children: [
+      _title(),
+      SizedBox(height: 20.w,),
+      _desc(),
+      SizedBox(height: 20.w,),
+      _detail(),
+      SizedBox(height: 20.w,),
+    ],
+  );
+}
+
+Widget _title() {
+  return Row(
+    children: [
+      Expanded(
+          child: Text("收割机001--S001",
+              style: TextStyle(
+                color: Color(0xFF222222),
+                fontSize: 18.sp,
+                fontWeight: FontWeight.bold,
+              )),
+          flex: 1),
+      Container(
+        width: 100.w,
+        alignment: Alignment.centerRight,
+        child: LinearGradientText(
+          colors: const <Color>[
+            Color(0xFFFA7878),
+            Color(0xFFB61515),
+          ],
+          child: RichText(
+            text: TextSpan(
+                children: <InlineSpan>[
+                  TextSpan(
+                      text: "450",
+                      style: TextStyle(
+                        fontSize: 22.sp,
+                        fontWeight: FontWeight.bold,
+                      )),
+                  TextSpan(
+                      text: "元/",
+                      style: TextStyle(
+                        fontSize: 22.sp,
+                        fontWeight: FontWeight.bold,
+                      )),
+                  TextSpan(
+                      text: "公顷",
+                      style: TextStyle(
+                        fontSize: 12.sp,
+                        fontWeight: FontWeight.bold,
+                      )),
+                ]
+            ),
+          ),
+
+
+
+
+        ),
+      )
+    ],
+  );
+}
+
+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),),
+  );
+}

lib/routes/pages.dart

@@ -10,7 +10,7 @@ import '../pages/index.dart';
 List<GetPage> pages = [
   GetPage(name: '/', page: () =>  Home()),
   GetPage(name: '/ArticleInfo', page: () =>  ArticleInfo()),//资讯详情
-  GetPage(name: '/splash', page: () => SplashScreen()),//SplashScreen
+  GetPage(name: '/splash', page: () => MachineryDetailPage()),//SplashScreen
   GetPage(name: '/login', page: () =>  MyRouteLogin()),
   GetPage(name: '/addressList', page: () =>  AddressList()),
   GetPage(name: '/addAddress', page: () =>  AddAddress()),

lib/widgets/LinearGradientText.dart

@@ -0,0 +1,31 @@
+
+import 'package:flutter/widgets.dart';
+
+class LinearGradientText extends StatelessWidget {
+  final AlignmentGeometry begin;
+  final AlignmentGeometry end;
+  final List<Color> colors;
+  Widget child;
+
+  LinearGradientText({
+    Key? key,
+    required this.colors,
+    required this.child,
+    this.begin = Alignment.topCenter,
+    this.end = Alignment.bottomCenter,
+  }) : super(key: key);
+
+  Shader _linearGradient(Rect bounds) {
+    Gradient gradient = LinearGradient(colors: colors, begin: begin, end: end);
+    return gradient.createShader(bounds);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ShaderMask(
+      blendMode: BlendMode.srcIn,
+      shaderCallback: (bounds) => _linearGradient(bounds),
+      child: child,
+    );
+  }
+}