AnimatedOpacity

'AnimatedOpacity' 위젯은 자식 위젯의 불투명도를 애니메이션화하는 위젯입니다. ImplicitlyAnimatedWidget 클래스를 상속받아서 암묵적인 애니메이션을 지원합니다.

class _InterestsScreenState extends State<InterestsScreen> {
  final ScrollController _scrollController = ScrollController();

  bool _showTitle = false;

  void _onScroll() {
    if (_scrollController.offset > 100) {
      if (_showTitle) return;
      setState(() {
        _showTitle = true;
      });
    } else {
      setState(() {
        _showTitle = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: AnimatedOpacity(
          opacity: _showTitle ? 1 : 0,
          duration: const Duration(milliseconds: 300),
          child: const Text("Choose your interests"),
        ),
      ),

AnimatedOpacity 위젯은 opacity 속성을 사용하여 자식 위젯의 불투명도를 설정합니다. opacity 값이 변경되면, duration과 curve 속성에 따라 자식 위젯의 불투명도가 부드럽게 애니메이션화됩니다.

AnimatedOpacity 위젯은 다음과 같은 속성을 가집니다.

• key: 위젯의 고유 키입니다.
• child: 이 위젯 아래에 배치할 자식 위젯입니다.
• opacity: 자식 위젯의 목표 불투명도입니다. 0.0에서 1.0 사이의 값을 가집니다.
• curve: 애니메이션의 타이밍 곡선입니다.
• duration: 애니메이션의 지속 시간입니다.
• onEnd: 애니메이션이 끝날 때 호출할 콜백 함수입니다.
• alwaysIncludeSemantics: true로 설정하면, 이 위젯의 시맨틱 정보가 항상 포함됩니다.

이 코드는 Flutter에서 스크롤 이벤트를 감지하여 앱 바(AppBar)의 타이틀의 표시 여부를 동적으로 변경하는 로직을 구현하고 있습니다. 사용자가 특정 스크롤 위치를 넘어서면 타이틀을 보여주고, 그 이하로 내려가면 타이틀을 숨기는 방식입니다.

비즈니스 로직의 주요 구성 요소:

1. ScrollController:

   • _scrollController는 스크롤 가능한 위젯을 제어하기 위해 사용됩니다. 이를 통해 스크롤 이벤트를 감지하고 스크롤 위치에 접근할 수 있습니다.

2. _showTitle 변수:

   • _showTitle 불리언 변수는 앱 바의 타이틀을 표시할지 여부를 결정합니다. 초기값은 false로, 타이틀은 기본적으로 숨겨져 있습니다.

3. _onScroll 메서드:

   • _onScroll 메서드는 스크롤 이벤트가 발생할 때 호출됩니다. 이 메서드는 스크롤 위치(_scrollController.offset)를 체크하여, 해당 위치가 100픽셀을 넘어섰는지 여부에 따라 _showTitle 변수의 값을 변경합니다.
   • 스크롤 위치가 100픽셀을 넘으면 _showTitle을 true로 설정하여 타이틀을 표시하고, 그렇지 않으면 false로 설정하여 타이틀을 숨깁니다.
   • setState() 호출을 통해 _showTitle 값의 변경을 위젯에 반영하여 UI를 업데이트합니다.

4. initState 메서드:

   • initState는 위젯 수명주기에서 초기화 단계에 호출됩니다. 여기서 _scrollController에 _onScroll 메서드를 리스너로 추가하여 스크롤 이벤트를 감지하도록 설정합니다.

5. dispose 메서드:

   • dispose 메서드는 위젯의 수명주기가 끝날 때 호출됩니다. 여기서 _scrollController를 해제하여 메모리 누수를 방지합니다.

6. AnimatedOpacity 위젯:

   • AnimatedOpacity 위젯은 _showTitle 값에 따라 앱 바의 타이틀의 투명도를 애니메이션으로 변경합니다. _showTitle이 true이면 투명도가 1(불투명)로 설정되어 타이틀이 표시되고, false이면 투명도가 0(완전 투명)으로 설정되어 타이틀이 숨겨집니다.
   • 애니메이션 지속 시간은 300밀리초로 설정됩니다.

이 비즈니스 로직을 통해, 사용자가 스크롤을 통해 특정 위치를 넘나들 때 앱의 인터페이스에 동적인 변화를 줄 수 있으며, 이는 사용자 경험을 향상시키는 데 도움이 됩니다.