flutter_animation

animation لعمل swipe لل widget في Flutter مع تاثير Flip Page

Ahmed Mahmoud

اخر تحديث :

animation لعمل swipe لل widget في Flutter مع تاثير Flip Page

animation لعمل swipe لل widget في Flutter مع تاثير Flip Page

لإنشاء animation لعمل swipe لل widget في Flutter مع تأثير Flip Page، يمكنك استخدام الخطوات التالية:

إنشاء عنصر GestureDetector لتحديد العنصر الذي تريد تحريكه.

إضافة استماع إلى حدث onHorizontalDragEnd للعنصر.

في استماع حدث onHorizontalDragEnd، قم بإنشاء عنصر AnimationController لتحديد مدة الanimation.

قم بتشغيل الanimation بقيمة زاوية الدوران المطلوبة.

عند انتهاء الanimation، قم بتغيير موضع العنصر.

هذا بالنسبة للفكرة بشكل عام ولكن اذا كنت ترغب بتنفيذ الانميشن كالذي يظهر في الصورة الخاصه بالمقال فيمكنك استخدام الكود التالي والموجود على github وسوف يساعدك على تنفيذ الانميشن بشكل جميل

Code 👇

رابط المشروع

تعديل المقال

الأقسام flutter_animation

بواسطة : Ahmed Mahmoud

developer apple github actions programming challenges

مقالات قد تهمك

تعليقات

إرسال تعليق

