Fade a widget in and out

Animation을 이용하여 Fade-In, Fade-Out 을 하는 방법에 대해서 알아보겠습니다.

AnimatedOpacity을 이용하여 쉽게 만들 수 있습니다.

Create a box to fade in and out

Fade-In, Fade-Out 을 적용할 Container를 생성합니다.

Container(
  width: 200.0,
  height: 200.0,
  color: Colors.green,
);

Display a button that toggles the visibility

_setState() 함수를 이용하여 Container의 visibility를 결정하는 버튼을 생성합니다.

FloatingActionButton(
  onPressed: () {
    // Call setState. This tells Flutter to rebuild the
    // UI with the changes.
    setState(() {
      _visible = !_visible;
    });
  },
  tooltip: 'Toggle Opacity',
  child: Icon(Icons.flip),
)

Fade the box in and out

AnimatedOpacity을 이용하여 Fade-In, Fade-Out 을 설정합니다.

AnimatedOpacity(
  // If the widget is visible, animate to 0.0 (invisible).
  // If the widget is hidden, animate to 1.0 (fully visible).
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(milliseconds: 500),
  // The green box must be a child of the AnimatedOpacity widget.
  child: Container(
    width: 200.0,
    height: 200.0,
    color: Colors.green,
  ),
)

Example

Reference

[Cookbook - Fade a widget in and out]