Flutter Animation 플러터 애니메이션 - AnimatedDefaultTextStyle
flutter는 최종 사용자의 경험에 초점을 맞춰 신속하게 기능을 제공 할 수 있으며, 계층형 아키텍처를 통해 완벽한 커스터마이징을 할 수 있기 때문에 빠른 렌더링으로 사용자에게 새로운 경험을 제공할 수 있습니다. flutter에 내장된 아름다운 Material Design 디자인 위젯, Cupertino Design(IOS) 위젯, 풍부한 모션 API, 부드럽고 자연스러운 스크롤, 폴랫폼 인식기능을 활용하여 여러분들의 아이디어를 구현해 보세요
오늘은 지정된 스타일이 변경될 때마다 지정된 기간 동안 기본 텍스트 스타일을 자동으로 전환하는 AnimatedDefaultTextStyle 의 프로그래밍을 알아 보겠습니다.
AnimatedDefaultTextStyle class
Curve와 Duration을 지정하여 자동으로 기본 텍스트 타일을 애니메이션 할 수 있습니다. Title Text이나 Button Text에 Style 애니메이션 효과를 부여하여 상태 변화를 동적으로 표현할 수 있으며, Text Style이 적용된 모든 하위 위젯에 사용할 수 있습니다.
Contructors
매개변수를 이용하여 애니메이션을 적용할 위젯을 생성합니다.
const AnimatedDefaultTextStyle({
Key? key,
required this.child,
required this.style,
this.textAlign,
this.softWrap = true,
this.overflow = TextOverflow.clip,
this.maxLines,
this.textWidthBasis = TextWidthBasis.parent,
this.textHeightBehavior,
Curve curve = Curves.linear,
required Duration duration,
VoidCallback? onEnd,
})
Required Parameter
인수는 null이 아니어야 합니다.
Properties
child → Widget
텍스트 스타일 애니메이션이 적용될 하위 위젯
final
style → TextStyle
대상 텍스트 스타일
final
curve → Curve
이 컨테이너의 매개변수를 애니메이션할 때 적용할 곡선입니다.
final, inherited
duration → Duration
이 컨테이너의 매개변수에 애니메이션 효과를 줄 기간입니다.
final, inherited
Code 분석
child: AnimatedDefaultTextStyle(
duration: Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
style: TextStyle(
fontSize: mapTextStyle['fontSize'] * 1.0,
color: mapTextStyle['fontColor'],
fontWeight: mapTextStyle['fontWeight'],
),
child: Center(child: Text('Flutter')),
),
mapTextStyle 필드값에 따라 하위 Text 위젯의 스타일이 애니메이션됩니다.
void _setTextStyle(bool selected) {
if (selected) {
mapTextStyle = {
'fontSize': 50.0,
'fontColor': Colors.white,
'fontWeight': FontWeight.w100,
};
} else {
mapTextStyle = {
'fontSize': 50.0,
'fontColor': Colors.red,
'fontWeight': FontWeight.w500,
};
}
}
selected 부울 필드값에 따라, mapTextStyle 상태값이 변경될 때 하위 Text 위젯은 mapTextStyle 상태값으로 1초에 걸쳐 전환 애니메이션됩니다.
전체 Code
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;
Map<String, dynamic> mapTextStyle = {
'fontSize': 50.0,
'fontColor': Colors.white,
'fontWeight': FontWeight.w100,
};
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
_selected = !_selected;
setState(() => _setTextStyle(_selected));
},
child: Center(
child: Container(
height: 100,
width: 300,
color: Colors.blue,
child: AnimatedDefaultTextStyle(
duration: const Duration(seconds: 1),
curve: Curves.fastOutSlowIn,
style: TextStyle(
fontSize: mapTextStyle['fontSize'] * 1.0,
color: mapTextStyle['fontColor'],
fontWeight: mapTextStyle['fontWeight'],
),
child: const Center(child: Text('Flutter')),
),
),
),
);
}
void _setTextStyle(bool selected) {
if (selected) {
mapTextStyle = {
'fontSize': 50.0,
'fontColor': Colors.white,
'fontWeight': FontWeight.w100,
};
} else {
mapTextStyle = {
'fontSize': 50.0,
'fontColor': Colors.red,
'fontWeight': FontWeight.w500,
};
}
}
}
댓글
댓글 쓰기