Flutter에서 모든 건 Widget입니다. 간단한 문자를 출력하는 Text부터 다른 Widget을 담기 위한 Container까지 모두 Widget입니다. 한마디로 사용자에게 보이든, 보이지 않든 화면을 구성하는 모든 것은 Widget입니다.
그리고 한발 더 나아가서 Widget 자체의 show/hide 까지도 별도의 Widget(Visibility)입니다.
다른 UI에서 Visibility
UI를 다루는 다른 프레임워크를 보면 일반적으로 A라는 컴포넌트를 사용자에게 Show, Hide 처리하는 것은 그 컴포넌트 자체에서 show(), hide() 함수(혹은 메서드)를 제공하거나 투명도를 0으로 설정하여 처리하곤 합니다. 예를 들어 안드로이드에서 TextView는 xml에서 visibility를 설정할 수 있습니다.
<TextView
...
android:visibility="gone"
/>
HTML에서는 대상의 style.display에 설정을 통해 show, hide를 처리합니다.
document.getElementById("element").style.display = "none";Flutter에서 Visibility는 Visibility Widget을 사용
그렇다면 Flutter에서는 Visibility Widget으로 어떻게 show/hide를 구현 할까요? 아래와 같이 중앙에 Text 문구를 출력하는 앱이 있습니다. 플로팅 버튼을 클릭하면 앱이 사라지게 구현을 해봅시다.
Text Widget을 Visibility Widget의 child로 감싸줍니다. 그리고 변경이 필요한 시점에 _visibility를 이용하여 상태를 Text Widget의 show/hide를 관리합니다.
children: <Widget>[
Visiblity(
child: Text('이 글자를 안보이게 하고 싶습니다.',
style: Theme.of(context).textTheme.headline4,
),
visible: _visibility,
),
],정리
Android, HTML의 show/hide와 달리 Visibility 자체도 Widget으로 따로 처리한다는 것이 낯설게 느껴졌지만 여백 같은 빈 공간조차도 SizedBox Widget으로 구현해 놓은걸 보면 Flutter가 skia로 랜더링하기 위해서 모든 것을 Widget화 시킨 게 아닌가 추측됩니다.