{"id":268,"date":"2023-07-18T09:37:58","date_gmt":"2023-07-18T09:37:58","guid":{"rendered":"https:\/\/cagatayoney.com\/?p=268"},"modified":"2023-07-18T09:37:59","modified_gmt":"2023-07-18T09:37:59","slug":"flutter-ile-animasyonlu-flip-efekti-bir-widgeti-farkli-bir-boyuta-tasiyin","status":"publish","type":"post","link":"https:\/\/cagatayoney.com\/?p=268","title":{"rendered":"Flutter ile Animasyonlu Flip Efekti: Bir Widget&#8217;\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n!"},"content":{"rendered":"\n<p>Merhaba. Bug\u00fcnk\u00fc yaz\u0131mda Flutter ile animasyon i\u015flemlerine bir giri\u015f yapaca\u011f\u0131m.<\/p>\n\n\n\n<p>Uygulamalar\u0131m\u0131zda animasyon kullanmak zorunda de\u011filiz ancak animasyon kullanarak uygulamam\u0131z\u0131 daha renkli, daha g\u00fczel bir hale getirebiliriz. Flutter, zengin animasyon deste\u011fi sunan bir\u00e7ok farkl\u0131 s\u0131n\u0131f ve y\u00f6ntem i\u00e7ermektedir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Flutter&#8217;da Animasyonlar<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Animation<\/strong>: Animasyonlar\u0131n temelini olu\u015fturan s\u0131n\u0131ft\u0131r ve de\u011ferlerin belirli aral\u0131kta\/s\u00fcre i\u00e7inde nas\u0131l de\u011fi\u015fece\u011fini tan\u0131mlar.<\/li>\n\n\n\n<li><strong>AnimationController<\/strong>: Olu\u015fturdu\u011fumuz animasyonlar\u0131 kontrol etmek i\u00e7in kullan\u0131lan bir s\u0131n\u0131ft\u0131r. Ba\u015flang\u0131\u00e7, biti\u015f, s\u00fcre gibi \u00f6zelliklerini bu s\u0131n\u0131f aral\u0131c\u0131\u011f\u0131yla belirleyebiliriz. Dilersek de animasyonlar\u0131m\u0131z\u0131 ba\u015flatabilir, durdurabilir, reverse edebiliriz.<\/li>\n\n\n\n<li><strong>Tween<\/strong>: Animasyonlar\u0131n ba\u015flang\u0131\u00e7 ve biti\u015f de\u011ferlerini belirten bir s\u0131n\u0131ft\u0131r. <\/li>\n\n\n\n<li><strong>Curve<\/strong>: Animasyonlar\u0131m\u0131z\u0131n nas\u0131l ilerleyece\u011fiyle alakal\u0131 bir s\u0131n\u0131ft\u0131r. Curves s\u0131n\u0131f\u0131 i\u00e7erisinde bulunan \u00f6\u011feleri kullanarak yava\u015f ba\u015flayan, sonradan h\u0131zlanan gibi animasyonlar olu\u015fturabiliriz.<\/li>\n\n\n\n<li><strong>AnimatedWidget<\/strong>: Animasyonu dinamik olarak g\u00fcncelleyen bir widget s\u0131n\u0131f\u0131d\u0131r.<\/li>\n\n\n\n<li><strong>Hero<\/strong>: Animasyonlar i\u00e7erisinde en \u00e7ok kulland\u0131\u011f\u0131m ve kullan\u0131m\u0131 \u00e7ok basit olan bir animasyon t\u00fcr\u00fcd\u00fcr. \u00d6zellikle bir sayfadan ba\u015fka sayfaya ge\u00e7erken her iki sayfada kullanaca\u011f\u0131m \u00f6rne\u011fin bir foto\u011fraf varsa bunu Hero Widget&#8217;\u0131n\u0131 kullanarak nesnelerin ak\u0131c\u0131 bir \u015fekilde b\u00fcy\u00fcy\u00fcp\/k\u00fc\u00e7\u00fcl\u00fcp hareket etmesini sa\u011flar.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Ba\u015flayal\u0131m<\/h2>\n\n\n\n<p>Yapaca\u011f\u0131m animasyon bir Container Widget&#8217;\u0131na flip efektini kullanmak olacak.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif\" alt=\"\" class=\"wp-image-271\" width=\"169\" height=\"350\"\/><\/figure>\n<\/div>\n\n\n<script src=\"https:\/\/gist.github.com\/Cagatay0\/79ef1eef7f171f3634c49819c0d0dbcd.js\"><\/script>\n\n\n\n<p>class&#8217;\u0131m\u0131n hemen i\u00e7erisine bu de\u011fi\u015fkenlerimi ekliyorum. <strong>Controller<\/strong>, animasyonu kontrol etmemi sa\u011flayacak. <strong>Animation<\/strong>, animasyonumun hareketini olu\u015fturacak. <strong>AnimationStatus<\/strong> ile de animasyonumun durumunu alaca\u011f\u0131m.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Cagatay0\/25a39fa63eccb9ce9e9583e9d9a897a1.js\"><\/script>\n\n\n\n<p>initState i\u00e7erisinde_controller&#8217;\u0131m\u0131n AnimationController oldu\u011funu ve ne kadar s\u00fcrede bu animasyonu ger\u00e7ekle\u015ftirece\u011fini Duration ile belirliyorum. Burada \u00f6nemli olan ekstra bir bilgi var. <strong>vsync: this<\/strong>. Buras\u0131 muhtemelen hata verecektir. Sebebi ise class&#8217;\u0131m\u0131z\u0131 TickerProvider t\u00fcr\u00fcne at\u0131lamamas\u0131ndan kaynaklanmaktad\u0131r. <\/p>\n\n\n\n<p><strong>TickerProvider<\/strong>; genellikle animasyonu tetiklemek i\u00e7in kullan\u0131lan bir s\u0131n\u0131ft\u0131r. Class\u0131m\u0131z\u0131 <strong>with SingleTickerProviderStateMixin<\/strong> ile TickerProvider t\u00fcr\u00fcne atayabiliyoruz. Buradaki sorunu bu \u015fekilde \u00e7\u00f6zebiliriz. <\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Cagatay0\/13bb09af19902ccf6967961c47d88360.js\"><\/script>\n\n\n\n<p><strong>_animation <\/strong>de\u011fi\u015fkenimi ise <strong>Tween <\/strong>ile birlikte ba\u015flang\u0131\u00e7 ve biti\u015f de\u011ferlerini veriyorum. Devam\u0131nda ise <strong>.animate<\/strong> diyerek i\u00e7erisine tan\u0131mlam\u0131\u015f oldu\u011fum <strong>controller&#8217;\u0131m\u0131 <\/strong>veriyorum. <strong>..addListener<\/strong> diyerek bu de\u011fi\u015fkenimi dinliyorum ve her seferinde setstate atarak ekran\u0131 tekrar \u00e7iziyorum.  <strong>..addStatusListener<\/strong> ile de animasyonumun <strong>status <\/strong>de\u011ferini tutuyorum. <\/p>\n\n\n\n<p>\u015eimdi art\u0131k ekran\u0131m\u0131zda g\u00f6r\u00fcnecek Widget&#8217;lar\u0131m\u0131z\u0131 \u00e7izmeye ba\u015flayabiliriz.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Ekran\u0131mda iki tane Widget tasarl\u0131yorum. Bir tanesi sadece buton \u00f6zelli\u011fi olacak. Di\u011feri ise animasyonlu yapaca\u011f\u0131m\u0131z Widget olacak. \u00d6ncelikle animasyonlu olacak Widget&#8217;\u0131m\u0131za g\u00f6z gezdirelim.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Cagatay0\/5fecce527b70cb2da1b730a3e8495634.js\"><\/script>\n\n\n\n<p>Transform Widget&#8217;\u0131, bir Widget&#8217;\u0131n d\u00f6n\u00fc\u015f\u00fcm\u00fcn\u00fc ve d\u00f6n\u00fc\u015f\u00fcm etkilerini kontrol etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Transform.flip()<\/li>\n\n\n\n<li>Transform.rotate() <\/li>\n\n\n\n<li>Transform.scale() <\/li>\n\n\n\n<li>Transform.translate() <\/li>\n<\/ul>\n\n\n\n<p>gibi t\u00fcrevleri bulunur.<\/p>\n\n\n\n<p>Verdi\u011fim <strong>alignment <\/strong>\u00f6zelli\u011fi tam merkezinden d\u00f6necek \u015fekilde ayarlamas\u0131na yard\u0131mc\u0131 olmaktad\u0131r. Sizler de FractionalOffset. yap\u0131p deneyerek asl\u0131nda tam olarak ne i\u015fe yarad\u0131\u011f\u0131n\u0131 g\u00f6rerek daha net anlayacaks\u0131n\u0131zd\u0131r. Animasyonlarla u\u011fra\u015f\u0131rken deneyerek bir \u015feyler yapmak her zaman hem daha e\u011flenceli hem daha \u00f6\u011fretici oldu\u011funu d\u00fc\u015f\u00fcn\u00fcyorum.<\/p>\n\n\n\n<p><strong>transform<\/strong> \u00f6zelli\u011fi ise bir d\u00f6n\u00fc\u015f\u00fcm matrisi uygulamaktad\u0131r. <strong>Matrix4.identity()<\/strong> ile ba\u015flang\u0131\u00e7 d\u00f6n\u00fc\u015f\u00fcm matrisini olu\u015fturmaktay\u0131m. Sadece bu matrisi kullan\u0131rsam bir d\u00f6n\u00fc\u015f\u00fcm uygulamam\u0131\u015f olurum. Ancak <strong>setEntry <\/strong>ifadesi ile perspektif bir d\u00f6n\u00fc\u015f\u00fcm\u00fc sim\u00fcle ediyorum ve widget\u0131n uzakl\u0131\u011fa g\u00f6re biraz k\u00fc\u00e7\u00fclmesini sa\u011fl\u0131yorum. Buradaki de\u011fi\u015fkenlerle oynaman\u0131z\u0131 ve hangi de\u011fi\u015fkenin nas\u0131l bir animasyon olu\u015fturdu\u011funu g\u00f6rmenizi \u00f6neririm.<\/p>\n\n\n\n<p><strong>rotateY<\/strong> kullanarak ise Widget&#8217;\u0131n y ekseninde d\u00f6nmesini sa\u011fl\u0131yorum. <strong>pi*_animation.value<\/strong> diyerek Widget&#8217;\u0131n d\u00f6n\u00fc\u015f a\u00e7\u0131s\u0131n\u0131 hesaplamaktay\u0131m. <\/p>\n\n\n\n<p>\u015eimdi gelelim child&#8217;\u0131na. Bir Card Widget&#8217;\u0131 kulland\u0131m. <strong>_animation.value &lt;= 0.5<\/strong> ifadesini kullanarak animasyon Widget&#8217;\u0131m\u0131n \u00f6n y\u00fcz ve arka y\u00fcz\u00fcn\u00fc belirtiyorum. Bu de\u011ferin 0.5&#8217;ten k\u00fc\u00e7\u00fck oldu\u011fu durumda \u00f6n y\u00fcz\u00fc, 0.5&#8217;ten b\u00fcy\u00fck oldu\u011fu durumda da arka y\u00fcz\u00fcn\u00fc \u00e7izmesini istiyorum. <strong>Bu de\u011fer 0 ile 1 aras\u0131nda oldu\u011fundan dolay\u0131<\/strong> 0.5 tam ortas\u0131ndayken di\u011fer Widget&#8217;\u0131 \u00e7izece\u011fimi g\u00f6steriyor. Bu de\u011feri 0.1 ve 0.99 yap\u0131p deneyerek tam olarak neyi kast etti\u011fimi \u00e7ok net bir bi\u00e7imde anlayacaks\u0131n\u0131zd\u0131r.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Cagatay0\/fb363c5532ee9aa780349ab10202748f.js\"><\/script>\n\n\n\n<p>Burada \u00f6n y\u00fczde g\u00f6sterece\u011fim Widget&#8217;\u0131m 200&#8217;e 200 geni\u015fli\u011finde bir Container Widget&#8217;\u0131.<\/p>\n\n\n\n<p>Ancak, backAreaWidget&#8217;\u0131m biraz farkl\u0131 olacak.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Cagatay0\/9436b61a750266ca6774901e50b70491.js\"><\/script>\n\n\n\n<p>backAreaWidget&#8217;\u0131m da asl\u0131nda frontAreaWidget&#8217;\u0131m gibi 200&#8217;e 200 geni\u015fli\u011finde bir Container. <strong>Ancak<\/strong>;<\/p>\n\n\n\n<p>Bu Container Widget&#8217;\u0131m\u0131z\u0131 Transform ile sarm\u0131\u015f\u0131z. Koymak zorunda de\u011filsiniz. Ancak bunu koymazsan\u0131z i\u00e7erisine yazm\u0131\u015f oldu\u011funuz Text&#8217;ler, Widgetlar tam olarak bir ayna g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc and\u0131racakt\u0131r. D\u00fcz bir bi\u00e7imde Mobile Application Developer <strong>YAZMAYACAKTIR<\/strong>. <\/p>\n\n\n\n<p>Biz burada Transform ile sararak ve transform \u00f6zelli\u011fine <strong>Matrix4.rotationY(pi)<\/strong> vererek olu\u015fan g\u00f6r\u00fcnt\u00fcn\u00fcn de ayna g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc alm\u0131\u015f oluyoruz ve d\u00fcz bir bi\u00e7imde g\u00f6rmek istedi\u011fimiz Widget&#8217;\u0131 bize \u00e7izecektir.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Peki, bu animasyonu nas\u0131l tetikliyoruz?<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/Cagatay0\/4275bc9141cec18a009109bc9a208fd9.js\"><\/script>\n\n\n\n<p>Olu\u015fturaca\u011f\u0131n\u0131z herhangi bir buton Widget&#8217;\u0131 i\u00e7erisine bu kod blo\u011funu yazarak animasyonumuzu tetikleyebiliriz. <\/p>\n\n\n\n<p><strong>forward() ileri y\u00f6nde \u00e7al\u0131\u015ft\u0131r\u0131rken reverse() ise geri y\u00f6nde animasyonu \u00e7al\u0131\u015ft\u0131r\u0131r<\/strong>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Biraz kar\u0131\u015f\u0131k gibi g\u00f6r\u00fcnm\u00fc\u015f olabilir fakat say\u0131larla oynayarak, deneyerek tam olarak neyin ne i\u015fe yarad\u0131\u011f\u0131n\u0131 daha rahat anlayaca\u011f\u0131n\u0131z\u0131 d\u00fc\u015f\u00fcn\u00fcyorum. <\/p>\n\n\n\n<p>Kaynak kodlar\u0131na <a href=\"https:\/\/github.com\/Cagatay0\/Flutter\/tree\/main\/flip_widget_project\">buradan <\/a>ula\u015fabilirsiniz. <\/p>\n\n\n\n<p>Okudu\u011funuz i\u00e7in te\u015fekk\u00fcr ederim. Herkese iyi \u00e7al\u0131\u015fmalar.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Merhaba. Bug\u00fcnk\u00fc yaz\u0131mda Flutter ile animasyon i\u015flemlerine bir giri\u015f yapaca\u011f\u0131m. Uygulamalar\u0131m\u0131zda animasyon kullanmak zorunda de\u011filiz ancak animasyon kullanarak uygulamam\u0131z\u0131 daha renkli, daha g\u00fczel bir hale getirebiliriz. Flutter, zengin animasyon deste\u011fi sunan bir\u00e7ok farkl\u0131 s\u0131n\u0131f ve y\u00f6ntem i\u00e7ermektedir. Flutter&#8217;da Animasyonlar Ba\u015flayal\u0131m Yapaca\u011f\u0131m animasyon bir Container Widget&#8217;\u0131na flip efektini kullanmak olacak. class&#8217;\u0131m\u0131n [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[41,22,7,42,18,16,19,17],"class_list":["post-268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-flutter","tag-animation","tag-crossplatformdevelopment","tag-flutter","tag-flutteranimation","tag-flutterdevelopment","tag-fluttertutorial","tag-mobileappdevelopment","tag-mobiluygulamagelistirmerehberi"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Flutter ile Animasyonlu Flip Efekti: Bir Widget&#039;\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n! - \u00c7a\u011fatay \u00d6ney<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cagatayoney.com\/?p=268\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Flutter ile Animasyonlu Flip Efekti: Bir Widget&#039;\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n! - \u00c7a\u011fatay \u00d6ney\" \/>\n<meta property=\"og:description\" content=\"Merhaba. Bug\u00fcnk\u00fc yaz\u0131mda Flutter ile animasyon i\u015flemlerine bir giri\u015f yapaca\u011f\u0131m. Uygulamalar\u0131m\u0131zda animasyon kullanmak zorunda de\u011filiz ancak animasyon kullanarak uygulamam\u0131z\u0131 daha renkli, daha g\u00fczel bir hale getirebiliriz. Flutter, zengin animasyon deste\u011fi sunan bir\u00e7ok farkl\u0131 s\u0131n\u0131f ve y\u00f6ntem i\u00e7ermektedir. Flutter&#8217;da Animasyonlar Ba\u015flayal\u0131m Yapaca\u011f\u0131m animasyon bir Container Widget&#8217;\u0131na flip efektini kullanmak olacak. class&#8217;\u0131m\u0131n [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cagatayoney.com\/?p=268\" \/>\n<meta property=\"og:site_name\" content=\"\u00c7a\u011fatay \u00d6ney\" \/>\n<meta property=\"article:published_time\" content=\"2023-07-18T09:37:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-18T09:37:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"2240\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"\u00c7a\u011fatay \u00d6ney\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u00c7a\u011fatay \u00d6ney\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cagatayoney.com\/?p=268#article\",\"isPartOf\":{\"@id\":\"https:\/\/cagatayoney.com\/?p=268\"},\"author\":{\"name\":\"\u00c7a\u011fatay \u00d6ney\",\"@id\":\"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3\"},\"headline\":\"Flutter ile Animasyonlu Flip Efekti: Bir Widget&#8217;\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n!\",\"datePublished\":\"2023-07-18T09:37:58+00:00\",\"dateModified\":\"2023-07-18T09:37:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cagatayoney.com\/?p=268\"},\"wordCount\":984,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3\"},\"image\":{\"@id\":\"https:\/\/cagatayoney.com\/?p=268#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif\",\"keywords\":[\"Animation\",\"CrossPlatformDevelopment\",\"Flutter\",\"FlutterAnimation\",\"FlutterDevelopment\",\"FlutterTutorial\",\"MobileAppDevelopment\",\"MobilUygulamaGeli\u015ftirmeRehberi\"],\"articleSection\":[\"Flutter\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cagatayoney.com\/?p=268#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cagatayoney.com\/?p=268\",\"url\":\"https:\/\/cagatayoney.com\/?p=268\",\"name\":\"Flutter ile Animasyonlu Flip Efekti: Bir Widget'\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n! - \u00c7a\u011fatay \u00d6ney\",\"isPartOf\":{\"@id\":\"https:\/\/cagatayoney.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cagatayoney.com\/?p=268#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cagatayoney.com\/?p=268#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif\",\"datePublished\":\"2023-07-18T09:37:58+00:00\",\"dateModified\":\"2023-07-18T09:37:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/cagatayoney.com\/?p=268#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cagatayoney.com\/?p=268\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/cagatayoney.com\/?p=268#primaryimage\",\"url\":\"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif\",\"contentUrl\":\"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif\",\"width\":1080,\"height\":2240},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cagatayoney.com\/?p=268#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/cagatayoney.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Flutter ile Animasyonlu Flip Efekti: Bir Widget&#8217;\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cagatayoney.com\/#website\",\"url\":\"https:\/\/cagatayoney.com\/\",\"name\":\"\u00c7a\u011fatay \u00d6ney\",\"description\":\"Mobile Application Developer\",\"publisher\":{\"@id\":\"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cagatayoney.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3\",\"name\":\"\u00c7a\u011fatay \u00d6ney\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/cagatayoney.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/666af91777a6180e269af38e58349c1bd120a784de3b982afddb34547376e57e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/666af91777a6180e269af38e58349c1bd120a784de3b982afddb34547376e57e?s=96&d=mm&r=g\",\"caption\":\"\u00c7a\u011fatay \u00d6ney\"},\"logo\":{\"@id\":\"https:\/\/cagatayoney.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/cagatayoney.com\"],\"url\":\"https:\/\/cagatayoney.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Flutter ile Animasyonlu Flip Efekti: Bir Widget'\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n! - \u00c7a\u011fatay \u00d6ney","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cagatayoney.com\/?p=268","og_locale":"tr_TR","og_type":"article","og_title":"Flutter ile Animasyonlu Flip Efekti: Bir Widget'\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n! - \u00c7a\u011fatay \u00d6ney","og_description":"Merhaba. Bug\u00fcnk\u00fc yaz\u0131mda Flutter ile animasyon i\u015flemlerine bir giri\u015f yapaca\u011f\u0131m. Uygulamalar\u0131m\u0131zda animasyon kullanmak zorunda de\u011filiz ancak animasyon kullanarak uygulamam\u0131z\u0131 daha renkli, daha g\u00fczel bir hale getirebiliriz. Flutter, zengin animasyon deste\u011fi sunan bir\u00e7ok farkl\u0131 s\u0131n\u0131f ve y\u00f6ntem i\u00e7ermektedir. Flutter&#8217;da Animasyonlar Ba\u015flayal\u0131m Yapaca\u011f\u0131m animasyon bir Container Widget&#8217;\u0131na flip efektini kullanmak olacak. class&#8217;\u0131m\u0131n [&hellip;]","og_url":"https:\/\/cagatayoney.com\/?p=268","og_site_name":"\u00c7a\u011fatay \u00d6ney","article_published_time":"2023-07-18T09:37:58+00:00","article_modified_time":"2023-07-18T09:37:59+00:00","og_image":[{"width":1080,"height":2240,"url":"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif","type":"image\/gif"}],"author":"\u00c7a\u011fatay \u00d6ney","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"\u00c7a\u011fatay \u00d6ney","Tahmini okuma s\u00fcresi":"5 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cagatayoney.com\/?p=268#article","isPartOf":{"@id":"https:\/\/cagatayoney.com\/?p=268"},"author":{"name":"\u00c7a\u011fatay \u00d6ney","@id":"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3"},"headline":"Flutter ile Animasyonlu Flip Efekti: Bir Widget&#8217;\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n!","datePublished":"2023-07-18T09:37:58+00:00","dateModified":"2023-07-18T09:37:59+00:00","mainEntityOfPage":{"@id":"https:\/\/cagatayoney.com\/?p=268"},"wordCount":984,"commentCount":0,"publisher":{"@id":"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3"},"image":{"@id":"https:\/\/cagatayoney.com\/?p=268#primaryimage"},"thumbnailUrl":"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif","keywords":["Animation","CrossPlatformDevelopment","Flutter","FlutterAnimation","FlutterDevelopment","FlutterTutorial","MobileAppDevelopment","MobilUygulamaGeli\u015ftirmeRehberi"],"articleSection":["Flutter"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cagatayoney.com\/?p=268#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cagatayoney.com\/?p=268","url":"https:\/\/cagatayoney.com\/?p=268","name":"Flutter ile Animasyonlu Flip Efekti: Bir Widget'\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n! - \u00c7a\u011fatay \u00d6ney","isPartOf":{"@id":"https:\/\/cagatayoney.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cagatayoney.com\/?p=268#primaryimage"},"image":{"@id":"https:\/\/cagatayoney.com\/?p=268#primaryimage"},"thumbnailUrl":"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif","datePublished":"2023-07-18T09:37:58+00:00","dateModified":"2023-07-18T09:37:59+00:00","breadcrumb":{"@id":"https:\/\/cagatayoney.com\/?p=268#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cagatayoney.com\/?p=268"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/cagatayoney.com\/?p=268#primaryimage","url":"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif","contentUrl":"https:\/\/cagatayoney.com\/wp-content\/uploads\/2023\/07\/flipAnimation-1.gif","width":1080,"height":2240},{"@type":"BreadcrumbList","@id":"https:\/\/cagatayoney.com\/?p=268#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/cagatayoney.com\/"},{"@type":"ListItem","position":2,"name":"Flutter ile Animasyonlu Flip Efekti: Bir Widget&#8217;\u0131 Farkl\u0131 Bir Boyuta Ta\u015f\u0131y\u0131n!"}]},{"@type":"WebSite","@id":"https:\/\/cagatayoney.com\/#website","url":"https:\/\/cagatayoney.com\/","name":"\u00c7a\u011fatay \u00d6ney","description":"Mobile Application Developer","publisher":{"@id":"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cagatayoney.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/cagatayoney.com\/#\/schema\/person\/cc1feeedb5532cdba38ff10ec28b2bd3","name":"\u00c7a\u011fatay \u00d6ney","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/cagatayoney.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/666af91777a6180e269af38e58349c1bd120a784de3b982afddb34547376e57e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/666af91777a6180e269af38e58349c1bd120a784de3b982afddb34547376e57e?s=96&d=mm&r=g","caption":"\u00c7a\u011fatay \u00d6ney"},"logo":{"@id":"https:\/\/cagatayoney.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/cagatayoney.com"],"url":"https:\/\/cagatayoney.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/cagatayoney.com\/index.php?rest_route=\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cagatayoney.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cagatayoney.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cagatayoney.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cagatayoney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=268"}],"version-history":[{"count":2,"href":"https:\/\/cagatayoney.com\/index.php?rest_route=\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":272,"href":"https:\/\/cagatayoney.com\/index.php?rest_route=\/wp\/v2\/posts\/268\/revisions\/272"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cagatayoney.com\/index.php?rest_route=\/wp\/v2\/media\/271"}],"wp:attachment":[{"href":"https:\/\/cagatayoney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cagatayoney.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cagatayoney.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}