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

يعد FadeTransition أحد عناصر واجهة المستخدم في Flutter الذي يسمح لنا بتحريك وتغيير الشفافية للعناصر في التطبيق. بشكل عام، يتم استخدام هذا العنصر لإنشاء تأثيرات انتقالية سلسة وأنيقة بين عناصر مختلفة في التطبيق.

تتيح لنا FadeTransition إمكانية التحكم في شفافية العنصر، وتحديد الوقت الذي يستغرقه التأثير، وتحديد القيم الأولية والنهائية للعنصر. في هذه المقالة، سنقوم بشرح FadeTransition بالتفصيل، وسنتناول جميع خصائصه بالتفصيل مع الأمثلة المناسبة.

خصائص FadeTransition

opacity

يتم استخدام هذه الخاصية لتحديد شفافية العنصر. يمكن تحديد القيمة بين 0.0 (العنصر غير مرئي) و 1.0 (العنصر مرئي بشكل كامل).

FadeTransition(
  opacity: _animation,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
),

“اقرأ أيضاً: شرح استخدام ويدجت Tooltip في فلاتر“

alwaysIncludeSemantics

يتم استخدام هذه الخاصية لتحديد ما إذا كان العنصر يجب أن يشمل بيانات الدلالة (semantics) دائمًا أم لا. إذا تم تعيين هذه الخاصية إلى true ، فسيتم تضمين بيانات الدلالة في جميع الأوقات.

FadeTransition(
  opacity: _animation,
  alwaysIncludeSemantics: true,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
),

“اقرأ أيضاً: شرح استخدام ويدجت SafeArea في فلاتر“

استخدام FadeTransition

لإنشاء FadeTransition ، نحتاج إلى تحديد العنصر الذي نريد تطبيق التأثير عليه باستخدام خاصية child ، ثم نحتاج إلى تحديد opacity باستخدام إما Animation أو AnimationController.

لتطبيق التأثير، يمكن استخدام AnimatedBuilder لإنشاء العنصر وتطبيق التأثير عليه. يتم إنشاء AnimationController أولاً، ثم إنشاء Tween لتحديد قيم الشفافية الأولية والنهائية. يتم إنشاء Animation باستخدام Tween.animate و AnimationController ، ثم يتم تطبيق FadeTransition باستخدام Animation و child.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FadeTransition Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyFadeTransition(),
    );
  }
}

class MyFadeTransition extends StatefulWidget {
  @override
  _MyFadeTransitionState createState() => _MyFadeTransitionState();
}

class _MyFadeTransitionState extends State<MyFadeTransition>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );

    _animation =
        Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget? child) {
        return FadeTransition(
          opacity: _animation,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

“اقرأ أيضاً: شرح استخدام ويدجت TextField في فلاتر“

إن FadeTransition هو عنصر واجهة المستخدم في Flutter الذي يتيح لنا إنشاء تأثيرات انتقالية سلسة وأنيقة بين العناصر في التطبيق. يتم استخدام opacity لتحديد شفافية العنصر، و curve لتحديد الانحناء الزمني للتأثير، و duration لتحديد المدة الزمنية للتأثير. يمكن استخدام AnimatedBuilder لإنشاء العنصر وتطبيق التأثير عليه باستخدام Animation و child. باستخدام هذه الخصائص بشكل صحيح، يمكننا إنشاء تأثيرات رائعة وانتقالية سلسة في تطبيقاتنا.