شرح استخدام ويدجت AnimatedBuilder في فلاتر

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 لتحريك وتغيير العناصر بطريقة متقنة. ومن خلال تحديد الخصائص الصحيحة، يمكن تحريك العناصر في الواجهة بسلاسة وبدون بطء.