Dev Diary

Stack 위젯 내부 children들 간의 z-index 본문

Trouble Shooting

Stack 위젯 내부 children들 간의 z-index

sik9252 2024. 3. 11. 21:31
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