استخدام التاثيرات في فلاتر خلال عمليات الانتقال بين الصفحات

استخدام التاثيرات في فلاتر خلال عمليات الانتقال بين الصفحات | Transactions Flutter

في هذا المقال سوف نقدم لكم اكثر من طريقة لعمل الانميشن في فلاتر والتعامل مع انتقالات الصفحات وكيف تقوم بتصميم الانتقال الذي ترغب به في فلاتر وفي هذا القسم بالتحديد نهتم بالانميشن لحتسين شكل التطبيق الخاص بك وجعله اكثر احترافيه لان العنصر الذي يميز كل تطبيق عن الاخر هو اختيار الالوان الصحيح والتصميم والانميشن فهذه العناصر هي من اساسيات نجاح اي تطبيق .

تعرف على كيفية إنشاء تطبيقات لنظامي التشغيل Android و iOS باستخدام Flutter ، إطار عمل برمجة الأجهزة المحمولة متعدد الأنظمة الأساسية الرائد من Google. يوضح لك احمد محمود من جي كودرس كيفية النهوض والركض مع Flutter بسرعة وفعالية في هذه الدورة.

الانتقال مع عمل انميشن

يتم استخدام هذا الكود لعمليات الانتقال من صفحة الى الاخر ولكن في SliderIntent سوف يكون الانميشن وهذا ما سوف نراه في الخطوات التاليه .

GG.dart

Navigator.of(context).push(SliderIntent(widget: const GeeCoders()));

عمل تاثير الصعود للاعلى و للاسفل في Flutter

في تطبيق سناب شات نلاحظ هذا التصميم بشكل كبير وهو الانتقال من الاسفل الى الاعلى ولتنفيذ هذا الكود عليك باستخدام الكود التالي , قم بعمل تصميم جديد ووضع الكود التالي بداخله واستدعاءه كما هو موضح بالخطوة السابقه .

SliderAnimation.dart

// class SliderIntent
import 'package:flutter/cupertino.dart';

class SliderIntent extends PageRouteBuilder {
  final widget;
  SliderIntent({this.widget}) : super(
    pageBuilder: (context, animation, secondaryAnimation)=> widget,
    transitionsBuilder: (context, animation, secondaryAnimation , child) {
      // [ -1 | 1 | 1  ]
      // [ -1 | 0 | 1  ]
      // [ -1 | -1 | 1 ]

      /// from 0 to 1 ( up animation )
      var begin = const Offset(0.0,1);
      // show all screen (0,0) -> show 20% from screen ( 0 , 0.8 )
      var end = const Offset(0,0);
      var tween = Tween(begin: begin , end: end);
      var offsetAnimation = animation.drive(tween);
      return SlideTransition(position: offsetAnimation , child: child,);
    }
  );

}

كيفية الانتقال الى صفحة اخرى في فلاتر مع التكبير

التاثير الثاني هو عباره عن اندفاع الصفحة بشكل مباشر كما نلاحظ ان الصفحة تكون بالحجم الصغير ثم تكبر .

scale.dart

