إنشاء صفحة انتظار الى الانتهاء من تحميل الصفحه في فلاتر

إنشاء صفحة انتظار الى الانتهاء من تحميل الصفحه في فلاتر

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

عادة ، من وجهة نظر المطور ، تتناقض أطر العمل والمكتبات عبر الأنظمة الأساسية مع بعضها البعض. على الرغم من أن هذا مفيد من الناحية الفنية عند الاختيار بين Flutter و React Native ، على سبيل المثال ، إلا أنه لا يمثل نظرة عامة شاملة على قدرات Flutter.

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

يمتلك المطور كل ما يحتاجه لبدء إنشاء التطبيقات إذا كان لديه معرفة سابقة بـ Flutter ، وقام للتو بتنزيل SDK ، ويستخدم محرر كود مناسب. حاليًا ، يمكن لـ Flutter إنشاء تطبيقات لأنظمة iOS و Windows و Linux و macOS.

إنشاء صفحة لعرض تصميم الانتظار والصفحة التي تظهر بعد الانتظار

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

ui.dart

import 'package:flutter/material.dart';

const mainDataBackupColor = Color(0xff5113aa);
const secondaryDataBackupColor = Color(0xffbc53fa);
const backgroundColor = Color(0xfffce7fe);

class FullPage extends StatefulWidget {
  const FullPage({Key? key}) : super(key: key);

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _progressAnimation;
  late Animation<double> _cloudDataAnimation;
  late Animation<double> _endingAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        vsync: this,
        duration: const Duration(
          seconds: 7,
        ));
    _progressAnimation = CurvedAnimation(
        parent: _animationController, curve: const Interval(0.0, 0.65));
    _cloudDataAnimation = CurvedAnimation(
        parent: _animationController, curve: const Interval(0.7, 0.85));
    _endingAnimation = CurvedAnimation(
        parent: _animationController, curve: const Interval(0.8, 1.0));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      body: Stack(
        children: [
          DataBackupInitialPage(
            progressAnimation: _progressAnimation,
            onAnimationStarted: () {
              _animationController.forward();
            },
          ),
          DataBackupCloudPage(
            progressAnimation: _progressAnimation,
            cloudDataAnimation: _cloudDataAnimation,
          ),
          DataBackupCompletedPage(
            endingAnimation : _endingAnimation,
          )
        ],
      ),
    );
  }
}

صفحة الانتظار الى ان يتم تحميل الصفحه

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

loading.dart

import 'package:flutter/material.dart';

const mainDataBackupColor = Color(0xff5113aa);
const secondaryDataBackupColor = Color(0xffbc53fa);
const backgroundColor = Color(0xfffce7fe);

enum DataBackupInitialPageState {
  initial,
  start,
  end,
}

const _duration = Duration(milliseconds: 500);

class DataBackupInitialPage extends StatefulWidget {
  const DataBackupInitialPage({Key? key,
    required this.onAnimationStarted,
  required this.progressAnimation
  }) : super(key: key);
  final VoidCallback onAnimationStarted;
  final Animation<double> progressAnimation;

  @override
  State<DataBackupInitialPage> createState() => _DataBackupInitialPageState();
}

class _DataBackupInitialPageState extends State<DataBackupInitialPage> {

  DataBackupInitialPageState _currentState = DataBackupInitialPageState.initial;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Padding(
        padding: const EdgeInsets.all(25.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Expanded(
                flex: 3,
                child: Text('Cloud storage',style: TextStyle(fontWeight: FontWeight.bold,fontSize: 22),)),
            if (_currentState == DataBackupInitialPageState.end)
              Expanded(
                  flex: 2,
                  child: TweenAnimationBuilder(
                      tween: Tween(begin: 1.0, end: 1.0),
                      duration: _duration,
                     builder: (context, dynamic value, child) {
                       return Opacity(
                         opacity: value,
                         child: child,
                       );
                     },
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        Text('upload text',style: TextStyle(
                          fontSize: 17.0,
                          color: Colors.black,
                          fontWeight: FontWeight.w300,
                        ),
                          textAlign: TextAlign.center,),
                        SizedBox(height: 10,),
                        Expanded(child: FittedBox(
                          child: Padding(
                            padding: const EdgeInsets.only(bottom: 10.0),
                            child: ProgressContainer(widget.progressAnimation),
                          ),
                        ))
                      ],
                    ),
                  ),
              ),

