Flutter هو إطار عمل تطوير تطبيقات متعدد المنصات مفتوح المصدر يتميز بأدوات قوية لتصميم وإنشاء واجهات المستخدم المتحركة. يمكن استخدام AnimatedBuilder
لتحريك وتغيير واجهات المستخدم في Flutter بسهولة وفعالية. في هذا الدليل، سنتعرف على AnimatedBuilder
وجميع خصائصه وكيفية استخدامها بالتفصيل.
ما هو AnimatedBuilder؟
عند تحريك عنصر واجهة المستخدم في Flutter ، يتم إعادة بناء الواجهة بشكل متكرر عند كل تغيير في الحالة أو الخصائص. ولكن هذا يتسبب في استهلاك كبير لموارد النظام ويتسبب في بطء في أداء التطبيق. تقدم Flutter AnimatedBuilder
كحل لهذه المشكلة، فهو يسمح بتحريك وتغيير العناصر بشكل فعال وسلس ودون إعادة بناء الواجهة بشكل كامل.
AnimatedBuilder
هو عبارة عن عنصر واجهة المستخدم في Flutter يتيح لنا تحريك وتغيير العناصر بشكل فعال. يتم استخدام AnimatedBuilder
عادةً مع AnimationController
و Tween
لإنشاء تحركات سلسة وجميلة. يسمح AnimatedBuilder
بتحديد العنصر الذي يتم تحريكه وتغييره، وعنصر البناء الذي يتم إعادة بناؤه في كل إطار ، وكذلك الوظائف التي يتم تشغيلها عند تغيير القيمة المتغيرة.
“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“
خصائص AnimatedBuilder
لإنشاء AnimatedBuilder
، يجب تمرير Animation
و builder
إلى الكائن. هناك بعض الخصائص الأساسية التي يجب تحديدها عند استخدام AnimatedBuilder
:
animation
هذه هي القيمة التي يتم تحريكها وتغييرها باستخدام Tween
و Animation
و AnimationController
.
AnimationController _controller = AnimationController( duration: const Duration(seconds: 2), vsync: this, ); Animation<double> _animation = Tween<double>( begin: 0, end: 1, ).animate(_controller);
builder
هذا هو الكائن الذي يتم إعادة بناؤه في كل إطار والذي يتم تحريكه وتغييره. يجب تحديد builder
كدالة تستقبل BuildContext
و Widget
محدد لتقديم العنصر الذي يتم تحريكه وتغييره.
AnimatedBuilder( animation: _animation, builder: (BuildContext context, Widget? child) { return Transform.scale( scale: _animation.value, child: child, ); }, child: Container( width: 100, height: 100, color: Colors.blue, child: Center( child: Text('AnimatedBuilder'), ), ), ),
“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“
child
يمكن استخدامهذا الخيار لإضافة عنصر ثابت في العنصر الذي يتم تحريكه وتغييره، والذي يتم إعادة بناؤه في كل إطار.
AnimatedBuilder( animation: _animation, builder: (BuildContext context, Widget? child) { return Transform.scale( scale: _animation.value, child: child, ); }, child: Container( width: 100, height: 100, color: Colors.blue, child: Center( child: Text('AnimatedBuilder'), ), ), ),
“اقرأ أيضاً: شرح استخدام ويدجت TextField في فلاتر“
تساعد AnimatedBuilder
على إنشاء تحركات سلسة وجميلة في واجهات المستخدم في Flutter بطريقة فعالة وسلسة دون إعادة بناء الواجهة بشكل كامل. يمكن استخدام AnimatedBuilder
مع AnimationController
و Tween
لتحريك وتغيير العناصر بطريقة متقنة. ومن خلال تحديد الخصائص الصحيحة، يمكن تحريك العناصر في الواجهة بسلاسة وبدون بطء.