Dart & Flutter/궁금했던 것, 몰랐던 것
팝업창 위치 조정
낭초비
2023. 10. 16. 09:15
반응형
버튼을 누르면 생성되는 팝업창의 위치를 버튼과 연관 되게 만들고 싶을 때,
버튼을 눌렀을 때 RenderBox 로 해당 버튼의 rending 관련 정보를 가져온뒤 offset 값을 화면애 대한 절대값으로 변환하여 이값을 기반하여 생성될 popup 창의 위치를 결정하는 파라미터에 넣어주면 된다.
onPressed: (){
final RenderBox renderBox =
context.findRenderObject() as RenderBox;
final offset = renderBox.localToGlobal(Offset.zero);
final left = // offset.dx 를 활용하여 popup 창의 왼쪽위 모서리 x좌표 값 계산하여 입력
final top = // offset.dy 를 활용하여 popup 창의 왼쪽위 모서리 y좌표 값 계산하여 입력
EdgeInsets InsetPadding = EdgeInsets.only(left: padLeft, top: padHeight),
Get.dialog(
barrierDismissible: barrierDismissible,
AlertDialog(
content: child,
insetPadding: insetPadding ?? EdgeInsets.zero,
),
);
},
위에서 설정한 insetPadding(참고) 은 생성한 다이얼로그를 화면의 어디에 표시할지 결정하는데 사용한다. 정확히는 다이얼로그와 화면 boundary 사이의 space(공간)을 정의.
위의 코드에서 중요한 것은, renderBox 정보를 가져올 때 입력 받은 context 를 이용한 다는 것이다. 따라서 누르는 버튼에 대한 BuildContext 가 있어야 해당 버튼의 위치에 대한 좌표를 계산 가능하다. 그러므로 해당 버튼을 Stateful 이든 Stateless 든 Widget class 로 만들어 줘야 한다.
반응형