[flutter] 플러터에서 Visibility 설정을 이용한 테마 변경하기

플러터 앱을 개발할 때, 사용자 경험을 개선하기 위해 동적으로 테마를 변경해야 할 때가 있습니다. 예를 들어, 앱의 밝기를 조절하거나, 특정 조건에서 특정 위젯을 숨기고 싶을 때가 있습니다. 이때 Visibility 설정을 이용하여 테마를 변경할 수 있습니다.

Visibility 위젯

Visibility 위젯은 자식 위젯의 가시성을 조절하는 데 사용됩니다. 이 위젯은 visibleinvisible 두 가지 모드가 있습니다. visible 모드에서는 자식 위젯이 표시되고, invisible 모드에서는 자식 위젯이 숨겨집니다.

Visibility(
  visible: _isVisible, // true면 표시, false면 숨김
  child: Container(
    child: Text('텍스트'),
  ),
)

위 코드 예제에서 _isVisible 변수값에 따라 Text 위젯이 표시되거나 숨겨집니다.

테마 변경하기

앱을 개발하면서 특정 조건에서 앱의 테마를 변경해야 할 때가 있습니다. 예를 들어, 밝기 조절 모드로 전환할 때 앱의 전체적인 테마를 어둡게 변경하고 싶을 수 있습니다. 이때 Visibility 위젯을 사용하여 원하는 테마로 변경할 수 있습니다.

Visibility(
  visible: _isDarkMode, // true면 어두운 테마, false면 기본 테마
  child: Theme(
    data: ThemeData.dark(), 
    child: Container(
      child: Text('어두운 모드'),
    ),
  ),
),
Visibility(
  visible: !_isDarkMode,
  child: Theme(
    data: ThemeData.light(),
    child: Container(
      child: Text('기본 테마'),
    ),
  ),
)

위의 코드는 _isDarkMode 변수값에 따라 어두운 모드와 기본 모드로 테마를 변경합니다.

결론

Visibility 위젯을 이용하면 사용자의 인터랙션에 따라 동적으로 테마를 변경할 수 있습니다. 이를 통해 앱의 사용자 경험을 더욱 향상시킬 수 있습니다.

참고: 플러터 공식 문서 - Visibility 클래스