عمل على الbutton في flutter للانتقال من صفحة الى الاخرى

عمل على الbutton في flutter للانتقال من صفحة الى الاخرى

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

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

تعد سهولة الوصول إلى الأجهزة المحمولة إحدى المزايا العديدة لتطوير تطبيقات الويب ، ولكنها أيضًا واحدة من أهمها. يحتاج موقع الويب الخاص بك إلى العمل بشكل صحيح عبر جميع الأنظمة الأساسية لأن غالبية المستخدمين يمتلكون الآن الهواتف الذكية والأجهزة اللوحية. يمكن لجميع الأجهزة ، بما في ذلك الهواتف المحمولة والأجهزة اللوحية ، استخدام تطبيقات الويب. ضع في اعتبارك استخدام تطوير تطبيقات الويب لتسهيل الوصول إلى موقعك على أي جهاز.

How to add animation between pages

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

ui.dart

class BookingPage extends StatefulWidget {
const BookingPage({
Key? key,
required this.movie,
}) : super(key: key);

final Movie movie;

@override
State<BookingPage> createState() => _BookingPageState();
}

class _BookingPageState extends State<BookingPage>
    with TickerProviderStateMixin {
  late final BookingPageAnimationController _controller;

  bool isShow = false;

  void changeDesign() {
    Future.delayed(const Duration(milliseconds: 300), () {
      setState(() {
        isShow = true;
      });
    });
  }

  @override
  void initState() {
    _controller = BookingPageAnimationController(
      buttonController: AnimationController(
        duration: const Duration(milliseconds: 500),
        vsync: this,
      ),
      contentController: AnimationController(
        duration: const Duration(milliseconds: 500),
        vsync: this,
      ),
    );
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await _controller.buttonController.forward();
      await _controller.buttonController.reverse();
      await _controller.contentController.forward();
    });

    changeDesign();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      final w = constraints.maxWidth;
      final h = constraints.maxHeight;

      return Scaffold(
        extendBodyBehindAppBar: true,
        body: Stack(
          alignment: Alignment.bottomCenter,
          children: [
            isShow ? Padding(
              padding: const EdgeInsets.all(8.0),
              child: ListView.separated(
                separatorBuilder: (_,i)=> SizedBox(height: 10
                  ,),
                shrinkWrap: true,
                itemBuilder: (_,i)=> Container(
                  color: Colors.blueAccent.withOpacity(0.2),
                  height: 100,
                  width: 100,
                ),
                itemCount: 15,
              ),
            ) : Container(width: w,height: h,color: Colors.white,),
            Positioned(
              bottom: 0,
              child: GestureDetector(
                onTap: () {
                  const transitionDuration = Duration(milliseconds: 400);
                  Navigator.of(context).push(
                    PageRouteBuilder(
                      transitionDuration: transitionDuration,
                      reverseTransitionDuration: transitionDuration,
                      pageBuilder: (_, animation, ___) {
                        return FadeTransition(
                          opacity: animation,
                          child: GeeCoders(),
                        );
                      },
                    ),
                  );
                },
                child: AnimatedBuilder(
                  animation: _controller.buttonController,
                  builder: (_, child) {
                    final size = _controller
                        .buttonSizeAnimation(
                      Size(w * .7, h * .06),
                      Size(w * 1.2, h * 1.1),
                    )
                        .value;
                    final margin =
                        _controller.buttonMarginAnimation(h * .03).value;
                    return Container(
                      width: size.width,
                      height: size.height,
                      margin: EdgeInsets.only(bottom: margin),
                      decoration: const BoxDecoration(
                        color: primaryColor,
                        borderRadius: BorderRadius.all(Radius.circular(20)),
                      ),
                    );
                  },
                ),
              ),
            ),
            Positioned(
              bottom: h * .05,
              child: const IgnorePointer(
                child: Text(
                  'Buy Ticket',
                  style: AppTextStyles.bookButtonTextStyle,
                ),
              ),
            ),
          ],
        ),
      );
    });
  }

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

flutter.dart

  late Animation<double> _animation;
  late AnimationController _container;

  @override
  void initState() {
    _container = AnimationController(vsync: this,duration: const Duration(
      milliseconds: 2000,
    ));
    _animation = Tween<double>(begin: 1,end: 20).animate(_container);
    super.initState();
  }

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

  void handel() {
    _container.animateTo(1,curve: Curves.easeIn).then((value) => context.push(page: FileCacheLoadingIndicator(model: widget.movie))
    );
  }

// ------------


AnimatedBuilder(
                          animation: _container,
                          builder: (context, child) => Transform.scale(
                            scale: _animation.value,
                            child: myElevatedButton(
                              onPressed: () {
                                handel();
                                // context.push(page: FileCacheLoadingIndicator(model: widget.movie));
                              },
                              style: Theme.of(context).textTheme.displaySmall!.copyWith(
                                color: Theme.of(context)
                                    .colorScheme
                                    .onInverseSurface,
                              ),
                              text: appTranslation(context).read_book,
                            ),
                          ),
                        ),