Flutter 강좌 - Fade a widget in and out | 컨테이너 패이드 인 앤 아웃 애니메이션 효과 주기

 

Flutter 강좌 목록 : https://here4you.tistory.com/120

 

앱을 개발할 때 스크린의 특정 앨리먼트를 보이거나 사라지게 할 필요가 있다. 이러한 기법을 페이드 패이드 인 & 패이드 아웃이라고 한다.

이번 강좌에서는 컨테이너를 패이드 인 & 아웃 하는 애니메이션 효과를 부여하는 방법에 대해서 알아본다.

 

우선 실행 화면을 살펴보자. 

스크린 중앙에 사각형 모양의 도형이 사라지고 다시 나타나고를 반복한다. 이는 스크린 중앙에 위치한 컨테이너가 스크린 우측하단의 플로팅액션버튼을 누를 때 마다 패이드 인되고 패이드 아웃되는 애니메이션 효과가 발생하는 것이다.

Flutter 공식 사이트 이미지 참스크

 

소스코드는 다음과 같다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Opacity Demo';

    return MaterialApp(
      title: appTitle,
      // MyHomePage 위젯 라우트를 home으로 설정. 생성자로 apptitle 값 전달
      home: MyHomePage(title: appTitle),
    );
  }
}

// 앱 실행시 출력되는 초기 라우드 위젯
class MyHomePage extends StatefulWidget {
  final String title;

  // 생성자. title 아규먼트를 전달받아 필드에 저장
  MyHomePage({Key key, this.title}) : super(key: key);

  //  StatefulWidget은 createState() 메소드를 통해 상태를 생성한다.
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

// State를 상속하는 클래스
class _MyHomePageState extends State<MyHomePage> {
  // 컨테이너의 표시 여부를 결정하기 위한 필드값
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // 투명도 애니메이션 효과를 제공하는 위젯 추가
        child: AnimatedOpacity(
          // 필드값에 따라 출력 여부를 토클함
          opacity: _visible ? 1.0 : 0.0,
          // 애미메이션 효과에 소요되는 시간 설정
          duration: Duration(milliseconds: 500),
          // 컨테이너 추가
          child: Container(
            // 컨테이너의 너비, 높이, 색상 설정
            width: 200.0,
            height: 200.0,
            color: Colors.green,
          ),
        ),
      ),
      // 플로팅액션버튼 추가
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 상태값 재설정
          setState(() {
            // 컨테이너의 표시여부를 토글
            _visible = !_visible;
          });
        },
        tooltip: 'Toggle Opacity',
        child: Icon(Icons.flip),
      ),
    );
  }
}

 

소스코드를 살펴보면,

메인함수에서는 MyHomePage를 초기 라우트 스크린으로 설정하고 있다. MyHomePage는 StatefulWidget을 상속하므로 상태를 생성하기 위한 createState 메소드를 오버라이트해야한다. 이를 위해 State를 상속하는 _MyHomepageState 클래스를 생성/호출한다.

_MyHomePageState 상태 클래스는 사용자에게 출력할 도형을 컨테이너로 정의하고 있다. 이 컨테이너는 너비와 높이를 200.0 으로 설정하고 있으며 배경색은 녹색으로 설정하고 있다. 이 도형 모양의 컨테이너를 패이드 인 & 아웃하기 위해 표시여부를 결정하는 opacity 항목에 필드 _visible을 대입하고 있다.

_MyHomePageState 상태 클래스에는 floatingActionButton이 추가되고, 플로팅 액션 버튼이 클릭 되면 setSate ㅎ마수에 의해 필드 _visible 값이 토글되게 되고, 이에 따라 컨테이너의 출력 여부가 변경되고 duration으로 설정한 500 밀리세컨트 동안 컨테이너의 패이드 인 & 아웃 애니메이션이 발생하게 된다.

 

본 강좌를 Flutter 공식 사이트의 문서를 참고하여 작성되었습니다.

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

Fade a widget in and out

 

---

Flutter Code Examples 강좌를 추천합니다.

• 제 블로그에서 Flutter Code Examples 프로젝트를 시작합니다.
• Flutter의 다양한 예제를 소스코드와 실행화면으로 제공합니다.
• 또한 모든 예제는 Flutter Code Examples 앱을 통해 테스트 가능합니다.

Flutter Code Examples 강좌로 메뉴로 이동

Flutter Code Examples 강좌 목록 페이지로 이동

Flutter Code Examples 앱 설치 | Google Play Store로 이동

Flutter Code Examples - Google Play 앱