Flutter Animation 플러터 애니메이션

flutter는 쉽고 빠르게 애니메이션을 적용하여 앱 사용자에게 흥미와 관심을 불러 일으킬 수 있습니다. 앱 개발자들의 관심도 지속적으로 상승중이며 무엇보다 크로스 플랫폼 지원으로 IOS와 Android를 동일한 코드로 빌드할 수 있다는 강력한 장점이 있습니다.

오늘은 Flutter 애니메이션 위젯 중 AnimatedContainer 프로그래밍에 대해 알아보겠습니다.

flutter는 명시적인 애니메이션을 지원하기 위한 많은 위젯이 있습니다. 하지만 오늘 배우실 AnimatedContainer는 비 명시적인 위젯으로 간편한 적용 방법을 확인해 보시기 바랍니다.

AnimatedContainer class

AnimatedContainer는 일정 기간 동안 값을 점진적으로 값을 변경하여 애니메이션 효과를 주는 컨테이너입니다. AnimatedContainer 프로그래밍에 적용한 curve와 duration을 통해 초기값과 변경된 값 사이에서 위젯이 애니메이션 됩니다. null인 속성과 하위 위젯은 애니메이션되지 않으니 주의하기 바랍니다.

Constructors

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

 AnimatedContainer({
    Key? key,
    this.alignment,
    this.padding,
    Color? color,
    Decoration? decoration,
    this.foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    this.margin,
    this.transform,
    this.transformAlignment,
    this.child,
    this.clipBehavior = Clip.none,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  })

Required Parameter

curve와 duration은 null이 될 수 없습니다.

Properties

flutter container에서 지원하는 모든 속성을 상속 받습니다. 부모 객체인 container의 속성을 변경하여 애니메이션 효과를 줄 수 있습니다.

child → Widget?

컨테이너에 포함된 애니메이션 효과를 주는 하위 위젯

final

curve → Curve

애니메이션할 때 적용할 곡선

final, inherited

duration → Duration

애니메이션 효과를 줄 기간

final, inherited

소스분석

        child: AnimatedContainer(
          width: selected ? 200.0 : 100.0,
          height: selected ? 100.0 : 200.0,
          color: selected ? Colors.red : Colors.blue,
          alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
          duration: const Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: const FlutterLogo(size: 75),
        ),

해당 코드는 width, height color alignment 속성을 변경하여 container에 애니메이션 효과를 제공합니다. 뿐만 아니라 container 위젯에서 지원하는 모든 속성값, 예를 들어 borders, border radii, background images, shadows, gradients, shapes, padding 등 다양한 속성에 적용할 수 있습니다.

curve는 원하는 애니메이션 효과를 개발자만의 곡선으로 지정할 수 있습니다.

duration은 애니메이션 길이, 지속시간의 한도를 제어 합니다.

전체 소스 코드

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 selected = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          selected = !selected;
        });
      },
      child: Center(
        child: AnimatedContainer(
          width: selected ? 200.0 : 100.0,
          height: selected ? 100.0 : 200.0,
          color: selected ? Colors.red : Colors.blue,
          alignment: selected ? Alignment.center : AlignmentDirectional.topCenter,
          duration: const Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          child: const FlutterLogo(size: 75),
        ),
      ),
    );
  }
}

ARAYO IT - 아라요이트

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

댓글

댓글 쓰기