مبحث انیمیش در فلاتر ، از جذاب ترین مباحث کار می باشد . شما به راحتی می توانید افکت های حرکتی مختلفی را به ویجت های موجود در UI بدهید . در زیر نمونه ای کوچک از پیاده سازی یک انیمیشن قرار دارد . در این مثال سعی شده روش کار با چهار جزء سازنده یک انیمیشن شامل : Animation , AnimationController , Tween , AnimatedBuilder به نمایش گذاشته شود .
کد پیاده سازی این انیمیشن به شکل زیر است :
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
AnimationController controller; // تعریف یک انیمیشن کنترلر
Animation<double> animation; // تعریف یک انیمیشن
@override
void initState() {
// TODO: implement initState
super.initState();
// مقداردهی به کنترلر
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 2000));
// مقداردهی به انیمیشن
animation = Tween(begin: 0.0, end: 300.0)
.animate(CurvedAnimation(parent: controller, curve: Curves.bounceOut));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('انیمیشن در فلاتر'),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// استفاده از انیمیش بیلدر جهت ساخت انیمیشن
AnimatedBuilder(
animation: controller, // ارسال کنترلر به انیمیشن بیلدر
builder: (BuildContext context, Widget child) {
return Container(
width: animation.value,
height: animation.value,
child: Image.network('https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png')
);
},
),
RaisedButton(
onPressed: () {
if (controller.isDismissed) // اگر انیمشن شروع نشده بود
controller.forward(); // اجرای انیمیشن
else if (controller.isCompleted) // اگر انیمیشن اتمام یافته بود
controller.reverse(); // اجرای معکوس انیمیشن
},
child: Text('شروع انیمیشن'),
)
],
),
),
);
}
}
- import 'package:flutter/material.dart';
- void main() {
- runApp(MaterialApp(
- debugShowCheckedModeBanner: false,
- home: MyApp(),
- ));
- }
- class MyApp extends StatefulWidget {
- @override
- _MyAppState createState() => _MyAppState();
- }
- class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
- AnimationController controller; // تعریف یک انیمیشن کنترلر
- Animation<double> animation; // تعریف یک انیمیشن
- @override
- void initState() {
- // TODO: implement initState
- super.initState();
- // مقداردهی به کنترلر
- controller = AnimationController(
- vsync: this, duration: Duration(milliseconds: 2000));
- // مقداردهی به انیمیشن
- animation = Tween(begin: 0.0, end: 300.0)
- .animate(CurvedAnimation(parent: controller, curve: Curves.bounceOut));
-
- }
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(
- title: Text('انیمیشن در فلاتر'),
- centerTitle: true,
- ),
- body: Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: <Widget>[
- // استفاده از انیمیش بیلدر جهت ساخت انیمیشن
- AnimatedBuilder(
- animation: controller, // ارسال کنترلر به انیمیشن بیلدر
- builder: (BuildContext context, Widget child) {
- return Container(
- width: animation.value,
- height: animation.value,
- child: Image.network('https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png')
- );
- },
- ),
- RaisedButton(
- onPressed: () {
- if (controller.isDismissed) // اگر انیمشن شروع نشده بود
- controller.forward(); // اجرای انیمیشن
- else if (controller.isCompleted) // اگر انیمیشن اتمام یافته بود
- controller.reverse(); // اجرای معکوس انیمیشن
- },
- child: Text('شروع انیمیشن'),
- )
- ],
- ),
- ),
- );
- }
- }
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
home: MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
AnimationController controller; // تعریف یک انیمیشن کنترلر
Animation<double> animation; // تعریف یک انیمیشن
@override
void initState() {
// TODO: implement initState
super.initState();
// مقداردهی به کنترلر
controller = AnimationController(
vsync: this, duration: Duration(milliseconds: 2000));
// مقداردهی به انیمیشن
animation = Tween(begin: 0.0, end: 300.0)
.animate(CurvedAnimation(parent: controller, curve: Curves.bounceOut));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('انیمیشن در فلاتر'),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// استفاده از انیمیش بیلدر جهت ساخت انیمیشن
AnimatedBuilder(
animation: controller, // ارسال کنترلر به انیمیشن بیلدر
builder: (BuildContext context, Widget child) {
return Container(
width: animation.value,
height: animation.value,
child: Image.network('https://javareshkian.ir/wp-content/uploads/2020/03/javareshkian4.png')
);
},
),
RaisedButton(
onPressed: () {
if (controller.isDismissed) // اگر انیمشن شروع نشده بود
controller.forward(); // اجرای انیمیشن
else if (controller.isCompleted) // اگر انیمیشن اتمام یافته بود
controller.reverse(); // اجرای معکوس انیمیشن
},
child: Text('شروع انیمیشن'),
)
],
),
),
);
}
}
خروجی کد بالا به شکل زیر است :

جهت کسب اطلاعات بیشتر از این آدرس به سایت اصلی فلاتر مراجعه نمایید .
امیدوارم این مطلب برای شما مفید باشد .