Sıfırdan Adım Adım Flutter Öğrenmek

Bir programlama dili adım adım nasıl öğrenilir? Ne gibi durumlarla karşılaşılır, zorlukları nelerdir? Bu gibi soruların cevabını ve benim dil öğrenirken edindiğim tecrübeleri bu yazı içerisinde bulacaksınız.


Bu yazıda Dart diline değineceğim ve Google tarafından oluşturulan açık kaynaklı bir UI geliştirme kiti olan Flutter öğrenme süreçlerimi aktaracağım.


Bu yazıyı hazırlarken bir kursu referans almanın doğru olacağını düşündüm. Udemy’deki kursları incelediğimde “The Complate 2020 Flutter Development Bootcamp With Dart” isimli ve eğitmeni Dr. Angela Yu olan kursu almaya karar verdim. Kursun Flutter ekibi ile hazırlanmış olması çok güzel. Ayrıca kurs İngilizce ve altyazısı da mevcut. Kurs 27,5 saat ve farklı konulara değinerek oldukça kapsamlı bir içeriğe sahip.


Kurs Linki : https://www.udemy.com/course/flutter-bootcamp-with-dart/


Flutter Nedir ?


Flutter’ın ne olduğunu açıklamak için ufak bir hikaye yazayım. Bir yazılımcımız var, adı Burak. Burak iOS için bir uygulama geliştirdi ve iOS'da çok indirilen bir uygulama oldu. Ve insanlar şunu sormaya başladı; “Android için ne zaman gelecek? “. Burak bu uygulamayı Android’e çıkarmak için bir çok kitap ve eğitim aldı. Sonunda Android için bu uygulamayı geliştirdi. Fakat bir sorun var. Burak uygulama için bir güncelleme veya hata düzeltmesi için iki uygulamaya da aynı fixleri uygulamalı. Bu, zaman ve efor açısından oldukça maliyetli.


Yani yapması gereken bir iş her seferinde ikiye katlanıyor. Ayrıca uygulama iki platformda da farklı görünüyor ve değişiklikler mevcut. Bunun nedeni yalnızca iOS ekosistemi için çok çeşitli ekran boyutlarını ve en boy oranlarını desteklemek zorunda kalmaması değil .  iPad’ler, iPhone’lar, çok sayıda farklı Android cihazını düşündüğümüzde çok çeşitli ekran boyutlarını ve en boy oranlarını desteklemek zorunda. Ayrıca Android cihazlar için farklı ekran boyutlarının sayısı çok fazla. İşte burada Flutter devreye giriyor.



Flutter; geliştiricilerin her türden ekran boyutu ve cihaz için güzel arayüzler tasarlamasını kolaylaştıran basit bir araç kiti. Uygulamanızı oluşturmayı kolaylaştıran önceden oluşturulmuş bir çok widget kullanılabiliyor. Uygulamanızı satırlar, sütunlar veya yığınlar halinde yerleştirebiliyorsunuz. Ayrıca, ortalanmış, dolgulu veya kenar boşluklu tasarımlara sahip olabileceğiniz web tasarımından bazı kavramları da baz almış durumda.


Peki bu sistemi kullandığınızda sadece mobil cihazlar için mi ekran geliştirmiş oluyoruz. Hayır! Flutter’ın istediği tek şey, herhangi bir cihazda boş bir pencere. Android, iOS, web veya masaüstü fark etmez. Tek istediği sadece basit bir boş pencere. Flutter, o boş pencereye oluşturulması gereken ne ise onları çizebiliyor.


Yani Flutter Android için ayrı iOS için ayrı hatta Web ve Masaüstü için ayrı ayrı teknolojiler kullanmak yerine tek bir kod tabanı ile istediğiniz uygulamayı istediğiniz platformda geliştirmenizi sağlıyor. Flutter’da bir çok widget’a erişebilir ve bu widgetların özellikleriyle oynayabilirsiniz. Bu widgetlar Lego olarak düşünülebilir. Bunları birbirine bağlayarak ve özelleştirerek uygulama geliştirebilirsiniz.


Flutter Uygulamalarının Anatomisi


