[flutter] wrap widget, opacity widget 적용해보기 (with. flutter widget of the Week)

오늘은 최근에 들었던 flutter 팀의 weekly widget 중 실제로 사용해본 2가지 위젯에 대해 적어보려고 한다.

wrap

wrap은 열이나 행으로 이루어진 곳에 아래와 같이 공간이 부족해서 옆으로 넘어가는 버튼이 있을 때, 글씨 크기나 화면 크기에 따라 칸에 맞게 자동으로 다음칸으로 넘어가게 해주는 위젯이다.

css의 flex-wrap속성과 같은 속성인 것 같다.

직접 구현을 해봤을 때, wrap을 감싸기 전에는 위와 같이 밖으로 넘어가는 버튼이 생겼었다.

wrap으로 감싸주니 칸에 맞게 알아서 정렬이 되어 있는 모습을 확인할 수 있다 !

Wrap(
   direction: Axis.horizontal, // 수평 방향
   alignment: WrapAlignment.center, // 정렬(해당 코드의 경우 center)
   spacing: 10,//양 옆 간격
   runSpacing: 20, //위 아래 간격
   children: [
      for (int i = 0; i < 5; i++)
          LevelItem(
          c: controller,
          levelIndex: controller.level[i],
          ), // 중복되는 코드를 없애기 위해 별도로 분리시켜 놓은 widget에 list index번호 전달
       ],
  ),

wrap 위젯을 적용한 코드이다.
방향은 수평으로 지정해줬다 (수평 : Axis.vertical)

캡쳐된 사진에는 적용되어있지 않지만 방향지정 외에도 정렬과 간격 속성도 사용할 수 있다.

앱의 경우 핸드폰의 화면이 매우 다를 수 있기 때문에 참 유용하게 쓰일 위젯 인 것 같다.

opacity

opacity는 투명도를 조절하는 위젯이다.

flutter 영상에서는 위젯을 지우되 레이아웃은 보존하고 싶을 때 opacity를 사용한다고 예시를 들고 있다.

내가 만들고 있는 프로젝트에서는 아래와 같이 난이도를 선택하기 전에는 설정버튼이 누를 수 없는 불투명한 버튼이지만 난이도를 선택하면 색이 변하게 된다. 이 효과를 위해 opacity 위젯을 사용했다.

이렇게 불투명하게 변함으로써 사용자에게 버튼을 눌러야 다음 단계로 넘어갈 수 있다는 것을 말해주고 있다.

Opacity(
//난이도 설정 버튼이 아무것도 눌러져 있지 않으면 opacity 20%
      opacity: 0.2,
       child: Padding(
      padding: const EdgeInsets.all(10),
      child: Container(
        decoration: BoxDecoration(
          color: const Color(0xFF3E5044),
          borderRadius: BorderRadius.circular(25),
        ),
        child: const Center(
          child: Padding(
            padding: EdgeInsets.all(15),
            child: Text(
              "설정",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );,
  );

버튼이 눌러져 있지 않은 상태에서의 설정 버튼 코드는 위와 같다.

투명도를 조절하고 싶은 위젯을 opacity 위젯으로 감싸면 된다.
0~1 사이의 숫자를 입력하면 되고 안보이게 할수록 0에 가깝게 입력하면 된다.

AnimatedOpacity widget을 이용해 fade in/out도 구현할 수 있다.

,,,
bool _visible = true;
,,,

AnimatedOpacity(
	duration: const Duration(milliseconds: 500), // 지속시간
    opacity: _visible ? 1.0 : 0.0, // 상태가 바뀜에 따라 불투명에서 투명으로 바뀌기
    child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ), // opacity가 적용되는 container
)

opacity 위젯은 잘 이용한다면 애니메이션도 비교적 간단하게 구현할 수 있을 것 같다

---

참고

https://www.youtube.com/watch?v=z5iw2SeFx2M&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=144

https://www.youtube.com/watch?v=9hltevOHQBw&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=141 

https://docs.flutter.dev/cookbook/animation/opacity-animation