AnimatedPadding class
주어진 인셋이 변경될 때마다 주어진 기간 동안 들여쓰기를 자동으로 전환하는 패딩의 애니메이션 버전입니다.
공식 문서 코드
우리가 보통 화면을 구성할 때에 위젯에 직접적인 사이즈를 줘서 만든다. 허나 많이들 유동성을 위해 위젯 자체의 크기는 고정값으로 넣어놓지 않고 패딩(padding)에 맡겨 화면에 따라 크기를 다르게 만들곤 한다. 그렇다면 그 안에서 위젯의 크기를 변화시켜야 하고 변화시키는 과정에 애니메이션이 필요하다면 어떠한 것을 사용해야 할까? 바로 AnimatedPadding 위젯이다.
이 AnimatedPadding 위젯은 자식 위젯에 적용된 패딩을 애니메이션 효과와 함께 변경할 수 있도록 도와준다. 바로 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| padding | EdgeInsetsGeometry | – | 자식 위젯을 감싸는 여백으로 애니메이션 효과가 적용됨 |
| child | Widget? | null | 패딩이 적용되는 대상 자식 위젯 |
| duration | Duration | – | 애니메이션의 지속 시간 |
| curve | Curve | Curves.linear | 애니메이션의 진행 곡선을 지정 |
| onEnd | VoidCallback? | null | 애니메이션이 완료되었을 때 호출되는 콜백 함수 |
사용법은 정말 간단하다. 원래 사용하던 Padding 에 duration 과 원한다면 curve 로 애니메이션을 조정해주면 주면 되겠다.
AnimatedPadding(
padding: EdgeInsets.symmetric(horizontal: padValue),
duration: Duration(milliseconds: 1500),
)
보는 것처럼 그냥 padding 은 원래 먹이던 것처럼 먹이고 거기다가 duration 만 넣으면 완성이다. 이미 이해가 엄청 쉽게 되지만 더 쉽게 공식 예제를 들어서 설명해 주겠다.
(전체코드)
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Test()));
class Test extends StatefulWidget {
const Test({super.key});
@override
State<Test> createState() => _TestState();
}
class _TestState extends State<Test> {
double padValue = 0.0;
void _updatePadding(double value) {
setState(() {
padValue = value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedPadding(
padding: EdgeInsets.symmetric(horizontal: padValue),
duration: Duration(milliseconds: 1500),
child: GestureDetector(
onTap: () {
setState(() {
_updatePadding(padValue == 0.0 ? 100 : 0.0);
});
},
child: Container(
color: Colors.blue,
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height / 5,
),
),
),
),
);
}
}
공식 코드를 보고 더 쉽게 개량(?) 해서 만든 코드이다.
일단 먼저 패딩값을 제어할 double 타입 변수를 하나 선언해 줬다.
double padValue = 0.0;
그 후 위젯을 눌렀을 때 호출될 메서드를 하나 만들었는데 인자값을 하나 받아온다.
void _updatePadding(double value) {
setState(() {
padValue = value;
});
}이제 받아온 아규먼트를 만들어둔 padValue 에 대입해 준다. 이러면 들어오는 값에 따라 padValue 도 달라지는 메서드가 쉽게 완서가 된다.
그다음은 당연히 바로 AnimatedPadding 인데 이건 더 별거 없다.
padding: EdgeInsets.symmetric(horizontal: padValue),
duration: Duration(milliseconds: 1500),padding 에는 EdgeInsets.symmetric 으로 좌우를 기준으로 패딩을 줄 수 있게 했고 안에서 horizontal: padValue 로 함으로써 가로 쪽만 padValue 에 영향을 받아 패딩을 주게끔 하였다.
GestureDetector(
onTap: () {
setState(() {
_updatePadding(padValue == 0.0 ? 100 : 0.0);
});
},
child: Container(
color: Colors.blue,
width: MediaQuery.sizeOf(context).width,
height: MediaQuery.sizeOf(context).height / 5,
),
),패딩의 자식으로는 간단하게 크기를 양옆으로 꽉 차지하는 컨테이너를 만들어 놓았다. MediaQuery.sizeOf(context).width 로 사용하고 있기에 유동적으로 어떤 화면에서든 양 옆을 다 차지하게 될 것이다. 그에 따라 패딩도 마찬가지로 유동적으로 먹히게 된다.
그리고 이제 컨테이너를 감싸서 _updatePadding 메서드를 하나 호출하고 있는데 그 인자값으로 100 혹은 0을 주게 된다.
void _updatePadding(double value) {
setState(() {
padValue = value;
});
}아까 위에서 만들었던 이 메서드에 이 인자값을 대입하게 되면
_updatePadding(padValue == 0.0 ? 100 : 0.0);기본 패딩인 0.0 일 때에는 100을 반환시키게 되므로 padValue 는 곧 100이 될 것이고 그렇게 100 이 된 padValue 인 상태로 한 번도 호출되게 되면 이번에는 0.0 이 아니라서 삼항연사자에서 false 로 걸러지니 0.0이 될 것이다. 이렇게 해서 간단하게 값을 조절해 주는 메서드를 만들고 그것을 넣어줬다.
암튼 이렇게 AnimatedPadding 에 대해서 알아보았다. 작성 다 하고 나니까 보이는 게 curve 를 사용을 안 했다;; 근데 이건 뭐 다 사용할 수 있으니까 빼도 괜찮을 것 같긴 하다. Flutter 의 위젯 중에서 Animated - 형식의 위젯이 많이 보이는데 확실히 이런 거 없으면 애니메이션을 줄 수 있는 위젯이 너무 한정적이기도 해서 꼭 필요한 위젯인 것 같다. 도움이 되었길 바라며 마치겠다.