Bir Flutter uygulaması nelerden oluşur hızlıca inceleyelim. Bir Flutter uygulamasını ayrıştıracağız ve lego parçalarını parçalayacağız. Örneğin, bir uygulama oluştururken yapılabilecek ilk şey bir Scaffold widget oluşturmak olabilir. İskeletin üstüne bir AppBar eklenebilir. Ardından iskeletin içine bir Container koyarak ana ekranı belirleyen bir widget kullanılabilir. Container widget içine bir Column widget ekledik diyelim. Böylece, bir widget içine sıralı ve farklı widgetlar ekleyebilmiş olduk. Column içerisine de aşağıdaki gibi bir Network Image widget eklenmiş. Bu internet üzerinden uygulamamıza resim çekmemizi sağlar. Column wigdet içerisine bir Row widget ekledim ki bu yan yana widget kullanabilmek içindi. Ardından bir yazı ve bir icon kullanmak istiyorum ve bunları da Text ve Icon widgetlarıyla hallettim. Her şey iç içe aslında. Lego parçaları gibi widget bloklarını birleştirip uygulama yapıyorsunuz. Daha iyi anlaşılması açısından kurstan alınmış bu görsele bakabilirsiniz:


İlk Uygulamayı Geliştirme


Kursa paralel olarak gittiğimiz için Flutter’da geliştireceğimiz ilk uygulamamızın adı; I Am Rich. Bu uygulamamızda basit olarak 1 adet resim ve 1 adet appBar’ımız olacak. Projeyi oluşturmak için bir kaç farklı yol kullanabiliriz. Kurulumları yaptıktan sonra Android Studio’da Flutter > New Project dememiz proje oluşturmamızı sağlar. İkinci bir yol olarak cmd komut satırlarına aşağıdaki kodları yazmamız yeterli olacaktır. Öncelikle projeyi nereye kaydetmek istiyorsak komut satırından oraya gitmeliyiz.

Ben projelerimi D Sürücüsü üzerinde "FlutterProjects" klasörüne kaydediyorum. Bu sebeple önce komut satırları üzerinden D Sürücüsüne gidiyorum.


cd /d D:\ 
cd FlutterProjects

Ardından bir Flutter projesi oluşturmak için aşağıdaki kodu cmd komut satırları üzerinden yazmamız yeterli olacaktır.


flutter create i_am_rich

“i_am_rich” yerine proje ismini istediğiniz şekilde yazabilirsiniz. Daha sonra kullanacağınız editör üzerinden “Open Folder” dememiz projeyi açmamız için yeterli olacaktır. Flutter projeleri default olarak bir sayaç uygulaması ile gelir.


Bu uygulamanın kodları içerisinde açıklayıcı yorum satırları var. Sıfırdan bir proje için bazı kodları sileceğiz. Kodun silinmiş hali şu şekilde:



Stateless Widget, oluşturulduktan sonra durumu değiştirilemeyen ekranlar kullanılacağı zaman uygulanır. Özetle oluşturulduktan sonra durumu değiştirilen ekranlar kullanılacağı zaman Statefull Widget kullanılır. MaterialApp Widget uygulamamızı oluşturmak için gereken ana widgetlardan birisidir. İçerisinde bir çok widget bulundurur. Ve burada yapacağımız şey bir Scaffold Widget kullanmak.


Scaffold Widget kullanarak ekrana bir iskelet oluşturabilir ve bu sayede çoğu widget'a buradan ulaşabiliriz. Yapacağımız uygulama içerisinde bir AppBar Widget ve AssetImage Widget kullanacağız. Burada bir soru ile karşılaşıyoruz. Bilgisayardaki resmi nasıl uygulamaya ekleyeceğiz? Bu soru aşağıdaki gibi cevaplanabilir:


