[플러터] Flutter / Expended 제대로 사용하기!! (Expanded 사용법)

오랜만에 위젯 설명으로 찾아왔다. 코드 작성 중 마치 숭배의 대상을 찾은 것 같아 헐레벌떡 뛰어와 글을 쓰기 시작했다. 

오늘은 플러터의 위젯인 Expanded 에 대해서 알아보자...

 

솔직히 지금까지 개발하면서 이 친구를 별로 사용한 적이 없던 것 같다.. 설명만 보면 뭐 그저 그렇고.. 플러터 공식 문서에 있는 예제도 보니까 그냥 "그래그래" 이런 느낌이었다.. 근데 이거 사용하면 할수록 진국이다.. 크기의 대한 고민을 엄청나게 줄여준다!! 그리고 크기 오류 해결 1짱이다 진짜루

 

그냥 자세한 설명 없이 바로 보여주겠다.

SvgPicture.asset('assets/icon/man.svg')

Svg 를 불러왔는데 크기가 너무 큰 상황이다. 일단 그럼 우린 어떠한 해결책을 찾는가? 

일단 난 BoxFit.contain 을 사용해 보았다.

SvgPicture.asset('assets/icon/man.svg', fit: BoxFit.contain,)

"네 마법은 소용없다"를 당해버렸다.. 그럼 이제 두 번째 해결책으로는 그냥 width 조절하는 방법이 있을 것이다.

근데 솔직히 화면 비율에 맞춰서 하는 것도 짜증 나고 조절하다 보면 화도 나지 않는가.. 

 

허나..! 여기서 숭배의 대상이 나온다면?@@!!!

Expanded(child: SvgPicture.asset('assets/icon/man.svg'))

무려 825 픽셀을 초과하던 svg 를 범부로 만들어버린다..!

 

심지어 밑에다가 텍스트를 추가한다면?

 

..이미지의 크기가 줄어들었다..!!

반응형 위젯이라니 반응형 위젯이라니 반응형 위젯이라니

 

이것이 끝이 아니다!!!

이와 같은 오류의 신인데 특히 Column 이나 Row 상황에서도 개쩌는 능력을 보여준다

 

상황을 하나 더 봐보자. 이건 입력창을 TextFeild 내부에 있는 걸로 만들지 않고 커스텀해서 만들 때의 상황이다.

 

"히히 잘 되겠지?"

child: Row(
  children: [
    SizedBox(width: 12),
    Icon(Icons.lock, color: Colors.grey),
    SizedBox(width: 12),
    TextField(
      decoration: InputDecoration(
        hintText: 'Password',
        hintStyle: TextStyle(
          color: Colors.grey,
          fontWeight: FontWeight.bold,
        ),
        border: InputBorder.none,
      ),
    ),
  ],
),

도대체 나의 hintText는 어디로 증발한 것이고.. 이 길고 긴 오류 메시지는 무엇인가..

 

허나 걱정 마시라 우리의 Expanded가 있으니!! 

그냥 살포시 이불 덮듯이 TextFeild 에 Expanded 를 덮어주면 코드가 오류 없이 잘 실행된다!!

Expanded(
  child: TextField(
    decoration: InputDecoration(
      hintText: 'Password',
      hintStyle: TextStyle(
        color: Colors.grey,
        fontWeight: FontWeight.bold,
      ),
      border: InputBorder.none,
    ),
  ),
),

 

암튼 이렇게 오늘 Expanded 의 사용법을 알아보았다. 진짜 좋으니 꼭 사용해 보길 바라며 마치겠다.