Flutter Animation 플러터 애니메이션

flutter는 크로스 플랫폼으로 IOS와 Android 빌드가 가능합니다. 모바일 개발자들이 직면해 있는 고민중 유지보수 관리 측면에서 강력한 편의성을 제공하고 있습니다. 현명한 개발자라면 이런 고민은 해결해 줄 수 있는 언어에 관심을 가질 수 밖에 없습니다. 또한 IT기업의 대표주자인 구글이 지원하고 있고, 모바일 개발언어의 중심에 서 있으며 많은 개발자들이 관심을 가지고 커뮤니트를 활성화 하고 있습니다.

그래서 오늘은 Flutter 애니메이션 프로그래밍의 범용 위젯인 AnimatedBuilder에 대해 알아 보겠습니다. 사용자들의 관심을 유도할 수 있고 Retention을 강화하기 위한 동적인 화면 구성은 최근 앱개발에서 필수입니다. 쉽고 빠르게 구현할 수 있는 AnimatedBuilder를 이용하여 여러분들도 아름답고 창의적인 앱 개발을 구현해 보시길 바랍니다.

AnimatedBuilder Class

Flutter의 애니메이션은 애니메이션을 구성요소들의 조합을 통해 쉽게 만들 수 있도록 많은 옵션을 제공합니다. 그중 가장 좋은 선택은 AnimatedBuilder를 사용하는 것입니다. 쉽고 간편하게 자식위젯에게 애니메이션 효과를 제공할 수 있습니다.

Constructors

애니메이션 빌더를 만듭니다.

animation및 빌더 인수가 null이 아니어야합니다.

  const AnimatedBuilder({
    Key? key,
    required Listenable animation,
    required this.builder,
    this.child,
  })

Required Parameter

Listenable animation : AnimationController type 으로 정의된 변수 정의

TransitionBuilder builder : Transform 객체 정의

  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 10),
    vsync: this,
  )..repeat();

    return AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget? child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,
        );
      },
    );

Properties

builder → TransitionBuilder

애니메이션이 값을 변경할 때마다 호출됩니다.

final

child → Widget?

빌더에 전달할 하위 위젯입니다. 대상이 애니메이션 됩니다.

final

Transfrom.ratate

중앙을 중심으로 회전하여 자식위젯을 만듭니다.

angle인수가 null이 될수 없으며, 시계 방향으로 라디안 단위의 회전을 제공합니다.

        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,
        );

전체 소스 코드

import 'dart:math' as math;

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 const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> with TickerProviderStateMixin {
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 10),
    vsync: this,
  )..repeat();

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.green,
        child: const Center(
          child: Text('AnimatedBuilder'),
        ),
      ),
      builder: (BuildContext context, Widget? child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,
        );
      },
    );
  }
}

ARAYO IT - 아라요이트

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

댓글

댓글 쓰기