Öncellikle daha anlaşılır bir dökümantasyon kullanmak proje geliştirme sürecinde kolaylık sağlar. Bu yüzden uygulama klasörümüz içerisinde images klasörü kullanarak uygulama ile ilgili resimlerimizi buraya atıyoruz. Kullanacağımız resmi siz de seçebilirsiniz fakat kursta bir elmas resmi kullanılmış, siz de “diamond png“ şeklinde aratarak herhangi bir resim bulabilir ve ekleyebilirsiniz. Proje dosyaları içerisinde pubspec.yaml dosyasına giriyoruz. Burada uygulama içerisinde kullanılan resim, font gibi özelleştirmeler ve eklenen paketleri görebilir, eklemeler yapabilirsiniz. Yorum satırları içerisinde verilen assets ve örnekleri yorum satırından çıkartarak aşağıdaki gibi kullanabiliriz.


 flutter:
  uses-material-design: true
  assets:
    - images/diamond.png

Burada “images”in dikey satırı “assets”in dikey satırından 2 boşluk daha içeride olmasına dikkat edilmelidir. Burada fazla ya da eksik kullanılan boşluk hataya sebep olacaktır. Ayrıca assets dikey satırı flutter dikey satırından bir boşluk içeride olmalıdır.


Artık uygulamamızın ekranını kodlayabiliriz. Scaffold Widget içerisine bir adet appBar Widget ve merkezde bir resim olması için bir Center Widget ve bir AssetImage Widget. Bütün sistemi Lego olarak düşünebiliriz. Aşağıdaki görsel ekranın içeriğini yansıtıyor.



Parantezler widgetların başlangıç ve bitişlerini gösterir. Eğer uygulamanın bir yerinde değişiklik yapmamız gerekirse, değişlik yapmak istediğimiz widget parantezlerinin içerisine girerek yapabiliriz. Flutter hangi widget’ın nerede bittiğini yorum satırları ile size söyler. Bu özellik ile istediğiniz widget'a kolaylıkla erişebilirsiniz.


Uygulamanızı Fiziksel Bir Cihazda Çalıştırma


Şimdiye kadar uygulamamızı bilgisayar ekranında gördük. Fakat yaptığımız uygulama mobil olduğu için fiziksel bir cihazda görmek ve kullanmak hem kullanıcı deneyimini anlamak için güzel bir yöntemdir hem de motivasyonu arttıran bir deneyimdir. O yüzden yaptığımız bu uygulamayı kendi telefonumuzda çalıştıralım. Bunun için 2 yol var;


1.Yol: Öncellikle kullandığımız editörü açıyoruz. Editörde terminal ekranını açıyoruz ve terminal ekranına aşağıdaki kodu yazıyoruz.


flutter create apk

Bu komutu yazdığımız zaman terminal ekranında belirli kodlar aktıktan sonra All Done! uyarısı ile apk'mız hazır hale gelecektir. Peki oluşturulan bu apk nerede? Aşağıda verilen alt klasörler içerisinde uygulamanızın apk'sına ulaşabiliriz.


Uygulama klasörlerinden
 build\app\outputs\apk klasöründe 
 app.apk dosyası

Bu dosyayı android telefonumuza aktarıp gerekli izinleri verdikten sonra yükleyebilirsiniz.


2.Yol: Telefonumuzu bilgisayara bağlayarak onu bir emulator olarak göstermek. Bu şekilde uygulama telefonumuzda görünecektir ve kullanıma açık olacaktır. Bunun için telefonumuzun “Geliştirici Seçenekleri”ni açmak ve “Usb Hata Ayıklaması” seçeneğini etkinleştirmemiz yeterli. Artık telefonunuzu kablo ile bilgisayara bağladığınızda editör telefonunuzu görecek ve uygulamanızı telefon üzerinden çalıştırabileceksiniz.


Biraz Daha Öğrenelim ve Kodlayalım


Şimdi öğrendiklerimiz ile kurstaki bir uygulamayı kendi araştırmalarımız ile, kurstan bağımsız bir şekilde kodlayalım. Eğer uygulamanın bütün adımlarını kursu takip ederek yaparsak copy-paste gibi olacak ve pratik açısından eksik kalacağımızı düşünüyorum. Kursta yapılan uygulamayı inceleyelim.



Kendimizi tanıtan ufak ve güzel bir uygulama olduğunu görüyoruz. Neler kullanılmış olabileceği ile ilgili hazırladığım şemaya bir göz atalım.



