|
|
@@ -1,7 +1,18 @@
|
|
|
import 'package:abroad_location/base/base_view.dart';
|
|
|
+import 'package:abroad_location/resource/assets.gen.dart';
|
|
|
+import 'package:abroad_location/resource/colors.gen.dart';
|
|
|
+import 'package:abroad_location/resource/string.gen.dart';
|
|
|
+import 'package:abroad_location/utils/atmob_log.dart';
|
|
|
+import 'package:abroad_location/utils/base_expand.dart';
|
|
|
+import 'package:abroad_location/widget/MapWidget.dart';
|
|
|
import 'package:flutter/cupertino.dart';
|
|
|
+import 'package:flutter/material.dart';
|
|
|
import 'package:flutter/src/widgets/framework.dart';
|
|
|
+import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
|
+import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
|
|
|
+import 'package:sliding_sheet2/sliding_sheet2.dart';
|
|
|
|
|
|
+import 'friend_item.dart';
|
|
|
import 'location_controller.dart';
|
|
|
|
|
|
class LocationView extends BaseView<LocationController> {
|
|
|
@@ -9,6 +20,371 @@ class LocationView extends BaseView<LocationController> {
|
|
|
|
|
|
@override
|
|
|
Widget buildBody(BuildContext context) {
|
|
|
- return Center(child: Text('LocationView'));
|
|
|
+ return SlidingSheet(
|
|
|
+ listener: (SheetState state) {
|
|
|
+ controller.setSheetProgress(state.progress);
|
|
|
+ AtmobLog.d('zk', 'progress: ${state.progress}');
|
|
|
+ },
|
|
|
+ color: '#F7F7F7'.color,
|
|
|
+ controller: controller.sheetController,
|
|
|
+ elevation: 10,
|
|
|
+ shadowColor: Colors.black.withOpacity(0.1),
|
|
|
+ cornerRadius: 28.w,
|
|
|
+ snapSpec: SnapSpec(
|
|
|
+ initialSnap: 158.w, // 67.w + 91.w
|
|
|
+ // Enable snapping. This is true by default.
|
|
|
+ snap: true,
|
|
|
+ // Set custom snapping points.
|
|
|
+ snappings: [158.w, 500.w],
|
|
|
+ // Define to what the snappings relate to. In this case,
|
|
|
+ // the total available space that the sheet can expand to.
|
|
|
+ positioning: SnapPositioning.pixelOffset,
|
|
|
+ ),
|
|
|
+ body: buildSheetBody(),
|
|
|
+ headerBuilder: buildLocationSheetHeader,
|
|
|
+ customBuilder: buildFriendList,
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildSheetBody() {
|
|
|
+ return Stack(
|
|
|
+ children: [
|
|
|
+ MapWidget(),
|
|
|
+ buildLocationMember(),
|
|
|
+ buildAddFriendView(),
|
|
|
+ buildLocationMenu()
|
|
|
+ ],
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildLocationSheetHeader(BuildContext context, SheetState state) {
|
|
|
+ return SizedBox(
|
|
|
+ width: double.infinity,
|
|
|
+ child: IntrinsicHeight(
|
|
|
+ child: Column(
|
|
|
+ children: [
|
|
|
+ SizedBox(height: 8.w),
|
|
|
+ Container(
|
|
|
+ width: 36.w,
|
|
|
+ height: 4.w,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: '#D4DCEA'.color,
|
|
|
+ borderRadius: BorderRadius.circular(2.w),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ SizedBox(height: 19.w),
|
|
|
+ Container(
|
|
|
+ margin: EdgeInsets.only(left: 16.w, right: 16.w),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Text(StringName.friendList,
|
|
|
+ style: TextStyle(
|
|
|
+ fontSize: 20.sp,
|
|
|
+ color: ColorName.black80,
|
|
|
+ fontWeight: FontWeight.bold)),
|
|
|
+ Spacer(),
|
|
|
+ Container(
|
|
|
+ height: 28.w,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: '#264476FF'.color,
|
|
|
+ borderRadius: BorderRadius.circular(100.w),
|
|
|
+ ),
|
|
|
+ padding: EdgeInsets.all(2.w),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ Assets.images.iconLocationFriendAdd.image(),
|
|
|
+ SizedBox(width: 5.w),
|
|
|
+ Text(
|
|
|
+ StringName.locationAddFriend,
|
|
|
+ style: TextStyle(
|
|
|
+ fontSize: 12.sp,
|
|
|
+ color: '#274494'.color,
|
|
|
+ fontWeight: FontWeight.w500),
|
|
|
+ ),
|
|
|
+ SizedBox(width: 8.w),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ )
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ SizedBox(height: 8.w),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ //选中的好友卡片
|
|
|
+ Widget buildSelectedFriendCard() {
|
|
|
+ return Obx(() {
|
|
|
+ return Visibility(
|
|
|
+ visible: controller.sheetProgress < 1,
|
|
|
+ child: Opacity(
|
|
|
+ opacity: 1 - controller.sheetProgress,
|
|
|
+ child: SingleChildScrollView(
|
|
|
+ child: Container(
|
|
|
+ color: '#F7F7F7'.color,
|
|
|
+ child: Column(
|
|
|
+ children: [
|
|
|
+ SizedBox(height: 8.w),
|
|
|
+ controller.selectUserInfo != null
|
|
|
+ ? locationFriendItem(controller.selectUserInfo!)
|
|
|
+ : SizedBox.shrink(),
|
|
|
+ SizedBox(height: 13.w),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildFriendList(
|
|
|
+ BuildContext context,
|
|
|
+ ScrollController ctl,
|
|
|
+ SheetState state,
|
|
|
+ ) {
|
|
|
+ return Stack(children: [
|
|
|
+ Obx(() {
|
|
|
+ return Opacity(
|
|
|
+ opacity: controller.sheetProgress,
|
|
|
+ child: ListView.builder(
|
|
|
+ padding: EdgeInsets.zero,
|
|
|
+ controller: ctl,
|
|
|
+ itemBuilder: buildFriendListItem,
|
|
|
+ itemCount: controller.locationFriendList.length),
|
|
|
+ );
|
|
|
+ }),
|
|
|
+ buildSelectedFriendCard(),
|
|
|
+ ]);
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildFriendListItem(BuildContext context, int index) {
|
|
|
+ return Container(
|
|
|
+ margin: EdgeInsets.only(bottom: 10.w),
|
|
|
+ child: locationFriendItem(controller.locationFriendList[index],
|
|
|
+ onItemClick: (userInfo) {
|
|
|
+ controller.onSelectItemClick(userInfo);
|
|
|
+ }, onTrackClick: (userInfo) {}));
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildLocationMenu() {
|
|
|
+ return Positioned(
|
|
|
+ right: 4.w,
|
|
|
+ bottom: 220.w,
|
|
|
+ child: IntrinsicHeight(
|
|
|
+ child: Column(
|
|
|
+ children: [
|
|
|
+ Assets.images.iconLocationLayer.image(width: 56.w, height: 56.w),
|
|
|
+ Assets.images.iconLocationPosition.image(width: 56.w, height: 56.w),
|
|
|
+ Assets.images.iconLocationRefresh.image(width: 56.w, height: 56.w),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildLocationMember() {
|
|
|
+ return Positioned(
|
|
|
+ top: 125.w,
|
|
|
+ right: 4.w,
|
|
|
+ child:
|
|
|
+ Assets.images.iconLoationMember.image(width: 56.w, height: 56.w));
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildAddFriendView() {
|
|
|
+ return Stack(
|
|
|
+ children: [
|
|
|
+ buildHeadBg(),
|
|
|
+ buildAddFriendBackboard(),
|
|
|
+ buildAddFriendInput()
|
|
|
+ ],
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget buildAddFriendBackboard() {
|
|
|
+ return Container(
|
|
|
+ width: double.infinity,
|
|
|
+ height: 205.w,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ borderRadius: BorderRadius.only(
|
|
|
+ bottomLeft: Radius.circular(36.w),
|
|
|
+ bottomRight: Radius.circular(36.w)),
|
|
|
+ gradient: LinearGradient(
|
|
|
+ colors: [
|
|
|
+ ColorName.white10,
|
|
|
+ ColorName.white90,
|
|
|
+ ],
|
|
|
+ begin: Alignment.topCenter,
|
|
|
+ end: Alignment.bottomCenter,
|
|
|
+ ),
|
|
|
+ boxShadow: [
|
|
|
+ BoxShadow(
|
|
|
+ color: ColorName.black40.withOpacity(0.1),
|
|
|
+ blurRadius: 10.w,
|
|
|
+ offset: Offset(0, 2.w))
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+
|
|
|
+ // return Stack(children: [
|
|
|
+ //
|
|
|
+ // Container(
|
|
|
+ // width: double.infinity,
|
|
|
+ // height: 210.w,
|
|
|
+ // decoration: BoxDecoration(
|
|
|
+ // color: ColorName.black,
|
|
|
+ // borderRadius: BorderRadius.only(
|
|
|
+ // bottomLeft: Radius.circular(32.w),
|
|
|
+ // bottomRight: Radius.circular(34.w)),
|
|
|
+ // ),
|
|
|
+ // ),
|
|
|
+ //
|
|
|
+ // ClipRRect(
|
|
|
+ // child: Container(
|
|
|
+ // width: double.infinity,
|
|
|
+ // height: 205.w,
|
|
|
+ // decoration: BoxDecoration(
|
|
|
+ // borderRadius: BorderRadius.only(
|
|
|
+ // bottomLeft: Radius.circular(36.w),
|
|
|
+ // bottomRight: Radius.circular(36.w)),
|
|
|
+ // gradient: LinearGradient(
|
|
|
+ // colors: [
|
|
|
+ // Colors.transparent,
|
|
|
+ // Colors.blue,
|
|
|
+ // // ColorName.white10,
|
|
|
+ // // ColorName.white90,
|
|
|
+ // ],
|
|
|
+ // begin: Alignment.topCenter,
|
|
|
+ // end: Alignment.bottomCenter,
|
|
|
+ // ),
|
|
|
+ // ),
|
|
|
+ // ),
|
|
|
+ // )
|
|
|
+ // ],);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ Container buildHeadBg() {
|
|
|
+ return Container(
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ gradient: LinearGradient(
|
|
|
+ colors: [
|
|
|
+ '#DEE5FF'.color,
|
|
|
+ ColorName.transparent,
|
|
|
+ ],
|
|
|
+ begin: Alignment.topCenter,
|
|
|
+ end: Alignment.bottomCenter,
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ width: double.infinity,
|
|
|
+ height: 73.w,
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Container buildAddFriendInput() {
|
|
|
+ return Container(
|
|
|
+ padding: EdgeInsets.only(top: 62.w),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ SizedBox(width: 16.w),
|
|
|
+ Obx(() {
|
|
|
+ return AnimatedContainer(
|
|
|
+ duration: controller.findContactAnimatedDuration,
|
|
|
+ width: controller.isFindContact ? 0.w : 50.w,
|
|
|
+ height: controller.isFindContact ? 0.w : 50.w,
|
|
|
+ margin: EdgeInsets.only(right: 10.w),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ borderRadius: BorderRadius.all(Radius.circular(18.w)),
|
|
|
+ boxShadow: [
|
|
|
+ BoxShadow(
|
|
|
+ color: ColorName.black20.withOpacity(0.1),
|
|
|
+ blurRadius: 10.w)
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ child: Assets.images.iconLocationMenu
|
|
|
+ .image(width: double.infinity, height: double.infinity),
|
|
|
+ );
|
|
|
+ }),
|
|
|
+ Expanded(
|
|
|
+ child: Container(
|
|
|
+ height: 50.w,
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: ColorName.white,
|
|
|
+ borderRadius: BorderRadius.all(Radius.circular(100.w)),
|
|
|
+ boxShadow: [
|
|
|
+ BoxShadow(
|
|
|
+ color: ColorName.black20.withOpacity(0.1),
|
|
|
+ blurRadius: 10.w)
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ SizedBox(width: 8.w),
|
|
|
+ Assets.images.iconLocationSearch
|
|
|
+ .image(width: 18.w, height: 18.w),
|
|
|
+ SizedBox(width: 10.w),
|
|
|
+ Expanded(
|
|
|
+ child: GestureDetector(
|
|
|
+ behavior: HitTestBehavior.opaque,
|
|
|
+ onTap: () {
|
|
|
+ controller.onFindContactClick();
|
|
|
+ },
|
|
|
+ child: SizedBox(
|
|
|
+ height: double.infinity,
|
|
|
+ child: Align(
|
|
|
+ alignment: Alignment.centerLeft,
|
|
|
+ child: Text(
|
|
|
+ textAlign: TextAlign.start,
|
|
|
+ StringName.locationAddFriendHint,
|
|
|
+ style: TextStyle(
|
|
|
+ fontSize: 14.sp, color: ColorName.black40),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ SizedBox(width: 10.w),
|
|
|
+ Obx(() {
|
|
|
+ return AnimatedScale(
|
|
|
+ scale: controller.isFindContact ? 0 : 1,
|
|
|
+ duration: controller.findContactAnimatedDuration,
|
|
|
+ child: Container(
|
|
|
+ padding: EdgeInsets.symmetric(
|
|
|
+ vertical: 5.5.w, horizontal: 11.w),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: '#4476FF'.color,
|
|
|
+ borderRadius: BorderRadius.circular(100.w),
|
|
|
+ boxShadow: [
|
|
|
+ BoxShadow(
|
|
|
+ offset: Offset(0, 2.w),
|
|
|
+ color: '#4476FF'.color.withOpacity(0.4),
|
|
|
+ blurRadius: 5.w)
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ child: Text(StringName.locationAddFriendBtn,
|
|
|
+ style: TextStyle(
|
|
|
+ fontSize: 14.sp,
|
|
|
+ color: ColorName.white,
|
|
|
+ fontWeight: FontWeight.bold)),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }),
|
|
|
+ SizedBox(width: 10.w),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ SizedBox(width: 16.w),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
}
|
|
|
}
|