[Flutter/Animation] AnimatedContainer를 활용한 오른쪽에서 왼쪽으로 이동하는 컨테이너

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); // 비동기로 실행(이벤트 루프에 등록된다.)
}

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

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

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

  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  late Size size;

  // 컨테이너 애니메이션
  bool isOpen = false;
  @override
  void initState() {
    super.initState();
    // error : context를 찾지 못함
    // size = MediaQuery.of(context).size;
  }

  @override
  Widget build(BuildContext context) {
    size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        actions: [
          // 아이콘을 버튼화
          InkWell(
            child: Icon(Icons.menu),
            onTap: () {
              setState(() {
                // 클릭할때마다 isOpen의 값이 반대로
                isOpen = !isOpen;
              });
            },
          ),
        ],
      ),
      body: Stack(
        children: [
          Center(
            child: Text("Animation screen"),
          ),
          AnimatedContainer(
            // 속도
            duration: Duration(seconds: 2),
            // animation 형태
            curve: Curves.easeInOut,
            height: double.infinity,
            // 컨테이너의 가로 사이즈
            width: size.width * (2 / 3),
            color: Colors.blue,
            // isOpen 값에 따라 가로 위치 이동
            transform: Matrix4.translationValues(
                isOpen ? size.width * (1 / 3) : size.width, 0, 0),
          )
        ],
      ),
    );
  }
}