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

 

 

현재 많은 모바일 개발자분들은 시장의 새로운 도전에 직면해 있습니다. 정적인 화면으로 사용자의 Retention을 유지할 수 없으며 마케팅으로 인한 설치 유입에도 분명 한계가 있습니다.  따라서 사용자의 관심을 유도할 수 있는 동적인 화면과 아이디어 넘치는 컨텐츠로 다양한 요구 조건을 충족 시킬 필요가 있습니다. 

flutter에서 제공하는 다양한 animation widget을 이용하여 여러분들의 번쩍이는 아이디에 접목하고 프로그래밍 방법을 학습해 나감으로써 사용자 친화적인 아름답고 동적인 화면을 제공해 보시기 바랍니다. 

AnimatedAlign 클래스

지정된 Align이 변경 될 때마다 지정된 기간 동안 자식위젯의 위치를 ​​자동으로 전환하는 Align 애니메이션입니다 Curves.fastOutSlowIn 의 곡선을 사용하여 어떻게 동작되는지 확인할 수 있습니다.

          child: AnimatedAlign(

            alignment: selected ? Alignment.topRight : Alignment.bottomLeft,

            duration: const Duration(seconds: 1),

            curve: Curves.fastOutSlowIn,

            child: const FlutterLogo(size: 50.0),

          ),

Constructors

Alignment 의 x 및 y 값은 가로 및 세로를 제어합니다. 각각 정렬. x 값이 -1.0이면 왼쪽 가장자리 x 값 1.0은 자식의 오른쪽 가장자리가 오른쪽에 맞춰져 있음을 의미합니다.

  const AnimatedAlign({

    Key? key,

    required this.alignment,

    this.child,

    this.heightFactor,

    this.widthFactor,

    Curve curve = Curves.linear,

    required Duration duration,

    VoidCallback? onEnd,})  

Properties

alignment → AlignmentGeometry

정렬방법 정의

final

child → Widget?

정렬대상 위젯

final

curve → Curve

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

final, inherited

 

전체코드소스

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: Container(

          width: 250.0,

          height: 250.0,

          color: Colors.red,

          child: AnimatedAlign(

            alignment: selected ? Alignment.topRight : Alignment.bottomLeft,

            duration: const Duration(seconds: 1),

            curve: Curves.fastOutSlowIn,

            child: const FlutterLogo(size: 50.0),

          ),

        ),

      ),

    );

  }

}