Flutter Animation 플러터 애니메이션

flutter의 많은 장점 중 빠른개발과 유연한 UI 그리고 네이티브 수준의 성능을 들 수 있습니다. Hot Reload를 이용하여 개발 환경의 편의성을 극대화 하였고 커스터마이징을 완전히 지원하는 다양한 위젯 활용으로 몇분만에 네이티브 인테페이스를 구축할 수 있습니다. 많은 개발자분들이 고민없이 선택한 flutter 프로그래밍만의 매력에 빠져 보시길 추천드립니다.

오늘은 두 위젯 사이에 CrossFade animation을 적용할 수 있는 AnimatedCrossFade에 대해 알아 보겠습니다.

AnimatedCrossFade class

CrossFade는 영화 용어로서 한 대상이 천천히 다른 대상으로 바뀜을 의미합니다. AnimatedCrossFade는 지정된 두개의 하위 위젯을 갑작스럽게 바꾸는 것이 아니라 서서히 변경하는데 사용할 수 있습니다.

Contructors

매개변수를 이용하여 애니메이션을 적용할 컨테이너를 생성합니다.

  const AnimatedCrossFade({
    Key? key,
    required this.firstChild,
    required this.secondChild,
    this.firstCurve = Curves.linear,
    this.secondCurve = Curves.linear,
    this.sizeCurve = Curves.linear,
    this.alignment = Alignment.topCenter,
    required this.crossFadeState,
    required this.duration,
    this.reverseDuration,
    this.layoutBuilder = defaultLayoutBuilder,
  }) 

Required Parameter

key이외의 모든 인수는 null이 아니어야 합니다.

Properties

crossFadeState → CrossFadeState

애니메이션이 완료되면 표시될 하위 요소입니다.

final

duration → Duration

전체 애니메이션의 지속 시간입니다.

final

firstChild → Widget

crossFadeState가 CrossFadeState.showFirst일 때 보이는 하위 요소입니다.

crossFadeState를 CrossFadeState.showFirst에서 CrossFadeState.showSecond로 또는 그 반대로 전환할 때 Fade Out 됩니다.

final

secondChild → Widget

crossFadeState가 CrossFadeState.showSecond일 때 보이는 하위 요소입니다.

crossFadeState를 CrossFadeState.showFirst에서 CrossFadeState.showSecond로 또는 그 반대로 전환할 때 Fade In 됩니다.

final

Code 분석

  child: AnimatedCrossFade(
    duration: const Duration(seconds: 3),
    firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 300.0),
    secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 300.0),
    crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
  ),

_first 부울 필드에 따라 Flutter 두 로고가 천천히 전환 됩니다.

_first가 true이면 첫 번째 로고가 표시되고, 그렇지 않으면 두 번째 로고가 표시됩니다.

필드 상태가 변경되면 AnimatedCrossFade 위젯은 3초에 걸쳐 두 로고 사이를 교차 페이드합니다.

전체 Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _first = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _first = !_first;
        });
      },
      child: Center(
        child: AnimatedCrossFade(
          duration: const Duration(seconds: 3),
          firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 300.0),
          secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 300.0),
          crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
        ),
      ),
    );
  }
}

ARAYO IT - 아라요이트

Flutter Animation 플러터 애니메이션 - AnimatedCrossFade

댓글

댓글 쓰기