[Flutter] 꾹 누르기 효과 주기

프로젝트 막바지로 접어들면서, 필수 기능 구현은 끝나가고 다른 것들에 욕심이 생기기 시작했다.

 

오늘의 포스팅은 사용자 경험 개선을 위한 고민에서 시작되었다.

 

이번에 우리 프로젝트의 주제는 '사용자 맞춤 러닝 코스 추천'이다.

 

경사도 / 사용자의 취향 등을 분석해 사용자에게 가장 잘 맞는 러닝 코스들을 추천해 주는 서비스를 개발하고 있다.

 

---

🚨 수정할 부분

메인 페이지

 

우리 서비스의 메인 화면이다. 엄청 열심히 만들었는데 만들고 보니 조금 부족해보여서 추가 기능을 넣어보기로 했다.

 

기존의 서비스는 이미지 내의 코스를 클릭하면 상세 조회 페이지로 이동해 코스를 보여주는 방식이다.

 

코스 추천이라는 서비스 특성 상 코스가 꽤 중요한데, 상세 조회로 들어가서 매번 코스를 확인하고 다시 나와서 다른 코스를 확인해야 한다는 것은 꽤 불편할 것이라고 생각이 들었다.

 

그래서, 서비스 사용자의 코스 확인을 더 간편하게 만들어주기 위한 방법을 찾다가 long press 효과를 통해 대략적인 코스 정보를 확인하게 하는 방법을 선택하게 되었다.

 

💨 길게 누르기 효과를 통해  overlay 띄우기

 

이를 위해 구현한 내용은 다음과 같다

 

import 'package:flutter/material.dart';
import 'package:frontend/models/course.dart';
import 'package:frontend/widgets/course/level_badge.dart';
import 'package:get/get.dart';

class CourseCard extends StatelessWidget {
  final Course course;

  CourseCard({required this.course});

  OverlayEntry? _overlayEntry;
  void _showOverlay(BuildContext context, Offset position) {
    _overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        // position 파라미터를 사용해 팝업 위치 설정
        top: position.dy,
        left: position.dx,
        child: Material(
          color: Colors.transparent,
          child: Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 10,
                  offset: Offset(0, 4),
                ),
              ],
            ),
            width: 200,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text('Course Name: ${course.name}'),
                Text('Length: ${(course.courseLength * 10).round() / 10} km'),
                Text('Level: ${course.level}'),
                if (course.courseType == 'user')
                  Text('By: ${course.memberNickname}'),
                Text('Participants: ${course.count}명 참여 중'),
              ],
            ),
          ),
        ),
      ),
    );

    Overlay.of(context)?.insert(_overlayEntry!);
  }

  void _removeOverlay() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onLongPressStart: (LongPressStartDetails details) {
        // 길게 누르기 시작할 때 클릭 위치에 오버레이로 팝업 띄우기
        _showOverlay(context, details.globalPosition);
      },
      onLongPressEnd: (_) {
        // 길게 누르기를 끝낼 때 팝업 닫기
        _removeOverlay();
      },
      child: Card(// detail)
    );
  }
}

 

overlay 효과

대략적으로 코스 이름, 길이, 난이도, 참여 중인 사람 수를 포함해보았다.

 

클릭한 위치에서 overlay가 뜨도록 하기 위해 onLongPressStart에서 LongPressStartDetails를 받았다

 

<예시코드>

onLongPressStart: (LongPressStartDetails details) {
    // 길게 누르기 시작할 때 클릭 위치에 오버레이로 팝업 띄우기
    _showOverlay(context, details.globalPosition);
},

 

이제 overlay를 꾸미고, 코스 정보를 불러올 수 있도록 수정해야 한다.

 

코스 정보를 가져오는 것은 다른 파트의 코스 등록이 완료되어야 하기 때문에, 지금은 임시로 검은색 화면으로 처리하였다.

 

문제 발생

 

필요한 정보인 제목과 맵 부분을 임시로 Container 처리 해서 띄우기까지 했는데 클릭 위치로 맵을 띄우다 보니 클릭 하는 위치에 따라 맵이 짤리게 되는 경우가 있었다.

 

결론적으로 아래와 같이 조건문을 설정해주어 pop up이 바깥으로 나가지 않도록 했다

 

// 팝업 크기 설정
double popupWidth = screenWidth * 1 / 2;
double popupHeight = 210; // 예시로 설정한 높이

// 화면 경계를 넘지 않도록 조정
double leftPosition = position.dx;
double topPosition = position.dy;

// 오른쪽으로 넘지 않도록 처리
if (leftPosition + popupWidth > screenWidth) {
  leftPosition = screenWidth - popupWidth - 20; // 오른쪽 경계에서 20px 여유를 둠
}

// 아래쪽으로 넘지 않도록 처리
if (topPosition + popupHeight > screenHeight) {
  topPosition = screenHeight - popupHeight - 40; // 아래쪽 경계에서 40px 여유를 둠
}

 

수정 완료 ⭐

 

이렇게 최종 수정했다 !!