Uygulama içerisinde basit bir şekilde bir tane Image Widget, 2 tane Text Widget ardından 2 tane Card Widget var. Card Widget'ın içerisinde ise 1 tane Icon ve 1 tane Text görüyoruz . Araştırarak kendimiz kodlamaya çalışalım.


Uygulamamızın iskeletinin oluşması için MaterialApp , ekranımızın çizilmesi için Scaffold Widgetlarımızı kodlayalım. Ekrandaki itemların hepsini kapsamak ve birden fazla, sıralı widgetlar kullanabilmek için bir Column Widget kullanıyoruz. Uygulamamızda gördüğümüz gibi sıralı bir şekilde şu widgetlar vardır; Image Widget, Text Widget, Text Widget, Card Widget, Card Widget. Bu widget kodlarını sıralı bir şekilde yazdığımız zaman alt alta gelecektir.


Öncellikle bütün itemlar ekranımızın merkezinde. Bunu ayarlamak için Column Widget içerisine aşağıdaki kodu yazmamız gerekiyor:


mainAxisAligment : MainAxisAligment.center

Ayrıca uygulama arka plan rengimiz teal olarak adlandırılan bir renktir. Bunun için Scaffold Widget içerisinde aşağıdaki kodu yazabiliriz:


backgroundColor: Colors.teal,

Ardından itemları sıralayacağım kod gerekiyor. Bunun için Column Widget içerisine aşağıdaki kodu yazıyoruz.


children: <Widget>[]

Köşeli parantezler içerisine item kodlarını yazabiliriz. Uygulamada resim daire olarak olduğu için daha farklı bir widget kullanmamız gerekiyor. Bu CircleAvatar widgettır. Basit olarak içerisine daire'nin boyutu için radius özelliğini kullanmalıyız. İçerisine resim için backgroundImage ekliyoruz. Ekranda daire içerisinde bir resim elde ediyoruz. Ardından 2 adet Text Widget'ımız var. Bunları aşağıdaki gibi kodlayabiliriz.


Text("Burak Kizilay"),
Text("Flutter Developer"),

Widgetları birbirinden ayırmak için virgül ( , ) kullanırız. Card Widget'larımızı kodlayalım.



Card içerisinde Icon ve Text olduğu için bir ListTile ekledik. Ardından kullanmak istediğimiz Widget'ın basit olarak adını ve özelliklerini ekledim. Burada kullanılan margin özelliği kullanılan parçanın isteğe göre kenarlardan boşluklu olması için kullanılır. 2 Card Widgetı da aynı şekilde kodlayarak amaçladığımız uygulamamızı yaptık. Basit bir şekilde güzel bir uygulama kodladık.


Flutter'ı zevkli yapan kısımlarından birisi de budur. Hızlı bir şekilde kullanıcı arayüzü rahatça kodlayabiliyoruz. Tek yapmamız gereken nerede ne kullanılacağını bilmek ve bunun syntax'ını öğrenmek. Şimdi çıktımıza bakalım .



Yukarıdaki uygulamayı kurstan bağımsız bir şekilde sadece internetten araştırarak kodladık. Nerede ne kullanmanız gerektiğini internette araştırma yaparak uygulamanızı kodlayabilirsiniz. Önemli olan 3 şey olduğunu düşünüyorum :

  1. Araştırmak

  2. Kodlamak

  3. Hata Alıp Düzeltmek

Bu şekilde bir programlama dilini öğrenmeniz hızlanacaktır. Eğer araştırmalarınızı İngilizce bir şekilde yaparsanız daha geniş ve daha detaylı sonuçlar alabilirsiniz.



Stateless Widget ve Stateful Widget Farkları


Flutter’ın temel 2 widgetını anlamalı ve hangisini nerede kullanacağımızı öğrenmeliyiz.


Bir mobil uygulamada bir şeyler değiştirir veya değiştirmezsiniz. Eğer bir şeyler değişmiyorsa sabit bir ekranınız vardır ve uygulama onun üzerinden devam eder. Fakat uygulama ekranında bir şeylerin değişmesi gerekiyorsa değişimler uygulanarak yeni ekranlar çizilir. Flutter bunu sizin verdiğiniz komutlara göre kendisi yapar. Siz ekranda değişiklik yapıp yapmayacağınıza göre farklı widgetlar kullanmalısınız. Eğer uygulamanın çalışma süresi boyunca ekran durumu değişemeyecekse Stateless Widget kullanmalıyız. Fakat uygulama çalışma süreci içerisinde ekranda bir şeyler değişiyorsa, yeni ekranlar çiziliyorsa Stateful Widget kullanılmalıdır.