            if (_currentState != DataBackupInitialPageState.end)
              const SizedBox(height: 10),
            if (_currentState != DataBackupInitialPageState.end)
            Expanded(
              flex: 2,
              child: TweenAnimationBuilder(
              tween: Tween(begin: 1.0, end: _currentState != DataBackupInitialPageState.initial ? 0.0 : 1.0),
              duration: _duration,
              onEnd: (){
                setState(() {
                  _currentState = DataBackupInitialPageState.end;
                });
              },
              builder: (context, dynamic value, child) {
                return Opacity(
                    opacity: value,
                    child: Transform.translate(
                      // hide design 50 is hide up -50 is hide down.
                    offset: Offset(0, 50 * double.parse(value.toString())),
                    child: child));
              },
              child: Column(
                children: [
                   Text('last backup'),
                   SizedBox(height: 10,),
                   Text('28 may 2022',style: TextStyle(fontWeight: FontWeight.w600,fontSize: 22),),
                ],
              ),
            ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20.0),
              child: AnimatedSwitcher(
                duration: _duration,
                child: _currentState == DataBackupInitialPageState.initial ? SizedBox(
                  width: MediaQuery.of(context).size.width,
                  child: RaisedButton(
                    color: mainDataBackupColor,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    onPressed: (){
                      setState(() {
                        _currentState = DataBackupInitialPageState.start;
                      });
                      widget.onAnimationStarted();
                    },
                    child: const Padding(
                      padding: EdgeInsets.all(20.0),
                      child: const Text('Create Backup',style: TextStyle(
                        color: Colors.white,
                      ),
                      ),
                    ),
                  ),
                ) : OutlinedButton(onPressed: (){},
                    child: const Padding(
                      padding: EdgeInsets.symmetric(vertical: 20,horizontal: 40),
                      child: Text('Cancel',style: TextStyle(
                  color: mainDataBackupColor
                ),),
                    )),
              ),
            ),
            const SizedBox(height: 20,),

          ],
        ),
      ),
    );
  }
}

class ProgressContainer extends AnimatedWidget {
  const ProgressContainer(Animation<double> animation) : super(listenable:animation);
  double get value => (listenable as Animation).value;
  @override
  Widget build(BuildContext context) {
    return Text(
      // 0 to 100% text.
      '${(value * 100).truncate().toString()}%',
      // value.truncate().toString(),
    );
  }
}

إنشاء صفحة عرض البيانات بعد الانتهاء من التحميل في فلاتر

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

Complete.dart

import 'package:flutter/material.dart';
import 'data_backup_initial_page.dart';


class DataBackupCompletedPage extends AnimatedWidget {
  DataBackupCompletedPage({Animation<double>? endingAnimation})
      : super(listenable: endingAnimation!);

  Animation get animation => (listenable as Animation);

  @override
  Widget build(BuildContext context) {
    return animation.value > 0
        ? Positioned.fill(
        child: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                    child: Align(
                      alignment: Alignment.bottomCenter,
                      child: Container(
                        height: 100,
                        width: 100,
                      ),
                    )),
                Expanded(
                  child: TweenAnimationBuilder(
                    tween: Tween(begin: 0.0, end: 1.0),
                    duration: const Duration(microseconds: 400),
                    builder: (context, dynamic value, child) {
                      return Opacity(
                          opacity: value,
                          child: Transform.translate(
                              offset: Offset(0, 50 * (1 - double.parse(
                                  value.toString()))),
                              child: child
                          )
                      );
                    },
                    child: buildColumn(),
                  ),
                ),
                OutlinedButton(
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                    child: const Padding(
                      padding:
                      EdgeInsets.symmetric(vertical: 20, horizontal: 40),
                      child: Text(
                        'Ok',
                        style: TextStyle(color: mainDataBackupColor),
                      ),
                    )),
                const SizedBox(
                  height: 70,
                ),
              ],
            )))
        : const SizedBox.shrink();
  }

  Column buildColumn() {
    return Column(
      children: const [
        SizedBox(
          height: 70,
        ),
        Text(
          'data has successfully uploaded',
          style: TextStyle(
            fontSize: 32,
          ),
          textAlign: TextAlign.center,
        ),

      ],
    );
  }

}

android sdk manager تحميل flutter developers applications create app android android studio mac