04. AnimatedContainer in Flutter [Flutter Widget of the Week]톺아보기

Flutter of the week란?

 공식 유튜브 채널에서 주 1회  Flutter의 다양한 기능, 팁, 패키지등의 사용 사례에 대한 간결하고 유익한 정보를 제공하는 영상시리즈
바로가기

Intro

 앱서비스에서의 애니메이션은 디자인에 생명력을 불어 넣고, 사용자 경험을 높이기 위해 자주 사용되곤합니다. 오늘은 애니메이션을 활용해 동적인 앱을 만드는데 도움을 주는 위젯중 하나인 AnimatedContainer에 대해 알아보도록 하겠습니다.

 

AnimatedContainer 위젯이란?

The AnimatedContainer will automatically animate between the old and new values of properties when they change using the provided curve and duration.

AnimatedContainer 위젯은제공된 곡선 및 지속 시간을 사용하여 속성이 변경되면 Animated Container(애니메이션 컨테이너) 이전 값과 새 값 사이에 자동으로 애니메이션을 적용합니다.

AnimatedContainer 위젯은 일정 기간 동안 값이 점차 변경되는 애니메이션이 가능한 컨테이너입니다.

 

AnimatedContainer 위젯 사용법

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),
   onEnd: (){
       print('hello');
       }
   )

• width, height,color, alignment 등 : 변경 전/ 후 값으로 나누어 애니메이션 속성 설정
• duration : 애니메이션 지속시간
• curve: 애니메이션 커브(효과) 설정
• onEnd: 애니메이션 완료뒤 호출

사용예제

import 'package:blog/screen/widget/fl_chart.dart';
import 'package:flutter/material.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  bool _isContainerShow = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 300));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimatedContainer'),
      ),
      body: Column(
        children: [
          const SizedBox(
            height: 24,
          ),
          GestureDetector(
            onTap: () {
              setState(() {
                _isContainerShow = !_isContainerShow;
              });
            },
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                width: MediaQuery.of(context).size.width,
                height: _isContainerShow ? 420 : 64,
                color: _isContainerShow ? Colors.blue : Colors.blue[300],
                onEnd: () {
                  print('hello');
                },
                child: Padding(
                  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 16),
                  child: Column(
                    children: [
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Expanded(
                            child: Text(
                              '애니메이션',
                              style:
                                  TextStyle(color: Colors.white, fontSize: 18),
                            ),
                          ),
                          Icon(
                            Icons.arrow_drop_down_outlined,
                            size: 32,
                            color: Colors.white,
                          ),
                        ],
                      ),
                      if (_isContainerShow)
                        FutureBuilder<Widget>(
                            future: renderBarChart(),
                            builder: (context, snapshot) {
                              if (snapshot.connectionState ==
                                  ConnectionState.done) {
                                return snapshot.data ?? Container();
                              } else {
                                return Container();
                              }
                            })
                    ],
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
  
  

  Future<Widget> renderBarChart() async {
    await Future.delayed(Duration(milliseconds: 300));
    return BarChartSample1();
  }
}