class SliderIntent extends PageRouteBuilder {
  final widget;
  SliderIntent({this.widget}) : super(
    pageBuilder: (context, animation, secondaryAnimation)=> widget,
    transitionsBuilder: (context, animation, secondaryAnimation , child) {
      var begin = 0.0;
      var end = 1.0;
      var tween = Tween(begin: begin , end: end);
      var curvesAnimation = CurvedAnimation(parent: animation, curve: Curves.easeInBack);
      return ScaleTransition(scale: tween.animate(curvesAnimation) , child: child,);
    }
  );

الانتقال الى صفحة جديده داخل flutter مع امكانية تدوير الصفحة

في هذا الكود يتم الانتقال مع عملية تدوير للصفحة خلال عملية الانتقال .

RotationTransition.dart

class SliderIntent extends PageRouteBuilder {
  final widget;
  SliderIntent({this.widget}) : super(
    pageBuilder: (context, animation, secondaryAnimation)=> widget,
    transitionsBuilder: (context, animation, secondaryAnimation , child) {
      var begin = 0.0;
      var end = 1.0;
      var tween = Tween(begin: begin , end: end);
      var curvesAnimation = CurvedAnimation(parent: animation, curve: Curves.linear);
      return RotationTransition(turns: tween.animate(curvesAnimation) , child: child,);
    }
  );

الانتقال الى الصفحة عن طريق ملئ الشاشه بالتدريج في flutter

في هذا الجزء نلاحظ ان التصميم يتم عن طريق تمديد الصفحه وفتحها بشكل متناسق وهذا يتم من خلال الكود التالي .

Align.dart

class SliderIntent extends PageRouteBuilder {
  final widget;
  SliderIntent({this.widget}) : super(
    pageBuilder: (context, animation, secondaryAnimation)=> widget,
    transitionsBuilder: (context, animation, secondaryAnimation , child) {
      return Align(child: SizeTransition(sizeFactor: animation,child: child,),);
    }
  );

}

كيفية الانتقال الى صفحة اخرى مع امكانية ملئ الشاشه من الاعلى الى الاسفل

في هذا التصميم نلاحظ ان الصفحه يتم ملئها من الاعلى الى الاسفل كما هو موضح بالصور وهو قريب للتصميم الاول ولكن بشكل عكسي .

alignment.dart

class SliderIntent extends PageRouteBuilder {
  final widget;
  SliderIntent({this.widget}) : super(
    pageBuilder: (context, animation, secondaryAnimation)=> widget,
    transitionsBuilder: (context, animation, secondaryAnimation , child) {
      return Align(alignment: Alignment.topCenter , child: SizeTransition(sizeFactor: animation,child: child,),);
    }
  );

}

كيفية الانتقال الى صفحة اخرى مع امكانية ملئ الشاشه

هذا التصميم قريب جدا للتصميم الذي قمنا بتنفيذه في احدى الصفحات السابقه وهذا سوف يتم من خلال اندفاع الصفحة بشكل مختلف قليلا ولكنه افضل .

scale_with_bouncing.dart


class SliderIntent extends PageRouteBuilder {
  final Widget widget;

  SliderIntent({required this.widget}) : super(
      transitionDuration: const Duration(milliseconds: 700),
      transitionsBuilder:
    (BuildContext context, Animation<double> animation,
     Animation<double> secAnimation, Widget child) {
      
        animation = CurvedAnimation(parent: animation, curve: Curves.elasticInOut);
        return ScaleTransition(scale: animation , child: child, alignment: Alignment.center);
      
    },
    pageBuilder: (BuildContext context, Animation<double> animation,Animation<double> secAnimation) {
      return widget;
  }
  );

}

كيفية الانتقال الى صفحة جديده في flutter مع انميشن ملئ الشاشه بالبطيئ

في هذا التصميم يتم ملئ الشاشه بالشكل البطيئ ولكن مع عمل ضبابيه باللون الاسود لكي تعطي منظر مختلف في عملية الانتقال .

TweenAnimationBuilder.dart

اضف الكود التالي في الصفحة التي تريد الانتقال لها

class GeeCoders extends StatelessWidget {
  GeeCoders({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        backgroundColor: Colors.red,
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return TweenAnimationBuilder(
              tween: Tween(begin: 0.0, end: 1.0),
              duration: const Duration(milliseconds: 1500),
              builder: (context, dynamic value, child) {
                return ShaderMask(
                    shaderCallback: (rect) {
                      return RadialGradient(
                              radius: value * 5,
                              colors: const [
                                Colors.white,
                                Colors.white,
                                Colors.transparent,
                                Colors.transparent
                              ],
                              stops: const [0.0, 0.55, 0.6, 1.0],
                              center: const FractionalOffset(0.95, 0.95))
                          .createShader(rect);
                    },
                    child: buildScreen());
              });
        },
      ),
   );
  }
  }

Widget buildScreen() {
  return Container(
    color: Colors.red,
    child: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          Text('Welcome to New Screen',
              style: TextStyle(color: Colors.white, fontSize: 18)),
        ],
      ),
    ),
  );
}

الان عند عملية الانتقال الى الصفحة GeeCoders وهيا الصفحة السابقة استخدم الكود التالي في عملية النقر

استخدام الكود التالي ايضا عندما تريد الانتقال من صفحة للاخرى في اخر مثال والمثال قبل الاخير او يمكنك ضبط الكود لكي يعمل مع الكود الموجود في اعلى المقاله .

Navigator.of(context).push(PageRouteBuilder(
        pageBuilder: (context, animation, _) {
        return GeeCoders();
          },
        opaque: false));

رابط الكود

تعديل المقال

GeeCoders - جي كودرس

استخدام التاثيرات في فلاتر خلال عمليات الانتقال بين الصفحات | Transactions Flutter