[new]首页调整为抽屉模式

lib/module/main/main_page.dart

@@ -10,6 +10,7 @@ import 'package:location/resource/assets.gen.dart';
 import 'package:location/resource/colors.gen.dart';
 import 'package:location/resource/string.gen.dart';
 import 'package:location/utils/common_expand.dart';
+import 'package:sliding_sheet2/sliding_sheet2.dart';
 
 import '../../router/app_pages.dart';
 import 'main_friend_item.dart';
@@ -39,111 +40,100 @@ class MainPage extends BasePage<MainController> {
       },
       child: Stack(
         children: [
-          Padding(
-            padding: EdgeInsets.only(bottom: 50.h),
-            child: SizedBox(
-                width: double.infinity,
-                child: MapWidget(
-                  controller: controller.mapController,
-                  onMarkerTap: controller.onMarkerTap,
-                )),
-          ),
-          Align(
-            alignment: Alignment.bottomCenter,
-            child: IntrinsicHeight(
-              child: Column(
-                children: [
-                  Row(
-                    crossAxisAlignment: CrossAxisAlignment.end,
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Visibility(
-                        visible: false,
-                        child: Container(
-                            margin: EdgeInsets.only(bottom: 24.w, left: 12.w),
-                            child: Assets.images.iconMainMapClock
-                                .image(width: 50.w)),
-                      ),
-                      Align(
-                        alignment: Alignment.bottomRight,
-                        child: Column(
-                          children: [
-                            GestureDetector(
-                              onTap: controller.onRefreshFriendLocationClick,
-                              child: Container(
-                                  margin: EdgeInsets.only(right: 12.w),
-                                  child: Assets
-                                      .images.iconMainRefreshFriendLocation
-                                      .image(width: 42.w, height: 42.w)),
-                            ),
-                            SizedBox(height: 14.w),
-                            GestureDetector(
-                              onTap: controller.onCurrentLocationClick,
-                              child: Container(
-                                  margin: EdgeInsets.only(right: 12.w),
-                                  child: Assets
-                                      .images.iconMainRefreshMineLocation
-                                      .image(width: 42.w, height: 42.w)),
-                            ),
-                            SizedBox(height: 20.w)
-                          ],
-                        ),
-                      )
-                    ],
-                  ),
-                  Container(
-                    decoration: BoxDecoration(
-                      color: '#F9F9F9'.color,
-                      borderRadius: BorderRadius.only(
-                        topLeft: Radius.circular(20.w),
-                        topRight: Radius.circular(20.w),
-                      ),
-                    ),
-                    child: Column(
-                      children: [
-                        SizedBox(height: 5.w),
-                        Container(
-                          width: 32.w,
-                          height: 3.w,
-                          decoration: BoxDecoration(
-                              color: '#D9D9D9'.color,
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(49.w))),
-                        ),
-                        SizedBox(height: 12.w),
-                        buildSelectFriendInfoView(),
-                        Obx(() {
-                          return Visibility(
-                              visible: controller.selectedFriend != null,
-                              child: SizedBox(height: 13.w));
-                        }),
-                        buildTabContainer()
-                      ],
-                    ),
-                  )
-                ],
-              ),
-            ),
+          buildMapView(),
+          buildMapFunView(),
+          buildMainBottomView(),
+          buildFriendListView(),
+        ],
+      ),
+    );
+  }
+
+  Widget buildMapView() {
+    return Padding(
+      padding: EdgeInsets.only(bottom: 50.h),
+      child: SizedBox(
+          width: double.infinity,
+          child: MapWidget(
+            controller: controller.mapController,
+            onMarkerTap: controller.onMarkerTap,
+          )),
+    );
+  }
+
+  Widget buildMainBottomView() {
+    return SlidingSheet(
+      color: '#F9F9F9'.color,
+      elevation: 10,
+      shadowColor: Colors.black.withOpacity(0.1),
+      cornerRadius: 18.w,
+      snapSpec: SnapSpec(
+        initialSnap: 1,
+        // Enable snapping. This is true by default.
+        snap: true,
+        // Set custom snapping points.
+        snappings: [SnapSpec.headerFooterSnap, 1.0],
+        // Define to what the snappings relate to. In this case,
+        // the total available space that the sheet can expand to.
+        positioning: SnapPositioning.relativeToAvailableSpace,
+      ),
+      footerBuilder: buildFooterBuilder,
+      headerBuilder: buildHeaderBuilder,
+      builder: buildTrackEntranceBuilder,
+    );
+  }
+
+  Widget buildTrackEntranceBuilder(BuildContext context, SheetState state) {
+    return Container(
+      height: 200.w,
+      width: 1.sw,
+    );
+  }
+
+  Widget buildFriendListView() {
+    return SafeArea(
+      child: Container(
+        margin: EdgeInsets.only(top: 26.w),
+        child: Row(
+          children: [
+            Expanded(child: buildMainFriendList()),
+            GestureDetector(
+              onTap: () {
+                controller.onAddFriendClick();
+              },
+              child: Container(
+                  margin: EdgeInsets.only(right: 16.w, left: 8.w),
+                  child: Assets.images.iconMainAddFriend
+                      .image(width: 60.w, height: 60.w)),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget buildMapFunView() {
+    return Positioned(
+      right: 0.w,
+      bottom: 230.w,
+      child: Column(
+        children: [
+          GestureDetector(
+            onTap: controller.onRefreshFriendLocationClick,
+            child: Container(
+                margin: EdgeInsets.only(right: 12.w),
+                child: Assets.images.iconMainRefreshFriendLocation
+                    .image(width: 42.w, height: 42.w)),
           ),
-          SafeArea(
+          SizedBox(height: 14.w),
+          GestureDetector(
+            onTap: controller.onCurrentLocationClick,
             child: Container(
-              margin: EdgeInsets.only(top: 26.w),
-              child: Row(
-                children: [
-                  Expanded(child: buildMainFriendList()),
-                  GestureDetector(
-                    onTap: () {
-                      controller.onAddFriendClick();
-                    },
-                    child: Container(
-                        margin: EdgeInsets.only(right: 16.w, left: 8.w),
-                        child: Assets.images.iconMainAddFriend
-                            .image(width: 60.w, height: 60.w)),
-                  )
-                ],
-              ),
-            ),
-          )
+                margin: EdgeInsets.only(right: 12.w),
+                child: Assets.images.iconMainRefreshMineLocation
+                    .image(width: 42.w, height: 42.w)),
+          ),
+          SizedBox(height: 20.w)
         ],
       ),
     );
@@ -157,6 +147,13 @@ class MainPage extends BasePage<MainController> {
             topLeft: Radius.circular(20.w),
             topRight: Radius.circular(20.w),
           ),
+          boxShadow: [
+            BoxShadow(
+              color: ColorName.black.withOpacity(0.01),
+              blurRadius: 10,
+              offset: const Offset(0, -2), // changes position of shadow
+            ),
+          ],
         ),
         padding: EdgeInsets.only(top: 13.w, bottom: 23.w),
         child: buildMainFunList());
@@ -191,33 +188,35 @@ class MainPage extends BasePage<MainController> {
       {bool? isShowDot}) {
     return GestureDetector(
       onTap: onTap,
-      child: Column(
-        children: [
-          Stack(children: [
-            SizedBox(
-                width: 44.w, height: 44.w, child: Image(image: imgProvider)),
-            Visibility(
-              visible: isShowDot ?? false,
-              child: Positioned(
-                top: 6.w,
-                right: 6.w,
-                child: Container(
-                  width: 10.w,
-                  height: 10.w,
-                  decoration: BoxDecoration(
-                    shape: BoxShape.circle,
-                    color: '#FF333D'.color, // 背景颜色
+      child: IntrinsicHeight(
+        child: Column(
+          children: [
+            Stack(children: [
+              SizedBox(
+                  width: 44.w, height: 44.w, child: Image(image: imgProvider)),
+              Visibility(
+                visible: isShowDot ?? false,
+                child: Positioned(
+                  top: 6.w,
+                  right: 6.w,
+                  child: Container(
+                    width: 10.w,
+                    height: 10.w,
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      color: '#FF333D'.color, // 背景颜色
+                    ),
                   ),
                 ),
-              ),
-            )
-          ]),
-          Text(title,
-              style: TextStyle(
-                  fontSize: 12.sp,
-                  color: ColorName.black70,
-                  fontWeight: FontWeight.bold))
-        ],
+              )
+            ]),
+            Text(title,
+                style: TextStyle(
+                    fontSize: 12.sp,
+                    color: ColorName.black70,
+                    fontWeight: FontWeight.bold))
+          ],
+        ),
       ),
     );
   }
@@ -259,4 +258,32 @@ class MainPage extends BasePage<MainController> {
       }),
     );
   }
+
+  Widget buildFooterBuilder(BuildContext context, SheetState state) {
+    return buildTabContainer();
+  }
+
+  Widget buildHeaderBuilder(BuildContext context, SheetState state) {
+    return IntrinsicHeight(
+      child: Column(
+        children: [
+          SizedBox(height: 5.w),
+          Container(
+            width: 32.w,
+            height: 3.w,
+            decoration: BoxDecoration(
+                color: '#D9D9D9'.color,
+                borderRadius: BorderRadius.all(Radius.circular(49.w))),
+          ),
+          SizedBox(height: 12.w),
+          buildSelectFriendInfoView(),
+          Obx(() {
+            return Visibility(
+                visible: controller.selectedFriend != null,
+                child: SizedBox(height: 13.w));
+          }),
+        ],
+      ),
+    );
+  }
 }