window['__wavt'] = 'AOuZoY5g3qvf3-2m85Ykcg22AuTO9h6O3A:1736309309099';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3573444566851368689','//www.geecoders.com/2024/12/flip-page.html','3573444566851368689'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '3573444566851368689', 'title': 'GeeCoders - \u062c\u064a \u0643\u0648\u062f\u0631\u0633', 'url': 'https://www.geecoders.com/2024/12/flip-page.html', 'canonicalUrl': 'https://www.geecoders.com/2024/12/flip-page.html', 'homepageUrl': 'https://www.geecoders.com/', 'searchUrl': 'https://www.geecoders.com/search', 'canonicalHomepageUrl': 'https://www.geecoders.com/', 'blogspotFaviconUrl': 'https://www.geecoders.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-162006730-2', 'encoding': 'UTF-8', 'locale': 'ar', 'localeUnderscoreDelimited': 'ar', 'languageDirection': 'rtl', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22GeeCoders - \u062c\u064a \u0643\u0648\u062f\u0631\u0633 - Atom\x22 href\x3d\x22https://www.geecoders.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22GeeCoders - \u062c\u064a \u0643\u0648\u062f\u0631\u0633 - RSS\x22 href\x3d\x22https://www.geecoders.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22GeeCoders - \u062c\u064a \u0643\u0648\u062f\u0631\u0633 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/3573444566851368689/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22GeeCoders - \u062c\u064a \u0643\u0648\u062f\u0631\u0633 - Atom\x22 href\x3d\x22https://www.geecoders.com/feeds/3574606912629260108/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-5850779916175080', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/de135cd2ba671567', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': '\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637', 'key': 'link', 'shareMessage': '\u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0631\u0627\u0628\u0637', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 Facebook', 'target': 'facebook'}, {'name': '\u0643\u062a\u0627\u0628\u0629 \u0645\u062f\u0648\u0646\u0629 \u062d\u0648\u0644 \u0647\u0630\u0647 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629', 'key': 'blogThis', 'shareMessage': '\u0643\u062a\u0627\u0628\u0629 \u0645\u062f\u0648\u0646\u0629 \u062d\u0648\u0644 \u0647\u0630\u0647 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': '\u0645\u0634\u0627\u0631\u0643\u0629 \u0625\u0644\u0649 Pinterest', 'target': 'pinterest'}, {'name': '\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a', 'key': 'email', 'shareMessage': '\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27ar\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': '\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u0632\u064a\u062f', 'pageType': 'item', 'postId': '3574606912629260108', 'postImageThumbnailUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohf31EENpfZvFM3kbuuUENauSRAcEsg0iEJK_V7dZVP88_-omjdnMhCsZj6fwqQxSJge4wIiSWwhhQiox7LbXoZzVWUkeFseODUiFmfLVpCSQA0Ue7QlULc9jDrbBTSXRclGOIeNsw95fuMt3tgdKY0u1eDLzDsjJYiF67nt7g05nrY7cdtzX6s5JTxUv/s72-w640-c-h360/design.gif', 'postImageUrl': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohf31EENpfZvFM3kbuuUENauSRAcEsg0iEJK_V7dZVP88_-omjdnMhCsZj6fwqQxSJge4wIiSWwhhQiox7LbXoZzVWUkeFseODUiFmfLVpCSQA0Ue7QlULc9jDrbBTSXRclGOIeNsw95fuMt3tgdKY0u1eDLzDsjJYiF67nt7g05nrY7cdtzX6s5JTxUv/w640-h360/design.gif', 'pageName': 'animation \u0644\u0639\u0645\u0644 swipe \u0644\u0644 widget \u0641\u064a Flutter \u0645\u0639 \u062a\u0627\u062b\u064a\u0631 Flip Page', 'pageTitle': 'GeeCoders - \u062c\u064a \u0643\u0648\u062f\u0631\u0633: animation \u0644\u0639\u0645\u0644 swipe \u0644\u0644 widget \u0641\u064a Flutter \u0645\u0639 \u062a\u0627\u062b\u064a\u0631 Flip Page', 'metaDescription': '\u0644\u0625\u0646\u0634\u0627\u0621 animation \u0644\u0639\u0645\u0644 swipe \u0644\u0644 widget \u0641\u064a Flutter \u0645\u0639 \u062a\u0623\u062b\u064a\u0631 Flip Page'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': '\u062a\u0639\u062f\u064a\u0644', 'linkCopiedToClipboard': '\u062a\u0645 \u0646\u0633\u062e \u0627\u0644\u0631\u0627\u0628\u0637 \u0625\u0644\u0649 \u0627\u0644\u062d\u0627\u0641\u0638\u0629', 'ok': '\u062d\u0633\u0646\u064b\u0627', 'postLink': '\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0634\u0627\u0631\u0643\u0629'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': '\u0645\u062e\u0635\u0635', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'animation \u0644\u0639\u0645\u0644 swipe \u0644\u0644 widget \u0641\u064a Flutter \u0645\u0639 \u062a\u0627\u062b\u064a\u0631 Flip Page', 'description': '\u0644\u0625\u0646\u0634\u0627\u0621 animation \u0644\u0639\u0645\u0644 swipe \u0644\u0644 widget \u0641\u064a Flutter \u0645\u0639 \u062a\u0623\u062b\u064a\u0631 Flip Page', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohf31EENpfZvFM3kbuuUENauSRAcEsg0iEJK_V7dZVP88_-omjdnMhCsZj6fwqQxSJge4wIiSWwhhQiox7LbXoZzVWUkeFseODUiFmfLVpCSQA0Ue7QlULc9jDrbBTSXRclGOIeNsw95fuMt3tgdKY0u1eDLzDsjJYiF67nt7g05nrY7cdtzX6s5JTxUv/w640-h360/design.gif', 'url': 'https://www.geecoders.com/2024/12/flip-page.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 3574606912629260108}}, {'name': 'widgets', 'data': [{'title': 'GeeCoders - \u062c\u064a \u0643\u0648\u062f\u0631\u0633 (\u0631\u0623\u0633 \u0627\u0644\u0635\u0641\u062d\u0629)', 'type': 'Header', 'sectionId': 'logo', 'id': 'Header1'}, {'title': '\u0627\u0644\u0635\u0641\u062d\u0627\u062a', 'type': 'PageList', 'sectionId': 'pages', 'id': 'PageList1'}, {'title': '\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0625\u062c\u062a\u0645\u0627\u0639\u064a', 'type': 'LinkList', 'sectionId': 'topsocialL', 'id': 'LinkList3'}, {'title': '\u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629', 'type': 'LinkList', 'sectionId': 'menu', 'id': 'LinkList001'}, {'title': '\u0627\u0639\u0644\u0627\u0646 \u0627\u0633\u0641\u0644 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 \u0644\u0644\u062d\u0627\u0633\u0648\u0628', 'type': 'HTML', 'sectionId': 'Topa3lan-sc', 'id': 'HTML100'}, {'title': '\u0627\u0639\u0644\u0627\u0646 \u0627\u0633\u0641\u0644 \u0627\u0644\u0642\u0627\u0626\u0645\u0629 \u0627\u0644\u0639\u0644\u0648\u064a\u0629 \u0644\u0644\u0647\u0627\u062a\u0641', 'type': 'HTML', 'sectionId': 'Topa3lan-sc2', 'id': 'HTML101'}, {'title': '\u0628\u062d\u062b ...', 'type': 'BlogSearch', 'sectionId': 'searchform', 'id': 'BlogSearch2'}, {'title': '\u0645\u064a\u0632\u0629 \u062c\u062f\u0648\u0644 \u0627\u0644\u062a\u0646\u0642\u0644', 'type': 'HTML', 'sectionId': 'AddOns', 'id': 'HTML1'}, {'title': '\u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0627\u062a\u0635\u0627\u0644', 'type': 'ContactForm', 'sectionId': 'AddOns', 'id': 'ContactForm200'}, {'title': '\u0631\u0633\u0627\u0626\u0644 \u0627\u0644\u0645\u062f\u0648\u0646\u0629 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\u0629', 'type': 'Blog', 'sectionId': 'Tempnec', 'id': 'Blog1', 'posts': [{'id': '3574606912629260108', 'title': 'animation \u0644\u0639\u0645\u0644 swipe \u0644\u0644 widget \u0641\u064a Flutter \u0645\u0639 \u062a\u0627\u062b\u064a\u0631 Flip Page', 'featuredImage': 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiohf31EENpfZvFM3kbuuUENauSRAcEsg0iEJK_V7dZVP88_-omjdnMhCsZj6fwqQxSJge4wIiSWwhhQiox7LbXoZzVWUkeFseODUiFmfLVpCSQA0Ue7QlULc9jDrbBTSXRclGOIeNsw95fuMt3tgdKY0u1eDLzDsjJYiF67nt7g05nrY7cdtzX6s5JTxUv/w640-h360/design.gif', 'showInlineAds': false}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': '\u0643\u062a\u0628:'}, {'name': 'timestamp', 'label': '-'}, {'name': 'comments', 'label': 'comments'}, {'name': 'share', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': ''}]}], 'allBylineItems': [{'name': 'author', 'label': '\u0643\u062a\u0628:'}, {'name': 'timestamp', 'label': '-'}, {'name': 'comments', 'label': 'comments'}, {'name': 'share', 'label': ''}, {'name': 'labels', 'label': ''}]}, {'title': '\u0627\u0639\u0644\u0627\u0646 \u0645\u0646\u062a\u0635\u0641 \u0627\u0644\u0645\u0642\u0627\u0644', 'type': 'HTML', 'sectionId': 'PostA3lan', 'id': 'HTML3'}, {'title': '\u0627\u062e\u0631 \u0627\u0639\u0645\u0627\u0644\u0646\u0627', 'type': 'HTML', 'sectionId': 'sidepar', 'id': 'HTML5'}, {'title': '\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0625\u062c\u062a\u0645\u0627\u0639\u064a', 'type': 'LinkList', 'sectionId': 'sidepar', 'id': 'LinkList4'}, {'title': '\u0627\u0644\u062a\u0633\u0645\u064a\u0627\u062a', 'type': 'Label', 'sectionId': 'sidepar', 'id': 'Label1'}, {'title': '\u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u062a\u0648\u0627\u0635\u0644 \u0627\u0644\u0625\u062c\u062a\u0645\u0627\u0639\u064a', 'type': 'LinkList', 'sectionId': 'footer-social', 'id': 'LinkList2'}]}]); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'logo', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList1', 'pages', document.getElementById('PageList1'), {'title': '\u0627\u0644\u0635\u0641\u062d\u0627\u062a', 'links': [{'isCurrentPage': false, 'href': 'https://www.geecoders.com/p/blog-page_24.html', 'id': '2211078889069451338', 'title': '\u0627\u062a\u0635\u0644 \u0628\u0646\u0627 || contact us'}, {'isCurrentPage': false, 'href': 'https://www.geecoders.com/p/mindegy1-mindegy1.html', 'id': '5723709123583410502', 'title': '\u0633\u064a\u0627\u0633\u0629 \u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629 || Privacy policy'}, {'isCurrentPage': false, 'href': 'https://www.geecoders.com/p/blog-page.html', 'id': '7752173038066016849', 'title': '\u0645\u062d\u0648\u0644 \u0627\u0644\u0627\u0643\u0648\u0627\u062f \u0628\u0644\u0648\u062c\u0631 || Blogger code converter'}, {'isCurrentPage': false, 'href': 'https://www.geecoders.com/p/blog-page_28.html', 'id': '6806785488741277839', 'title': '\u062e\u0631\u064a\u0637\u0629 \u0627\u0644\u0645\u0648\u0642\u0639 || Site Map'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList3', 'topsocialL', document.getElementById('LinkList3'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList001', 'menu', document.getElementById('LinkList001'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML100', 'Topa3lan-sc', document.getElementById('HTML100'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML101', 'Topa3lan-sc2', document.getElementById('HTML101'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch2', 'searchform', document.getElementById('BlogSearch2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'AddOns', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm200', 'AddOns', document.getElementById('ContactForm200'), {'contactFormMessageSendingMsg': '\u062c\u0627\u0631\u064d \u0627\u0644\u0625\u0631\u0633\u0627\u0644...', 'contactFormMessageSentMsg': '\u062a\u0645 \u0625\u0631\u0633\u0627\u0644 \u0631\u0633\u0627\u0644\u062a\u0643.', 'contactFormMessageNotSentMsg': '\u062a\u0639\u0630\u0631 \u0625\u0631\u0633\u0627\u0644 \u0627\u0644\u0631\u0633\u0627\u0644\u0629\u060c \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649 \u0641\u064a \u0648\u0642\u062a \u0644\u0627\u062d\u0642.', 'contactFormInvalidEmailMsg': '\u064a\u0644\u0632\u0645 \u0625\u062f\u062e\u0627\u0644 \u0639\u0646\u0648\u0627\u0646 \u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0635\u0627\u0644\u062d.', 'contactFormEmptyMessageMsg': '\u0644\u0627 \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0643\u0648\u0646 \u062d\u0642\u0644 \u0627\u0644\u0631\u0633\u0627\u0644\u0629 \u0641\u0627\u0631\u063a\u064b\u0627.', 'title': '\u0646\u0645\u0648\u0630\u062c \u0627\u0644\u0627\u062a\u0635\u0627\u0644', 'blogId': '3573444566851368689', 'contactFormNameMsg': '\u0627\u0644\u0627\u0633\u0645', 'contactFormEmailMsg': '\u0628\u0631\u064a\u062f \u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a', 'contactFormMessageMsg': '\u0631\u0633\u0627\u0644\u0629', 'contactFormSendMsg': '\u0625\u0631\u0633\u0627\u0644', 'contactFormToken': 'AOuZoY7vG629lXeumZ2QYQq-zXJx2qqv6w:1736309309099', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'Tempnec', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/2380212426-lbx__ar.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/1964470060-lightbox_bundle_rtl.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML3', 'PostA3lan', document.getElementById('HTML3'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML5', 'sidepar', document.getElementById('HTML5'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList4', 'sidepar', document.getElementById('LinkList4'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LabelView', new _WidgetInfo('Label1', 'sidepar', document.getElementById('Label1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList2', 'footer-social', document.getElementById('LinkList2'), {}, 'displayModeFull'));