반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- Prism.js
- uint16array
- code editor
- Redux
- REST API
- Three js
- Raycasting
- RouteObserver
- swagger-typescript-api
- react
- jszip
- Flutter
- Babel standalone
- FirebaseAnalytics
- androidId
- Game js
- KakaoMap
- Completer
- methodChannel
- Three-fiber
- node
- Image Resize typescript
- identifierForVender
- babel
- userevent_tracker
- web track
- typescript
- webrtc
- uint8array
- Excel
Archives
- Today
- Total
Never give up
Flutter - AnimatedBuilder with transition 본문
반응형
화면을 구성하다보면 Navigator를 통하여 다른 화면으로 이동해야되는 상황이 생기고
Animation을 이용하여 조금 더 멋진 화면을 구성하는데
listener안에서 setState를 이용하면 성능이 떨어지기 때문에
AnimatedBuilder를 이용하면 세련된 애니메이션과 성능을 동시에 잡을 수 있습니다
메인화면
class TestAnimation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Animation test')),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 80),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
RaisedButton(
child: Text('Fade transition'),
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => Screen3()))),
RaisedButton(
child: Text('Offset transition'),
onPressed: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => Screen4()))),
],
),
),
);
}
}
예제 화면 및 위젯
class Screen3 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Fade transition')),
body: Center(child: FadeTransitionWidget(showWidget: TestBox())));
}
}
class Screen4 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Offset transition')),
body: Center(child: OffsetTransitionWidget(showWidget: TestBox())));
}
}
class TestBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
width: 200,
color: Colors.blue,
);
}
}
Fade를 이용한 Transition
import 'package:flutter/material.dart';
class FadeTransitionWidget extends StatefulWidget {
final Widget showWidget;
FadeTransitionWidget({this.showWidget});
@override
_FadeTransitionWidgetState createState() => _FadeTransitionWidgetState();
}
class _FadeTransitionWidgetState extends State<FadeTransitionWidget>
with SingleTickerProviderStateMixin {
AnimationController _controller;
Animation _animation;
@override
void initState() {
super.initState();
_controller =
AnimationController(duration: Duration(seconds: 1), vsync: this);
_animation = CurvedAnimation(parent: _controller, curve: Curves.decelerate);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return FadeTransition(
opacity: _animation,
child: widget.showWidget,
);
},
);
}
}
Offset을 이용한 Transition
import 'package:flutter/material.dart';
class OffsetTransitionWidget extends StatefulWidget {
final Widget showWidget;
OffsetTransitionWidget({this.showWidget});
@override
_OffsetTransitionWidgetState createState() => _OffsetTransitionWidgetState();
}
class _OffsetTransitionWidgetState extends State<OffsetTransitionWidget>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Transform.translate(
offset: Offset(0, -10 * _controller.value),
child: widget.showWidget);
},
);
}
}
AnimatedBuilder를 사용하지 않은 FadeTransition
import 'package:flutter/material.dart';
class FadeWidget extends StatefulWidget {
final Widget showWidget;
FadeWidget({this.showWidget});
@override
_FadeWidgetState createState() => _FadeWidgetState();
}
class _FadeWidgetState extends State<FadeWidget>
with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
super.initState();
_controller =
AnimationController(vsync: this, duration: Duration(seconds: 1));
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: Tween(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: _controller, curve: Curves.decelerate)),
child: widget.showWidget);
}
}
AnimatedBuilder를 사용하면 복잡한 위젯트리를 가진곳에서 조금 더 유용하다고 합니다
(공식문서 : https://api.flutter.dev/flutter/widgets/AnimatedBuilder-class.html)
반응형
'Flutter' 카테고리의 다른 글
Flutter - Listview with Listener (0) | 2020.08.03 |
---|---|
Flutter - Listview with ScrollController (2) | 2020.08.03 |
Flutter - Indexed Stack with Provider (5) | 2020.08.03 |
Flutter - Splash Screen(Loading screen) (0) | 2020.08.03 |
Flutter - onBackPressed(WillPopScope) (0) | 2020.08.03 |
Comments