Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 백준
- locale data
- 리팩토링
- suffixicon
- visual test
- React-hook-form
- 피보나치 함수
- next.js
- Vanilla JavaScript
- context api
- interaction test
- ZOD
- javascript
- kakao blind recruitment
- TextFormField
- react
- 프로그래머스
- React.memo
- Props Drilling
- 이메일 인증
- 사탕게임
- custom hook
- Github Actions
- Python
- next-auth
- storybook
- Flutter
- typescript
- useEffect
- useMemo
Archives
- Today
- Total
Dev Diary
Stack 위젯 내부 children들 간의 z-index 본문
SMALL
위 이미지처럼 달력을 구현해야했는데, 오른쪽 상단에 x 아이콘(누르면 달력이 닫힌다)을 넣으려고 Stack과 Positioned 위젯을 사용했다.
아래처럼 작성했는데, 아무리 x 아이콘을 눌러보아도 "닫기"가 터미널에 출력이 되지 않았다.
Stack(
children: <Widget>[
Positioned(
top: 24,
right: 20,
child: GestureDetector(
onTap: () {
print("닫기");
Navigator.pop(context);
},
child: SvgPicture.asset(
'assets/icons/close.svg',
width: 20,
height: 20,
colorFilter: const ColorFilter.mode(
CustomColors.gray,
BlendMode.srcIn,
),
),
),
),
TableCalendar(),
],
),
이유가 뭐냐면 Stack 위젯 사용시에는 children 내부에 z-index가 낮은 순으로 작성해줘야한다는 조건이 있었다...
x 아이콘은 가장 위에 있어야 하므로 z-index가 높다. 따라서 Stack의 가장 아래부분에 적어주었더니 제대로 작동했다.
Stack(
children: <Widget>[
TableCalendar(),
// TableCalendar() 아래로 이동
Positioned(
top: 24,
right: 20,
child: GestureDetector(
onTap: () {
print("닫기");
Navigator.pop(context);
},
child: SvgPicture.asset(
'assets/icons/close.svg',
width: 20,
height: 20,
colorFilter: const ColorFilter.mode(
CustomColors.gray,
BlendMode.srcIn,
),
),
),
),
],
),
LIST
'Trouble Shooting' 카테고리의 다른 글
React.memo()로 불필요한 렌더링 줄이기 (1) | 2024.10.08 |
---|---|
Github Action: Module not found: Error: Can't resolve ~ in ~ (0) | 2024.10.03 |
flutter locale data has not been initialized (0) | 2024.03.11 |
TextFormField의 suffixIcon 크기가 안바뀔때 (0) | 2024.03.08 |
useEffect 내에서 비동기 작업 처리하기 (1) | 2023.11.27 |