flutter & dart - AnimatedContainer

Overview.

애니메이션 효과를 줄 수 있는 컨테이너인 AnimatedContainer 를 알아봅시다.

사실 쉽게 Drawer 로 사이드바를 구현이 가능하지만 한번 해보죠. 

사이드바가 아닌 다른 도형이나 이런것들로 구현도 가능하니 봅시다!!

1. AnimatedContainer

 

0. 문서

https://www.youtube.com/watch?time_continue=56&v=yI-8QHpGIP4&embeds_referring_euri=https%3A%2F%2Fapi.flutter.dev%2F&embeds_referring_origin=https%3A%2F%2Fapi.flutter.dev&source_ve_path=MjM4NTE&feature=emb_title

https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html

AnimatedContainer class - widgets library - Dart API

 

1. AnimationContainer 

위의 영상과 같이 에니메이션 효과를 줄 수 있는 컨테이너입니다.

쉽게 그냥 컨테이너인데 애니메이션 효과를 줄 수 있다는 점이 키 포인트죠.

 

Drawer 로도 만들 수 있는 사이드바를 한번 만들어 보았습니다.

 

일단 AnimatedContainer 의 코드를 살펴보죠.

밑과 같이

curve : 애니메이션 효과

duration : 애니메이션 시전 시간

height : 해당 컨테이너의 높이

width : 해당 컨테이너의 넓이

color : 해당 컨테이너의 색깔

transform : Matrix4.translationValues  : 해당 컨테이너를 x , y , z 좌표로 움직일 수 있는 녀석입니다. [여러가지 더 있어요!]

 

MediaQuery.of(context).size 를 활용하여 해당 디바이스의 넓이를 알아 내어 제한을 두었습니다.

isOpen 은 열렸는지 닫혔는지 확인하는 boolean 타입 변수입니다.

        AnimatedContainer(
          curve: Curves.easeInOut, // 애니메이션 효과
          duration: Duration(seconds: 1), // 시간
          height: double.infinity, // 컨테이너 높이
          width: size.width * (2 / 3), // 컨테이너 넓이
          color: Colors.blue, // 컨테이너 색깔
          // X , Y , Z 좌표
          transform: Matrix4.translationValues(
            // isOpen 이 true 라면 0
            // isOpen 이 false 라면 size.width
             isOpen ? size.width * (1/ 3) : size.width,0,0
          ),
        )

 

전체 코드

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: _Home(),
    );
  }
}

class _Home extends StatefulWidget {
  const _Home({super.key});

  @override
  State<_Home> createState() => _HomeState();
}

class _HomeState extends State<_Home> {
  var size; // Size 객체
  bool isOpen = false;


  @override
  Widget build(BuildContext context) {
    // 해당 디바이스의 화면 비율
    size = MediaQuery.of(context).size;
    print("size.width : ${size.width}");

    return buildScaffold();
  }

  // 애니메이션 효과 1번 예제
  Scaffold buildScaffold() {
    return Scaffold(
    appBar: AppBar(
      actions: [
        InkWell(
          onTap: () {
            setState(() {
              isOpen = !isOpen;
            });
          },
            child: Icon(Icons.menu),),
      ],
    ),
    body: Stack(
      children: [
        Center(
          child: Text("Animation Screen"),
        ),
        AnimatedContainer(
          curve: Curves.easeInOut, // 애니메이션 효과
          duration: Duration(seconds: 1), // 시간
          height: double.infinity, // 컨테이너 높이
          width: size.width * (2 / 3), // 컨테이너 넓이
          color: Colors.blue, // 컨테이너 색깔
          // X , Y , Z 좌표
          transform: Matrix4.translationValues(
            // isOpen 이 true 라면 0
            // isOpen 이 false 라면 size.width
             isOpen ? size.width * (1/ 3) : size.width,0,0
          ),
        ),
      ],
    ),
  );
  }
}