Farklarına daha detaylı girmek gerekirse;

  • Stateless Widget static widgetlardır. Stateful Widget ise dinamik bir widgettır.

  • Stateless Widget herhangi bir veri değişikliğine veya herhangi bir davranış değişikliğine bağlı değildirler fakat Stateful Widget kullanıcı eylemine veya veri değişikliğine bağlı olarak çalışma sırasında güncellenebilirler.

  • Stateless Widget'ta sabit bir ekran varken Stateful Widget'ta durum değişikliklerine göre ekran veya ekranlar çizilebilir. Ayrıca arka plandaki widget Stateless olsa bile içerisindeki widgetlar Stateful olabilir. Kurstaki Magic 8 Ball uygulamasında bunu basit bir şekilde tecrübe ettim. Stateful Widget içerisinde kullanılan bir metot olan setState( ) metodunu basit olarak ekranda yeni şeyler çizilecekse kullanabiliriz .


Flutter'da Paketleri Kullanma


Paketler; bir takım yazılımcıların, diğer yazılımcılar bir projeyi daha kolay ve daha hızlı geliştirebilmesi için yaptıkları çalışmalar olarak tanımlayabiliriz. Bu paketlere https://pub.dev/ adresinden rahatlıkla ulaşabilirsiniz.



İhtiyacınız olan paketi basit bir şekilde Search packages kısmından ingilizce olarak aratarak ulaşabiliyorsunuz. Üzerinde çalıştığım bir proje için bir takvim paketine ihtiyacım vardı ve paketler içerisindeki " flutter_calendar_carousel 1.5.1 " paketini beğendim. Paketin sayfasına girdiğimizde nasıl kullanıldığı, paketin nasıl kurulduğu ve basit bir örneğini görebilirsiniz.


Installing bölümünde paketin nasıl kurulacağına dair bilgiler mevcut fakat ben de nasıl yapılacağı hakkında bilgi vermek istiyorum. Öncellikle pubspec.yaml dosyasını açıyoruz ve dependencies kısmına paket ile alakalı aşağıdaki kodu ekliyoruz.


dependencies:
  flutter_calendar_carousel:^1.5.1

Ardından editör üzerinden terminali açıyoruz ve paketi projemize eklemek için aşağıdaki kodu yazıyoruz.


$flutter pub get

Paketi projemize import etmemiz gerekiyor. Import ettikten sonra paketin doğru çalışıp çalışmadığını kontrol etmek için paket içerisinde verilen örnek kodları deneyebiliriz. Bakalım örnek kodlarla denediğimiz takvim uygulamamız nasıl olmuş .



Son Söz


Bir programlama dili veya bir teknoloji öğrenmek günümüzde düşünüldüğü kadar zor değildir. Sadece gerekli çalışma ve gerekli zamanı ayırmanız lazım. Bir programlama dili veya teknolojiyi tam olarak öğrendim demek de gerçekten iddialı bir cümledir. O konu hakkında belirli bir tecrübeye ulaşmış kişilerin bile bu cümleyi kullanmamasından anlaşılıyor zaten.



Eğer bir hedefiniz var ise buna gerekli zamanı ve enerjiyi harcamalı, farklı kaynaklara göz atmalı ve sürekli pratik yapmalısınız. Şuan Flutter konusunda ilk başladığıma göre kesinlikle daha ilerideyim fakat yeterli olmadığını düşünüyorum ve her gün bu konu hakkında araştırmalar, geliştirmeler yapıyorum. Bu yazım sadece bir girişti ve girişi güzel bir şekilde sizlere aktarmaya çalıştım. Benim tecrübelerim bu şekilde. Daha sonraki yazılarda görüşmek üzere. Mutlu ve keyifli çalışmalar.


#flutter #dart

0 yorum

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın