{"id":15489,"date":"2021-07-26T01:15:00","date_gmt":"2021-07-25T22:15:00","guid":{"rendered":"https:\/\/mobidictum.com\/?p=15489"},"modified":"2023-04-25T10:50:16","modified_gmt":"2023-04-25T07:50:16","slug":"flutter-nedir","status":"publish","type":"post","link":"https:\/\/mobidictum.com\/tr\/flutter-nedir\/","title":{"rendered":"Flutter nedir?"},"content":{"rendered":"\n

Flutter mobil oyun geli\u015ftiricilerin veya bu alana girmek isteyen insanlar\u0131n ilgisini \u00e7eken ara\u00e7lardan biri. Google’\u0131n geli\u015ftirdi\u011fi bu ara\u00e7 ile Android ve iOS i\u015fletim sistemleri i\u00e7in yapaca\u011f\u0131n\u0131z mobil uygulamalar\u0131n aray\u00fczlerini haz\u0131rlayabilirsiniz. Bu yaz\u0131m\u0131zda bu alana yeni girecek birinin anlayaca\u011f\u0131 \u015fekilde sade ve net bir \u015fekilde Flutter’\u0131 anlatt\u0131k.<\/p>\n\n\n\n\n\n

Flutter nedir?<\/h2>\n\n\n\n

Flutter, 2017 y\u0131l\u0131nda Google taraf\u0131ndan \u00e7\u0131kar\u0131lan \u00fccretsiz ve a\u00e7\u0131k kaynak UI framework’t\u00fcr. Kavramlar biraz karma\u015f\u0131k geldiyse a\u015fa\u011f\u0131daki ba\u015fl\u0131klara t\u0131klayarak detaylar\u0131 g\u00f6rebilirsiniz. Bu tarz bir ara\u00e7 ile \u00e7al\u0131\u015fmaya ba\u015flayacaksan\u0131z bunlar ve bunlara benzer kavramlar\u0131 s\u0131kl\u0131kla duyacaks\u0131n\u0131z.<\/p>\n\n\n\n\n\n

UI’\u0131n a\u00e7\u0131l\u0131m\u0131 User Inferface, yani kullan\u0131c\u0131 aray\u00fcz\u00fcd\u00fcr. Bir uygulamaya, bir oyuna girdi\u011finizde kar\u015f\u0131n\u0131za \u00e7\u0131kan a\u00e7\u0131l\u0131\u015f ekran\u0131ndaki g\u00f6rseller UI \u00fcr\u00fcn\u00fcd\u00fcr. Tasar\u0131mc\u0131lar, kullan\u0131c\u0131n\u0131n sorunsuz bir deneyim ya\u015famas\u0131 i\u00e7in g\u00f6rsel d\u00fczenlemeler yaparlar ve bu d\u00fczenlemeler UI kapsam\u0131na girer.<\/p>\n\n\n\n\n\n

Framework, kullan\u0131c\u0131lar\u0131n bir \u015feyler \u00fcretmesini, tasarlamas\u0131n\u0131 sa\u011flayan uygulamalara verilen genel isimdir.<\/p>\n\n\n\n\n\n

Flutter, Android ve iOS fark etmeksizin aray\u00fcz olu\u015fturmaya yarar. Butonlar ve layout’lar yard\u0131m\u0131yla aray\u00fcz haz\u0131rlan\u0131r ve Flutter’\u0131n kodlama dili olan Dart ile kodlan\u0131r. Bu ara\u00e7 temel olarak ara\u00e7lar \u00fczerinden ilerler.<\/p>\n\n\n\n

Flutter ne demek?<\/strong><\/p>\n\n\n\n

Flutter \u00e7\u0131rp\u0131nmak, kanat \u00e7\u0131rpmak gibi anlamlara geliyor.<\/p>\n\n\n\n

Flutter hangi sorunu \u00e7\u00f6z\u00fcyor?<\/h3>\n\n\n\n

Mobil uygulama geli\u015ftirirken geli\u015ftiricilerin ya\u015fad\u0131\u011f\u0131 sorunlardan biri de ekran boyutlar\u0131 aras\u0131ndaki farklar. Android cihazlardaki ekran boyutu \u00e7e\u015fitlili\u011fi uygulamalar\u0131n\u0131 stabil olmalar\u0131 \u00fczerindeki b\u00fcy\u00fck engellerden biri. Yani bir ekranda sorunsuz \u00e7al\u0131\u015fan uygulama, farkl\u0131 bir marka telefonda problemli olabiliyor. Flutter temelde bu sorunun \u00e7\u00f6z\u00fcm\u00fc \u00fczerine iyi se\u00e7enekler sunuyor.<\/p>\n\n\n\n

Flutter tek bir kod dosyas\u0131 ile t\u00fcm bu boyut farkl\u0131l\u0131klar\u0131n\u0131 d\u00fczenlemenizi sa\u011fl\u0131yor. Hem birden fazla kod dosyas\u0131 ile u\u011fra\u015fm\u0131yor hem de bu alandaki yenilikleri ve \u00e7al\u0131\u015fma prensiplerini \u00f6\u011frenmek durumunda kalm\u0131yorsunuz.<\/p>\n\n\n\n

iOS avantaj\u0131<\/strong><\/p>\n\n\n\n

iOS’ta ise ekran boyutu farkl\u0131l\u0131klar\u0131 nedeniyle do\u011fan sorunlar epey az diyebiliriz. \u00c7\u00fcnk\u00fc Apple, o taraftaki tek marka oldu\u011fu i\u00e7in belirli ekran boyutlar\u0131 ile hareket ediyor ve iOS’a uygulama yaparken o boyutlar\u0131 uymak yetiyor. Android’te ise ekran boyutlar\u0131 markadan markaya de\u011fi\u015fiklik g\u00f6sterebiliyor.<\/p>\n\n\n\n

Flutter vs. React Native<\/h2>\n\n\n\n

Flutter’\u0131n en b\u00fcy\u00fck \u00f6zelli\u011fi hemen hemen t\u00fcm platformlar i\u00e7in ayn\u0131 kod taban\u0131n\u0131 kullanabilmek. React Native’den de tam olarak bu y\u00f6n\u00fcyle ayr\u0131l\u0131yor. Bu konu \u00f6zelinde thedroidsonroids.com’un payla\u015ft\u0131\u011f\u0131 tablonun bir k\u0131sm\u0131n\u0131 hemen a\u015fa\u011f\u0131 ekledik.<\/p>\n\n\n\n

<\/td>Flutter<\/strong><\/td>React Native<\/strong><\/td><\/tr>
Nedir<\/td>Bir kod havuzunda mobil, web ve masa\u00fcst\u00fc uygulamalar yap\u0131lmas\u0131n\u0131 sa\u011flayan UI toolkit’i.<\/td>React kullanarak native uygulamalar yap\u0131lmas\u0131n\u0131 sa\u011flayan bir framework.<\/td><\/tr>
\u00c7\u0131k\u0131\u015f tarihi<\/td>2017<\/td>2015<\/td><\/tr>
Yap\u0131mc\u0131s\u0131<\/td>Google<\/td>Facebook<\/td><\/tr>
Programlama Dili<\/td>Dart<\/td>JavaScript<\/td><\/tr>
UI<\/td>Yerel bile\u015fenleri de ekleyerek her platformda do\u011fal (o platformda s\u0131r\u0131tmayan) bir g\u00f6r\u00fcnt\u00fcs\u00fc olur ve bu alanda sorun \u00e7\u0131karmaz.

Belirli tasar\u0131 dillerine uygun iki ara\u00e7 tak\u0131m\u0131 var: Material Design widgets ve iOS’u taklit eden Cupertino widgets.<\/td>		Platformlar ve i\u015fletim sistemleri aras\u0131nda ayn\u0131 g\u00f6r\u00fcnt\u00fcy\u00fc elde etmek i\u00e7in \u00fc\u00e7\u00fcnc\u00fc parti kitapl\u0131klar kullanmal\u0131s\u0131n\u0131z.

Kulland\u0131\u011f\u0131n\u0131z bile\u015fenlerin OS UI g\u00fcncellemelerini yapacaklar\u0131n\u0131n g\u00fcvencesini vermesi gerekir. Pek olmaz ama uygulaman\u0131n aray\u00fcz\u00fc bozulabilir.<\/td><\/tr>
Kod payla\u015f\u0131m\u0131<\/td>Uygulamalar\u0131 be\u015f i\u015fletim sistemine g\u00f6re ayn\u0131 kod taban\u0131 ile kullan\u0131labilir. Bunlar: iOS, Android, Windows, macOS ve Linux. Firefox, Chrome, Safari ve Edge gibi taray\u0131c\u0131larda da sorun ya\u015fanmaz.<\/td>iOS ve Android i\u00e7in ayn\u0131 kod taban\u0131n\u0131n kullan\u0131lmas\u0131n\u0131 sa\u011flayan \u00fc\u00e7\u00fcnc\u00fc parti yaz\u0131l\u0131mlar ekleyebilirsiniz.<\/td><\/tr>
Rekabet Avantaj\u0131<\/td>– Zengin widget’lar ile g\u00fczel g\u00f6r\u00fcn\u00fcm
– H\u0131zla b\u00fcy\u00fcyen bir topluluk ve pop\u00fclerlik
– Geli\u015ftirici ekibin harika deste\u011fiyle \u00fcst d\u00fczey dokumantasyon
– Bir kod taban\u0131 ile farkl\u0131 platformlara \u00fcr\u00fcnler \u00fcretme<\/td>		– Stabillik (5 y\u0131ld\u0131r pazarda)
– React Native kullanan bir\u00e7ok ba\u015far\u0131l\u0131 marka
– \u00d6\u011frenmesi kolay bir teknoloji
– H\u0131zl\u0131 ve kolay geli\u015ftirme sa\u011flayan bir\u00e7ok e\u011fitim i\u00e7eri\u011fi ve kitapl\u0131k<\/td><\/tr>
Bu teknoloji ile yap\u0131lm\u0131\u015f en iyi uygulamalar<\/td>Alibaba’n\u0131n Xianyu uygulamas\u0131, Hamiton, Google Ads, Philips Hue, My BMW, Makani.<\/td>Instagram, Facebook, Facebook Ads, Skype, Tesla<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Flutter Sistem Gereksinimleri<\/h2>\n\n\n\n

Flutter sistem gereksinimleri y\u00f6n\u00fcnden sorun \u00e7\u0131karmayan framework’lerden biri. A\u015fa\u011f\u0131daki \u00f6zelliklere veya daha iyi bir cihaz\u0131n\u0131z varsa Flutter’\u0131 sorunsuz kullanabilirsiniz.<\/p>\n\n\n\n

  • \u0130\u015fletim Sistemi: Windows 7 SP1 veya \u00fcst bir versiyon<\/li>
  • Bo\u015f alan: 1.64 GB<\/li><\/ul>\n\n\n\n

    Dart Flutter nedir?<\/h2>\n\n\n\n

    Dart, Flutter’da herhangi bir aray\u00fcz\u00fc tasarlarken kullanman\u0131z gereken programlama dilidir ve mobil ve web uygulamalar geli\u015ftirilirken kullan\u0131labiliyor. <\/p>\n\n\n\n

    Dart, 2011 y\u0131l\u0131nda yine Google taraf\u0131ndan olu\u015fturuldu ve son d\u00f6nemde \u00f6nemli geli\u015ftirmeler ald\u0131. Dart’\u0131n odakland\u0131\u011f\u0131 alan ise front-end development, yani i\u015fin arka plan\u0131nda nesneleri ve i\u015flevlerini birbirine ba\u011flamak. <\/p>\n\n\n\n

    Flutter Edit\u00f6rleri<\/h2>\n\n\n\n

    Flutter indirmek yerine online olarak da kullanabilirsiniz. Bunun i\u00e7in DartPad’i kullanabilirsiniz. Ekran\u0131n sol y\u00fcz\u00fcnde yaz\u0131lan kodlar\u0131, sa\u011f y\u00fcz\u00fcnde ise o kodun g\u00f6rselle\u015ftirilmi\u015f halini, nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6rebilirsiniz.<\/p>\n\n\n\n

    \"flutter
    Flutter – Dartpad<\/figcaption><\/figure>\n\n\n\n

    DartPad’e girdi\u011finizde sa\u011f \u00fcstte yer alan Sample butonuna t\u0131klad\u0131\u011f\u0131n\u0131zda Flutter’da yap\u0131lm\u0131\u015f ara\u00e7lar\u0131 da g\u00f6receksiniz. \u00d6rne\u011fin SunFlower’\u0131 se\u00e7ti\u011finizde ekranda bir\u00e7ok tohum yer al\u0131yor. A\u015fa\u011f\u0131daki bardan say\u0131y\u0131 ayarlayarak ekrandaki tohumlar\u0131n say\u0131s\u0131n\u0131 de\u011fi\u015ftirebiliyorsunuz. Kodlar\u0131 inceleyerek ba\u015flayabilirsiniz.<\/p>\n\n\n\n

    \"dartpad
    DartPad’ten \u00f6rnekler.<\/figcaption><\/figure>\n\n\n\n

    Flutter ile hangi i\u015fletim sistemine uygun?<\/strong><\/h3>\n\n\n\n

    \u0130ster iOS ister Android olsun Flutter’\u0131 iki i\u015fletim sistemi i\u00e7in aray\u00fcz geli\u015ftirirken kullanabilirsiniz. Arac\u0131 ise yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi online olarak kullanabilir veya Windows \/ Mac fark etmeksizin cihaz\u0131n\u0131za indirebilirsiniz. Online olarak kullanacaksan\u0131z DartPad veya CodePen gibi sitelerde \u00fcyelik a\u00e7man\u0131z gerekiyor. Bu sayede \u00e7al\u0131\u015fmalar\u0131n\u0131z\u0131 depolayabilirsiniz. Aksi durumda her seferinde bo\u015f bir ekran ile kar\u015f\u0131la\u015facaks\u0131n\u0131z.<\/p>\n\n\n\n

    Flutter provider nedir?<\/h2>\n\n\n\n

    Provider, Flutter’da ara\u00e7 \/ widget yaparken kullan\u0131l\u0131r. Yeni widget alt s\u0131n\u0131flar\u0131 \/ subclasses olu\u015fturabilir ve t\u00fcm nesneleri Flutter’\u0131n bir par\u00e7as\u0131ym\u0131\u015f gibi kullanman\u0131za olanak sa\u011flar. Provider ile kodunuzu daha kolay test edebilir ve saklayabilirsiniz. Flutter’\u0131n tamamen widget’lar \u00fczerinden \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 g\u00f6z \u00f6n\u00fcne ald\u0131\u011f\u0131m\u0131zda Provider’\u0131n ne kadar \u00f6nemli oldu\u011funu bir kez daha anlayabiliriz.<\/p>\n\n\n\n

    Flutter Packages<\/h2>\n\n\n\n

    Flutter’da farkl\u0131 paketler de kullanabilirsiniz. Yani farkl\u0131 bir ara\u00e7 i\u00e7in haz\u0131rlanm\u0131\u015f olsa da bir\u00e7ok paketi, Flutter’a y\u00fcklemenize izin verir. <\/p>\n\n\n\n

    \"flutter
    Bir\u00e7ok \u00f6zelli\u011fi paketler yard\u0131m\u0131yla kullanabilirsiniz.<\/figcaption><\/figure>\n\n\n\n

    Peki burada eklenti \/ plugin ile paket \/ package fark\u0131 nedir? Eklentiler asl\u0131nda birer paket t\u00fcr\u00fcd\u00fcr, yani paketler eklentileri kapsar. Her eklenti bir paket iken her paket bir eklenti de\u011fildir. Eklentiler, pubspec dosyalar\u0131 i\u00e7eren Dart paketleridir.<\/p>\n\n\n\n

    Flutter Dersleri<\/h2>\n\n\n\n

    G\u00fcn\u00fcm\u00fczde online dersler ile Flutter dersleri almak m\u00fcmk\u00fcn. \u00d6zellikle YouTube \u00fczerinden bu framework \u00f6zelinde e\u011fitim videolar\u0131na ula\u015fabilirsiniz. A\u015fa\u011f\u0131da bu konudaki listemizi g\u00f6rebilirsiniz. \u00dccretsiz kaynaklar\u0131 \u00f6ne \u00e7\u0131kard\u0131k. Dilerseniz Udemy, Coursera, Skillshare gibi e\u011fitim platformlar\u0131ndan da konuyla ilgili dersleri ara\u015ft\u0131rabilirsiniz.1<\/p>\n\n\n\n

    KodPlanet<\/strong><\/p>\n\n\n\n

    KodPlanet ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 \u00fczere kodlama \u00fczerine \u00f6\u011fretici i\u00e7erikler payla\u015fan bir YouTube kanal\u0131. Flutter \u00f6zelinde s\u0131f\u0131rdan, kodlamaya biraz a\u015fina olanlar\u0131n epey i\u015fine yarayabilecek bir serisi bulunuyor.<\/p>\n\n\n\n

    \n