최소 높이는 0 (사용자가 마커를 클릭하지 않은 상태)

이후 마커를 클릭하면30 퍼센트에서는 간단한 정보를 보여주되 뒤에 70퍼센트에 (지도)에 보이는 마커를 클릭했을 때, 클릭한 마커의 정보로 바텀시트가 변해야하고

사용자가 바텀시트를 드레그하면 위로 확장되거나 닫혀야하고

다시 사용자가 바텀시트를 드레그해서 내리거나, 마커가 아닌 곳을 터치하면 다시 바텀시트가 0으로 되어야하는 시트 만들기

가장 먼저

  sliding_up_panel: ^2.0.0+1

이 라이브러리 알아보기

일단 내 view단에

              const SlidingPanel(),

클래스를 생성 후, 기본틀을 아래과 같이 생성한다

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:my_dream/Page/12_naver_map/NaverMapApp_cubit.dart';
import 'package:my_dream/Page/12_naver_map/NaverMapApp_state.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';

class SlidingPanel extends StatelessWidget {
  const SlidingPanel({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<NaverMapCubit, NaverMapState>(builder: (context, state) {
      return SlidingUpPanel(
        controller: state.panelController,
        minHeight: 0,
        maxHeight: MediaQuery.of(context).size.height -
            MediaQuery.of(context).padding.top,
        borderRadius: const BorderRadius.vertical(top: Radius.circular(8)),
        panel: Container(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 드래그 핸들
              Center(
                child: Container(
                  width: 40,
                  height: 4,
                  decoration: const BoxDecoration(
                    color: Colors.grey,
                    borderRadius: BorderRadius.all(Radius.circular(12)),
                  ),
                ),
              ),
              const SizedBox(height: 16),
              // 패널 내용
              Center(child: const Text('패널 내용')),
            ],
          ),
        ),
      );
    });
  }
}

내가 원하는 값은 초기 값이 0 이였다가 사용자가 마커를 클릭했을 시, 190.sh만큼 올라오는 것이다

근데 여기서 문제가 발생했다.. 큐빅에서

  //----------------------------------
  // 마커 클릭 시 바텀 시트에 관련한 함수 정의//
  //----------------------------------

  // 바텀 시트 열기
  void openBottomSheet() {
    state.panelController?.open();
    state.panelController?.animatePanelToPosition(190.sh);
  }

190.sh 로 정의하려하니 0~1 사이의 값만 된다는 것이다.. 와.. 큰일났다 디자이너가 생각하는 높이를 정확하게 맞추기 위해 계산을 해보자..

flutter: 190sh.height 190.0 flutter: screenHeight 852.0

ratio = 190.0 / 852.0 ≈ 0.223 (약 22.3%)