Herkese selam! Bu yazımda, Paraşüt uygulamamızı native yani hem Android hem de iOS tabanlı 2 projeden, Flutter framework ile tek projeye nasıl geçiş yaptığımızdan, bu kararı alırken neleri dikkate aldığımızdan ve en önemlisi kullanıcı deneyimini etkilemeden nasıl geçiş yaptığımızdan bahsedeceğim.

Uygulamamızı indirerek incelemek isterseniz aşağıdaki linklerden ulaşabilirsiniz:

• Paraşüt Android
• Paraşüt iOS

Neden Flutter?

Mart 2021'de yayınlanan Üretim Bandı podcast kanalında “Teknik: Osman Yılmaz & Emir Bostancı — Paraşüt Mobil Takımı (Team Kraken) Nasıl Yazılım Geliştiriyor?” isimli bölümde Osman Yılmaz şöyle bahsediyor:

…Flutter’ın komünitesinin hızlı gelişeceğini ve biz mobil ekip olarak Türkiye’de öncü uygulamaları, daha çok fintech uygulamaları Flutter ile geliştirerek biraz daha ön plana çıkabiliriz…

… Bu uygulamayı gerçekten çok stabil çalışan ve performansından çok memnun kaldığımız bir ürün olarak çıkarttık. Tamamen umduğumuz bir vakitte çıkarttık. Flutter’ın faydalarını gördük…

…bahsettiğim gibi öncede bütün uygulamalarımızı gün sonunda Flutter’a çevirmeyi düşünüyoruz. İlerde de Paraşüt’ün zaten uygulaması Flutter tarafında peyderpey çevireceğiz zaten, modül modül tabii bi anda böyle sıfırdan yazacak bir stratejimiz yok orada…

Özetle bakarsak Flutter’ı tercih etme sebeplerimizden birisi zaman maliyeti. Kısa sürede stabil ve performanslı uygulamalar ortaya çıkartabilmek bizim için çok önemli bir faktör oldu. Çünkü Osman Yılmaz’ın da bahsettiği gibi birden fazla uygulama yazıyoruz.

Podcast bölümünün tamamını dinlemek isterseniz linki buraya bırakıyorum:

Flutter’a geçiş yapmadan önce nelere dikkat ettik?

Her şeyden önce modül analizleri ile başladık. Örneğin “Satışlar” modülü “Müşteriler” modülünü etkiliyor mu? “Hizmet ve Ürünler” modülü “Depo” modülünü ne kadar etkiliyor? gibi soruları analiz ederek bir şema oluşturduk. Hangi modül ile başlayacağımıza karar verip bir yol haritası oluşturduk.

Tasarım ekibimizin geliştirdiği, FDS yani Frame Design System isimli design systeminde bulunan componentleri, modülleri geliştirdikçe Flutter design system paketimize teker teker ekledik. Örneğin button ihtiyacımız oldu, butonu tasarımıyla birlikte ekledik ve ihtiyacımız olan yerlerde kullandık.

GitHub - parasutcom/frame-design-system: Open source design system for financial products and digital experiences.

Flutter ile yazdığımız frame design system paketimiz public değildir.

Flutter’a geçiş yaparken nasıl başladık?

Modül modül çıkma hedefimiz olduğundan native projeye feature/bugfix geliştirme tasklarına devam ediyorduk. Projeyi bekleme durumuna almadan debug modunda bir yandan çalışabilmemiz gerekiyordu. Bu nedenle Flutter projesini uygulama olarak değil modül olarak oluşturduk.

Modül kavramı kafa karışıklığına neden olmaması için Flutter modül ve Paraşüt modül ayrımına dikkat edilmesi gerekmektedir.

Ardından oluşturduğumuz Flutter modülü native projelerimize ekledik. Bu adımda biraz native bilgi gerekmektedir. Burada resmi dökümanı takip ettik. Resmi dökümana aşağıdaki linkten ulaşabilirsiniz.

Add Flutter to an existing app

Android ve iOS için gerekli geliştirmeleri yaptıktan sonra native projelerimiz içerisinde Flutter çalıştırmayı başardık. Ardından paraşüt modül geliştirmelerine başladık.

Önce dashboard ile başladık tabii ki ve planımız da Login -> Dashboard -> Modüller -> Native Routing şeklinde ilerleyip tek tek modülleri Flutter ile yeniden yeni tasarım ile geliştirmek vardı.

Kullanıcı giriş yaptıktan sonra native ve flutter modüller ile haberleşmesi gerekiyordu. Yani Flutter'da access token veya refresh token gibi tokenları kullanabilmemiz gerekiyordu. Bu aşamalarda hem Android hem iOS hem de Flutter olarak ayrı ayrı geliştirmeler yaptık. MethodChannel burada bize çok fayda sağladı. Örneğin bir fonksiyon ismini iki tarafta da tanımlayıp istek attığımızda, native tarafta dinleyerek istek attığımız method ismine göre fonksiyon çağırıp, dilersek bir değer döndürebilme gibi süper bir avantaja sahiptik. Daha fazla detaylı incelemek isterseniz aşağıya bir link bırakıyorum:

Writing custom platform-specific code

Bu yöntemi kullanarak routing konusunu çözmüş olduk. Örneğin “Satışlar” modülüne tıkladığımızda method channel ile “Invoices” method isteği gönderdiğimizde native tarafta bu modülün bulunduğu sayfayı açıyorduk. Sonuç olarak native -> flutter, flutter -> native geçişlerimizde bize konfor sağladı.

Remote config nerede işimize yaradı?

Remote config, uygulamanızın sizin belirttiğiniz ayarlarını uzaktan yönetmenizi sağlayan bir araçtır. Yani kullanıcılar uygulamayı güncellemeye ihtiyaç duymadan, anlık olarak değişiklikler yapabiliyorsunuz. Biz remote config için Firebase tercih ettik.

Firebase Remote Config | Personalize and optimize your app within feature flags

Remote config’in en çok beğendiğimiz özelliklerinden birisi istediğimiz zaman açıp, istediğimiz zaman kapatabilme esnekliğine sahip olmasıydı. En sık kullandığımız yer ise modülleri istediğimiz zaman native istediğimiz zaman Flutter’a yönlendirmek oldu. Kafanız karıştıysa hemen bir görselle açıklamaya çalışayım.

Örneğin bizim isExpendituresModuleEnabled isimli bir flagimiz olsun. Routing işlemini yaptığımız yerde bu değere bakıyoruz ve bu değer eğer true ise Flutter ile yazdığımız ekrana, eğer false ise Native ekrana yönlendiriyor. Tabii tamamen Flutter geçiş yaptığımız için şu an bunlara ihtiyaç duymuyoruz.

Peki neden modülleri kapatıp açmaya ihtiyaç duyduk derseniz, yukarıda bahsettiğim gibi bazen ön göremediğimiz buglarla karşılaşabiliyoruz ve bu hataları fixleyip yeni sürüm çıkana kadar kullanıcılarımızın problem yaşamalarını minimum seviyede tuttuk. Böylece biz modülleri geliştirirken crash-free oranımızı yüksek tutmamıza yardımcı oldu.

Mimari olarak nerelere dikkat ettik?

Klasör yapımızı feature first yani özelliklere göre tercih ettik. Elbette bunun tercih etmemizin bir sebebi vardı. Andrea’nın tweette de bahsettiği gibi “Belirli bir özellik için, ihtiyaç duyduğumuz tüm dosyalar aynı üst düzey klasör içinde bulunmaktadır.” en başlıca sebeplerdendi.

For a given feature, all the files we need are found inside the same top-level folder.

Modüller (feature’lar) üzerinde çalışırken hepsini ayrı ayrı tutmaya çalıştık. Böylelikle ortak kullanılan yerler için ve örneğin sadece satışlar modülünde kullanılacak olan tüm sınıflarımızı, fonksiyonlarımız vs. ayırmış olduk.

Örneğin depoları getirmek için kullandığımız GetWarehousesUseCase sınıfı hem satışlar modülü hem de depo modülünde kullanılıyorsa bu tür ortak sınıfları common feature içerisine taşıdık.

Bu konuyu detaylı incelemek isterseniz Andrea’nın yazmış olduğu blog yazısını ve tweetin linkini aşağıya bırakıyorum:

Flutter Project Structure: Feature-first or Layer-first?

Kullandığımız paketleri neden tercih ettik?

Tabii ki bu başlığa önemli tercihlerden biri olan state managment ile başlamak istiyorum. Bloc paketini tercih etmemizin en temel sebepleri Bloc paketinin resmi dökümanında da belirtildiği gibi business logicleri, presentation katmanından ayırması, daha hızlı kodlanabilir olması, kolay test edilebilir olması ve yeniden kullanılabilir olması.

Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.

Neden Bloc konusuna daha fazla bilgi edinmek isterseniz aşağıdaki resmi dökümanı göz gezdirebilirsiniz.

Why Bloc?

Paginated ve daha fazla evente sahip olan sayfalarda Bloc, çok büyük ve komplex olmayan kısımlar için Cubit tercih ettik.

Localization konusunda daha öncesinde çoğumuzun easy_localization paketinde deneyimi olduğu için bu paketi kullanmaya karar verdik. Tek bir komut ile json dosyasına eklediğimiz değerleri generate ederek çağırıyoruz. Easy localization…

• easy_localization | Flutter package
• Internationalizing Flutter apps

Sizde deneyimlerinizi bizimle paylaşmak isterseniz, dinlemek isteriz.

Dependency injection için projemizde çok fazla tercih edilen getIt ve injectable paketlerini tercih ettik. Buğra Göksu’nun yazısında detaylı olarak kullanımı mevcut incelemek isterseniz linki aşağıya bırakıyorum.

• Flutter’da GetIt ve Injectable ile Dependency Injection Pt. 1
• get_it | Dart package

Navigation and routing konusu bizim için önemli olan diğer konulardan birisiydi. Çünkü uygulama içerisinde modüller arası geçişler, yani satış faturası detayından müşteri detay sayfasına geçişler yapılabilmektedir. Burada biz modül modül ilerlicez fakat native to flutter — flutter to native gibi routingleri nasıl sağlayacağız gibi soru işaretleri doğuyordu. Bu kısımda native ile iletişim sağlamak için MethodChannel kullandık. Tamamen Flutter’a geçiş yapana kadar hem native routing hem de auto_route paketini tercih ettik. Bu paketi tercih etmemizin temel sebebi kodlama tarafında bize hız kazandırmış olmasıydı.

auto_route | Flutter package

AutoRoute paketi hakkında detaylı bilgi edinmek isterseniz Yaren Yıldırım’ın (leo) yazısını okumanızı tavsiye ederim. Linki aşağıya bırakıyorum.

AutoRoute ile Basitleştirilmiş Navigator 2.0

Diğer bir yazılım geliştirme süreçlerinden olan lint kuralları, kodun kalitesini artırmak ve ekip üyeleriyle kod yazımında tutarlılığı sağlamak, muhtemel hataları önlemek ve development sürecini optimize etmek için önemli bir role sahip. Biz projemizde technical discussion toplantılarımızda tartışarak karar verdiğimiz lint kurallarını kullanıyoruz. Projelerimizde kullandığımız Kraken Lint paketimiz mevcut ve yeni dart sürümlerinde eklenen lint kurallarını tartışıp ekleme veya çıkartmalar yapıyoruz.

Ayrıca önceden ücretsiz sürüm olan DCM yani Dart Code Metrics paketini de linter paketimizde kullanıyoruz. Güncel olan aracı incelemek isterseniz, aşağıya bağlantısını bıraktım:

• DCM - Code Quality Tool for Flutter Developers
• Kraken Guideline

Son olarak önceden yazmış olduğum Kraken Guideline makalemi de yukarıya ekledim. Sanırım daha güncel bir makale daha yazmam gerekiyor :)

Logger ve Crashlytics tarafında yaklaşımımız ise Buğra Göksu’nun diğer bir makalesinde bahsettiği gibi easy_logger ve Firebase Crashlytics oldu.

Local log süreci için ise kullandığımız paket easy_logger oldu. Bu paketi seçmemizdeki sebep aslında localization işlemleri için kullandığımız easy_localization paketinin içerisinde default olarak gelmesi. Bu yüzden başka bir paket ihtiyacı hissetmedik.

Bu konuda Buğra Göksu’nun makalesi detaylı bir anlatıma sahip, bu nedenle okumanızı tavsiye ederim.

Flutter’da FirebaseCrashlytics ve EasyLogger ile Gelişmiş Log Sistemi

Test süreçlerimiz nasıldı?

Öncelikle kod tarafındaki test süreçlerimizden bahsetmek istiyorum. State managment tarafında yukarıda da bahsettiğim gibi bloc kullandığımız için bloc_test paketini kullandık.

bloc_test | Dart package

Testlerimizi yaparken, sıkça kullanılan test tekniği olan ve genellikle bir sınıfın gerçek davranışını taklit etmek için kullanılan mock tekniğini kullandık. Bu tekniği kullanırken dart.dev tarafından yayınlanan mockito paketi yerine bloc paketinin geliştiricisi tarafından yayınlanan mocktail paketini kullandık.

• mockito | Dart package
• mocktail | Dart package

Ayrıca testlerimizde coverage önem verdik ve %80'in üzerinde tutmaya özen gösterdik. Her geliştirmede, coverage yüzdesini yükseltmeye özen göstermeye devam ediyoruz.

Diğer kullandığımız tekniklerden biri olan golden test tekniğini de uyguladık. Golden test, yazılım geliştirme sürecinde görsel ya da çıktının beklentilere uygunluğunu kontrol etmek için kullanılır. Bu testi, UI bileşenlerinin doğru şekilde görüntülenip görüntülenmediğini kontrol etmek için yaptık. Ayrıca her sayfa ve senaryo için farklı testler ekledik.

Golden testler için golden_toolkit paketini tercih etmiştik fakat uzun süredir update almıyor hatta yakın zamanda “Discontinued” durumuna geçti. Şimdilik işimizi görüyor fakat yakın zamanda değişiklik için kraken olarak kendi aramızda bu konuyu tartışacağız. Sizin kullandığınız golden paketi veya tekniği varsa bizimle paylaşırsanız dinlemek isteriz.

Örnek bir golden testimizi sizinle paylaşmak istiyorum:

Kod tarafında daha fazla test yazımımız ve pratiklerimiz için Berat Göktuğ Özdemir’in yazmış olduğu makaleyi okumanızı ve Github üzerinden paylaştığı açık kaynaklı projesini incelemenizi şiddetle tavsiye ederim.

0: Introduction — Testing In Flutter

Tüm bu süreçlerde hiç bug yok muydu?

Yazılım geliştirme, dinamik ve karmaşık bir süreçtir. Hangi programlama dilini kullanırsak kullanalım, kodda hatalar “bug” ortaya çıkabilir. Bu hatalar, basit bir yazım yanlışı veya karmaşık bir mantık hatasından kaynaklanabilir.

Bazen, bir dilin sunduğu özellikler veya kullanılan kütüphaneler, beklenmedik sonuçlar doğurabilir. Bu nedenle, yazılımın karmaşıklığı ve dillerin çeşitliliği, her zaman hata yapma olasılığını beraberinde getirir. Dillerin çeşitliliğinden kastım bazı paketler cihazın sistemiyle iletişime geçmesi gerekebiliyor örneğin permission_handler paketi native ile iletişime geçiyor. Bu nedenle paket geliştirilirken başka dillerde kullanılmaktadır.

Önemli olan, bu hataları zamanında tespit etmek ve en erken zamanda çözmektir. Test süreçleri, kod gözden geçirmeleri ve kullanıcı geri bildirimleri, hataları tespit etmek ve düzeltmek için kritik araçlardır. Unutmayalım ki, buglar yazılım geliştirme sürecinin doğal bir parçasıdır. Onları kabul edip, öğrenerek daha iyi çözümler üretmek, yazılımcıların en büyük güçlerinden biridir. O durumlar için test yazmayı ihmal etmeyin 😊

Bu süreçte, testlerimizi yaparken gözden kaçabilecek hataları yakalamak ve kullanıcılarımızın uygulamayı kullanırken beklenmedik hatalarla karşılaştıklarında, kodda hata kaynağını tespit edebilmek için Firebase Crashlytics kullandık.

Yukarıda da bahsettiğim gibi Buğra Göksu’nun makalesini tekrardan paylaşıyorum.

Flutter’da FirebaseCrashlytics ve EasyLogger ile Gelişmiş Log Sistemi

Crash-free, bir uygulamanın kullanıcı oturumları sırasında meydana gelen çökme olaylarının, toplam oturum sayısına oranını ifade etmektedir. Yüksek crash-free oranı, uygulamanın stabil olduğunu gösterirken, düşük oran, potansiyel sorunlar veya hatalar olduğunu gösteriyor olabilir.

Biz uygulamamızda hem Android hem iOS tarafında yüksek bir crash-free oranına sahip olmayı hedeflemiştik. Bizim minimum hedefimiz %90–95 arasındaydı. Hedefimizi tutturduğumuzu hatta beklediğimizden de yüksek olduğunu görünce inanılmaz derece mutlu olmuştuk. Sizlerle son 30 günün hem Android hem de iOS tarafında crash-free oranlarımızı paylaşmak istiyorum.

Git hooks nereden çıktı şimdi?

Git hooks, bazı komutlar verildiğinde otomatik olarak çalışan scriptlerdir. Bu sayede yazılım geliştirme sürecinizi daha verimli/tutarlı hale getirir. Yani, her commit veya push komutunu çalıştırdığınızda belirli işlemleri otomatikleştirebilirsiniz.

Kullanım amacımız, ekip içinde belirli bir guideline uyumunun sağlanmasının yanı sıra olası hataları önlemektir. Örneğin commit mesajlarımızın bir standart belirledik ve bu standarda uyum sağlıyoruz. İleride geriye dönük bir kod review yapıldığında, kodu ve yapılan işleri kolayca anlamak için Commit Türü: Yapılan İş (Proje-Issue Numarası) formatını kullanıyoruz. Örneğin feat: create button (MUKI-1905)bir commit mesajımız bu şekilde oluyor.

Ayrıca commitleri ekledikten sonra pushlarken ise testlerimizi çalıştırmayı ve testlerden herhangi birisi hata veriyorsa kodu gönderilmesini engelleyen bir scriptimiz mevcut. Böylelikle kodun bir yerleri bozmuş olmasını da engellemiş oluyoruz.

Store’da puan değişimimiz

Flutter ile yeniden yazdığımız uygulamamız, App Store ve Google Play Store’da beklediğimizin çok ötesinde bir başarıya imza attı. Kullanıcı deneyimini ön planda tutarak gerçekleştirdiğimiz bu dönüşüm, sadece puanlarımızda belirgin bir artış sağlamakla kalmadı; aynı zamanda olumlu yorumların sayısında da gözle görülür bir artış yaşandı. Kullanıcılarımızdan gelen geri bildirimler, geliştirdiğimiz yeni özelliklerin ve tasarım değişikliklerinin ne denli etkili olduğunu bizlere gösteriyor. Onların memnuniyetini görmek, ekip olarak bizi son derece mutlu ediyor ve bu başarı, daha iyisini yapma konusunda bize büyük bir motivasyon kaynağı sağlıyor. Gelecekte, kullanıcılarımızın ihtiyaçlarına daha iyi cevap verebilmek için çalışmaya devam edeceğiz.

Paraşüt LinkedIn'de: Mutlu Patronlarımızın yorum ve değerlendirmeleri karşısında biz: 🫠 🫠 🫠...

Teşekkürler

Emeği geçen ekip arkadaşlarıma teşekkürü borç bilirim. Team Kraken 💙🐙

Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.

Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻

• Team Kraken Twitter hesabı
• Twitter hesabım

Taşınıyoruz — Native’den Flutter’a geçiş sürecinde neler yaşadık? was originally published in Team Kraken on Medium, where people are continuing the conversation by highlighting and responding to this story.

Hi everyone! In this article, your applications in the Play Store and App Store; I will talk about the structure where the user can star and add comments within the application without going to the store.

The review flow can be triggered at any time within the app. During the stream, the user can rate your application 1 to 5 stars and add comments if desired. After the user submits the review, it can be viewed in the store.

You can examine the sample flow in detail in the image below. The idea belongs to the Google Play stream, which is the Android store.

App Review Flutter Package

There are multiple packages for the App Review feature in pub.dev, which is the official package site that we can use in our Dart and Flutter projects.

When we type “app review” in the pub.dev search section, we see that in_app_review and app_review packages stand out among the packages found in the results.

In this article, I will talk about the use of the app_review package. But with the AppReviewManager class structure I will explain, even if you change the package, you will be able to continue using it by spending very little time.

The reason I prefer this package is that the in_app_review package has not been updated for about 10 months. Maybe it got an update while you were reading this article :)

Let’s add it to our application

First, we open our Flutter project, where we want to add the App Review feature. There are two methods for adding the package to our project:

The first method is to run the following command in the terminal.

flutter pub add app_review

In the second method, we open the pubspec.yaml file in our project and add it to the dependencies section.

dependencies:
 app_review: ^2.1.2+1

After adding it we have to run the following command in the terminal.

flutter pub get

Let’s create the AppReviewManager class

In this section, before we start the development, we need to create the functions we need as a draft. For example, we need to send a request so that the user can see the review flow in the application. We will create a function for this request.

After thinking in this way, we add the functions we need to our class for now.

Let’s create the DefaultAppReviewManager class

When using our functions that we created with the abstract class, we will call them with the naming here. Next, we will write a class that forces the use of the functions in the AppReviewManager class, where we will define the tasks of these functions.

After filling our functions, we can proceed with their use.

Using AppReview

On the page where we want to call the functions, we must create a variable of type AppReviewManager.

AppReviewManager appReviewManager = DefaultAppReviewManager();

Then all we have to do is call the function.

onPressed: (){
  appReviewManager.requestReview();
}

Easy to use different packages and refactor

As I mentioned at the beginning of the article, if you want to use a different package, all you have to do is create a class such as the DefaultAppReviewManager class and create a variable from the class we just created. Since the function name will be the same everywhere, we will update it without making any changes.

AppReviewManager appReviewManager = NewAppReviewManager();

Thank you for taking the time to read this article. I hope it is helpful. As Team Kraken, we will continue to share regularly.

You can follow us using the links below. ✋🏻

• Team Kraken Twitter account
• My Twitter account

Flutter: App Review [EN] was originally published in Team Kraken on Medium, where people are continuing the conversation by highlighting and responding to this story.

Herkese selam! Bu yazımda, Google Play Store ve Apple App Store’da bulunan uygulamalarınızın; kullanıcının mağazaya gitmesine gerek kalmadan uygulama içerisinde oy verebilmesini ve yorum ekleyebilmesini sağlayan bu özellikten bahsedeceğim.

Uygulama içerisinde herhangi bir zamanda inceleme akışı tetiklenebilir. Akış sırasında kullanıcı, 1 ila 5 yıldız arasında kullanıcı dilediği rakamı kullanarak uygulamanızı puanlayabilir ve hatta isterse yorum ekleyebilmektedir. İnceleme kullanıcı tarafından gönderildikten sonra mağazada görüntülenir.

Örnek akışı, aşağıdaki görselde detaylı inceleyebilirsiniz. Görsel Android mağazası olan Google Play’e aittir.

App Review Flutter Paketi

Dart ve Flutter projelerimizde kullanabileceğimiz resmi paket sitesi olan pub.dev içerisinde, App Review özelliği için birden fazla paket bulunmaktadır.

pub.dev arama kısmına “app review” yazdığımız zaman sonuçlarda bulunan paketlerden, in_app_review ve app_review paketlerinin öne çıktığını görüyoruz.

Bu yazımda ise app_review paketinin kullanımından bahsedeceğim. Fakat anlatacağım AppReviewManager sınıf yapısı ile paket değiştirseniz dahi çok az zaman harcayarak kullanmaya devam edebileceksiniz.

Bu paketi tercih etme sebebim ise in_app_review paketinin yaklaşık 10 aydır update almamış olmasından ve app_review paketinin arkasında Flutter Community’sinin olmasından kaynaklanmaktadır. Belki siz bu yazıyı okurken güncelleme almış olabilir :)

Uygulamamıza ekleyelim

İlk olarak App Review özelliğini eklemek istediğimiz Flutter projemizi açıyoruz. Paketin projemize eklenmesi için iki yöntem bulunmaktadır:

İlk yöntem olarak aşağıdaki komutu terminalde çalıştırıyoruz.

flutter pub add app_review

2. yöntem ise, projemizde bulunan pubspec.yaml dosyamızı açıyoruz ve dependencies kısmına aşağıdaki kodu ekliyoruz.

dependencies:
 app_review: ^2.1.2+1

Ekledikten sonra aşağıdaki komutu terminalde çalıştırmalıyız.

flutter pub get

AppReviewManager sınıfını oluşturalım

Bu kısımda, geliştirmeye başlamadan önce bizim ihtiyacımız olan fonksiyonları taslak olarak oluşturmamız gerekiyor. Örneğin, uygulama içerisinde kullanıcı inceleme akışını görebilmesi için istek atmamız gerekiyor. Bu istek için bir fonksiyon oluşturacağız.

Bu şekilde düşündükten sonra şimdilik ihtiyacımız olan fonksiyonları sınıfımıza ekliyoruz.

DefaultAppReviewManager sınıfını oluşturalım

abstract class ile oluşturduğumuz fonksiyonlarımızı kullanırken burada ki isimlendirmeler ile çağıracağız. Sırada ise bu fonksiyonların görevlerini vereceğimiz AppReviewManager sınıfındaki fonksiyonların kullanımına zorlayan bir sınıf yazmak olacaktır.

Fonksiyonlarımızı doldurduktan sonra kullanımına geçebiliriz.

AppReview kullanımı

Fonksiyonları çağırmak istediğimiz sayfada AppReviewManager tipinde bir değişken oluşturmalıyız.

AppReviewManager appReviewManager = DefaultAppReviewManager();

Ardından tek yapmamız gereken fonksiyonu çağırmak.

onPressed: ()=> appReviewManager.requestReview(),

Farklı paket kullanımı ve refactor kolaylığı

Yazının başlarında da bahsettiğim gibi farklı bir paket kullanmak isterseniz tek yapmanız gereken DefaultAppReviewManager sınıfı gibi bir sınıf oluşturmak ve yeni oluşturduğumuz sınıftan değişken oluşturmak olacaktır. Fonksiyon ismi aynı olacağı için her yerde değişiklik yapmadan güncellemiş olacağız.

AppReviewManager appReviewManager = InAppReviewManager();

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.

Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻

• Team Kraken Twitter hesabı
• Twitter hesabım

Flutter: App Review was originally published in Team Kraken on Medium, where people are continuing the conversation by highlighting and responding to this story.

Herkese selam! Bu yazımda, “Proje geliştirirken nelere dikkat ediyoruz?” konu başlığını birkaç maddeye ayırarak bahsedeceğim. Bu konuyu seri haline getirmek istiyorum. Serinin ilk yazısında kullandığımız lint kuralları ve dikkat ettiklerimiz konu başlığına değineceğim.

Kod yazarken nelere dikkat ediyoruz?

Bildiğiniz üzere biz mobil ekip olarak, projelerimizde Flutter kullanıyoruz. Bu yüzden bu seride anlatılan kod kuralları Flutter/Dart ile ilgili olacaktır.

• Kullanılmayan import satırlarını dosyalardan kaldırıyoruz.

Kullanılmayan import satırlarını kaldırmamızın başlıca sebeplerinden birisi temiz kod yani clean code prensiplerine uymaya çalışıyoruz. Diğer bir sebep olarak, her ne kadar derleme sırasında “tree-shaking” ile kaldırılacak olsa da, derleme süresini arttırması olası.

• Print fonksiyonu kullanmıyoruz.

Print fonksiyonu yerine, Team Kraken olarak geliştirdiğimiz “Logger” sınıfımızda bulunan fonksiyonları kullanıyoruz. Debug mod ve production mod için farklı sınıflarımız bulunmaktadır. Log için easy_logger paketini kullanıyoruz.

easy_logger | Flutter Package

Ek olarak, avoid_print lint kuralını kullanıyoruz.

Log sistemimiz ile ilgili detaylı bilgi almak isterseniz, takım arkadaşım Buğra Göksu’nun yazdığı “Flutter’da FirebaseCrashlytics ve EasyLogger ile Gelişmiş Log Sistemi” makalesini okuyabilirsiniz.

Flutter’da FirebaseCrashlytics ve EasyLogger ile Gelişmiş Log Sistemi

• Kod içerisinde TODO kullanmıyoruz.

TODO yorum satırları yerine proje yönetiminde kullandığımız araç üzerinde, yapacağımız işlemi detaylı ve gerekirse görsel ile anlatım şeklinde issue oluşturuyoruz. Böylece yapacağımız task, planlanarak sprint içerisine ekleniyor.

• Parametresiz Container widget ile sarmaktan kaçınıyoruz.

Bir widget’ı başka parametresi olmadan Container ile sarmanın hiçbir etkisi yoktur ve kodu gereksiz yere daha karmaşık hale getirir. Bu durumu gözden kaçırmamak için linter paketimize avoid_unnecessary_containers kuralını ekledik.

avoid_unnecessary_containers

• Boşluk eklerken SizedBox kullanıyoruz.

Layout içerisinde boşluk eklemek için Container ve Padding yerine SizedBox kullanıyoruz. Container, SizedBox’a nazaran maliyetli bir widget’tır ve bonus olarak, SizedBox’ın bir const kurucusu vardır.

Daha detaylı olarak Container ve SizedBox arasındaki farkı incelemek isterseniz aşağıdaki linke tıklayarak ulaşabilirsiniz 🙏

Flutter: SizedBox Vs Container, why use one instead of the other?

Bu durum için linter paketimizde ekli olan sized_box_for_whitespace kuralından faydalanıyoruz.

sized_box_for_whitespace

• Yalnızca BoxDecoration eklerken Container yerine DecoratedBox tercih ediyoruz.

Container, DecoratedBox’tan daha maliyetli bir widget’tır ve bonus olarak, DecoratedBox’ın bir const kurucusu vardır.

Linter paketimizde bu durum içinde bir kural mevcut : use_decorated_box

use_decorated_box

• Yalnızca Color eklerken Container yerine ColoredBox tercih ediyoruz.

Daha önce de belirttiğim gibi Container maliyetli bir widget. Yalnızca renk parametresi olan color tanımlarken Container yerine ColoredBox kullanıyoruz. Ek olarak ColoredBox ’ın bir const kurucusu var.

Tabii ki bunun içinde bir lint kuralımız mevcut. use_colored_box kuralını kullanıyoruz 🎉

use_colored_box

• Birden fazla parametre olduğunda sona virgül ekliyoruz.

Fonksiyon isminin başlangıcından kapanış parantezine kadar olan fonksiyon çağrısı veya tanımı tek bir satıra sığmıyorsa ve okunurluğu azaltıyorsa, tüm bunlar için sona virgül ekliyoruz.

Sonunda virgül bulunan kodun, okunurluğu nasıl değiştirdiğini Flutter sitesindeki Code formatting sayfasında bulunan aşağıdaki örnekte inceleyelim:

Bu durum için virgül lint kuralı olan require_trailing_commas kuralını, linter paketimizde kullanıyoruz.

require_trailing_commas

• Widget içerisinde fonksiyonların sıralanması

Uygulama geliştirirken dikkat ettiğimiz diğer hususlardan biri de fonksiyonların sıralamalarıdır. Aşağıdaki örnek görselde sıralamayı ekledim. Sıralamayı aşağıdaki kurallara göre dikkat ediyoruz:

• Olmazsa olmaz olan fonksiyonlar olan initState(), didChangeDependencies() ve dispose() gibi override olan methodları en üst kısımda alfabetik olarak sıralıyoruz.
• Hemen ardından diğer olmazsa olmaz fonksiyon olan build() ekliyoruz.
• Yukarıdaki fonksiyonlardan sonra sınıf içerisinde kullandığımız diğer fonksiyonları alfabetik olarak örnekteki gibi sıralıyoruz.

• Kod satır uzunluğu değeri 120 olarak kullanıyoruz.

Yazdığımız kodları formatlarken satır uzunluğu yani Dart: Line Length değerini 120 olarak düzenledik. Aşağıda formatlanmamış uzun satırlı bir kod görmekteyiz.

Yukarıdaki kodun aynısını formatlanmış bir şekilde aşağıda görebiliriz.

Eğer VS Code kullanıyorsanız bu şekilde düzenleyebilirsiniz:

• VS Code uygulamasında ayarlar butonuna ardından Settings seçeneğine tıklıyoruz.

• Ardından açılan sekmede arama alanına Dart line length yazarak filtreliyoruz ve çıkan sonuçlarda bulunan değeri değiştiriyoruz. (Default olarak değer 80'dir).

Şimdilik anlatacaklarım bu kadar fakat yazının başında da belirttiğim gibi bu başlığı bir seri haline getirmek istiyoruz. En kısa zamanda yeni yazı çalışmalarına başlayacağız 🎉

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.

Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻

• Team Kraken Twitter hesabı
• Twitter hesabım

Kraken Guideline was originally published in Team Kraken on Medium, where people are continuing the conversation by highlighting and responding to this story.

Bu yazı, Widgetbook — The Storybook for Flutter makalesinden izin alınarak derlenip, Türkçe’ye çevirilmiştir.

Bu yazıda widgetbook paketinin kullanımından bahsedeceğim. Developerlar, widgetlarını kataloglamasına, farklı cihazlarda ve temalarda hızlıca test etmesine; tasarımcılar ve müşterilerle kolayca paylaşmasına yardımcı olan Flutter ile yazılmış açık kaynak kodlu pakettir.

Widgetbook kullanım senaryoları (Use cases)

Widgetları ayrı ayrı oluşturun ve görsel olarak test edin

Widgetbook, UI’ları ayrı ayrı oluşturmak için bir ortam sağlamaktadır. Widgetbook’un kullanıcı arayüzünde widgetları farklı cihazlarda ve temalarda görsel olarak hızlı bir şekilde ön izleyebilir ve test edebilirsiniz. Birden fazla emülator çalıştırmadan, geliştirme yaparken UI kusurları, bugları tespit edebilirsiniz.

Tüm widgetlarınıza genel bakış

Uygulamanız büyüdüğünde ve daha fazla geliştirici uygulama üzerinde çalıştığında, uygulamanızdaki tüm widgetları takip etmek zorlaşıyor. Bu noktada bazı widgetların geliştirilip geliştirilmediğini, en iyi adlandırma kurallarına uymuş olsa bile sorgulamasını engelleyemez. Genellikle bu tür kafa karıştırıcı yapılar kaosa ve geliştiricilerin birden çok kez aynı widgetları oluşturmasına neden olabiliyor.

Widgetbook’u kullanarak, tüm widgetlarınızı ve ekranlarınızı ve bunların kullanım durumlarını (use case) hızlı bir şekilde önizleyebilirsiniz:

Widgetbook nasıl kullanılır?

Detaylı dökümantasyona pub.dev’deki paketin sayfasından erişebilirsiniz. Widgetbook’unuzu iki şekilde kurabilir ve bakımını yapabilirsiniz. Birincisi manuel olarak widgetları ekleyerek, ikincisi ise bazı paketlerden alışık olduğumuz annotation ları kullanarak code generation ile hızlı bir şekilde otomatik olarak oluşturabilirsiniz. Eğer ikinci seçeneği tercih ederseniz projeye widgetbook_annotation ve widgetbook_generator paketlerini de eklemeniz gerekecektir.

Widgetbook’unuzu kolayca kurmak ve bakım yapmak için annotationları kullanın

@WidgetbookApp

@WidgetbookApp annotationı yalnızca bir kez ayarlanmalıdır ve kod oluşturma işlemi için zorunludur. Hangi elemente annotation eklendiğinin bir önemi yok fakat @WidgetbookApp kullanıldığı dosyanın konumu, widgetbook_generator paketinin oluşturacağı app.widgetbook.main dosyasının bulunacağı klasörünü tanımlar. app.widgetbook.main dosyası Widgetbook uygulamasını çalıştırmak için otomatik oluşturulmuş tüm kodları içermektedir.

İçerdiği parametreler

@WidgetbookApp annotationı bir required parametre olan name ve bir de isteğe bağlı devices parametrelerine sahiptir.

Widgetbook generator, AppInfo oluştururken name parametresinden yararlanacaktır. Widgetbook uygulamanızı çalıştırdığınızda sol üst köşede görünecektir.

Aynı zamanda widgetbook generator, uygulamanızda widgetları önizleyebileceğiniz devices parametresine eklediğiniz cihazları oluşturacaktır.

@WidgetbookUseCase

@WidgetbookUseCase annotationı, geliştiricilerin fonksiyonları bir kullanım durumu yani usecase olarak işaretlemesine olanak tanır. Bu annotation bir fonksiyona uygulanmalıdır ve bu fonksiyon BuildContext’e sahip olmalıdır.

ya da lambda ifadesi ile tanımlayabilirsiniz.

İçerdiği parametreler

@WidgetbookUseCase annotationı iki adetrequired tipinde, name ve type isimli parametrelere sahiptir.

name parametresi, Widgetbook uygulamamızın sol tarafında bulunan gezinme panelinde kullanım durumunun nasıl görüntüleneceğini belirtmektedir.

type parametresi ise, kullanım durumunun yani usecase hangi widget tipine ait olduğunu belirtir. Widgetbook generator, bu bilgilerden ve bulundukları dosyanın konumundan faydalanarak, sol tarafta gezinme panelini oluşturucaktır.

Örneğin

Dosya yapısının şöyle göründüğünü varsayalım.

/lib/tiles/awesome_tile.dart dosyası içerisinde bulunan AwesomeTile usecase örneği için, aşağıdaki gibi tanımlandığını varsayalım.

Genellikle widgetınız daha complex bir yapıya sahip olabiliyor. Böyle bir durumda, widgetı ihtiyacınız olan şeylerle sarmaktan çekinmeyin. Bu, Provider, Bloc veya başka bir state management widgeti olabilir.

Widgetbook için kod oluşturduktan sonra, aşağıdaki içeriğe sahip bir gezinme paneli bulacaksınız.

Bir widget için birden fazla kullanım senaryonuz varsa, birden çok @WidgetbookUseCase tanımlayabilirsiniz. Widgetbook içerisinde bu durumları da ayrıca görüntüleyebilirsiniz.

@WidgetbookTheme

@WidgetbookTheme, geliştiricilerin uygulamalarının açık ve koyu temasına annotation eklemesine olanak tanır. @WidgetbookUseCase gibi, @WidgetbookTheme bir ThemeData nesnesi döndüren methodlarda kullanılır.

Constructors

@WidgetbookTheme, Widgetbook uygulamamızın açık ve koyu teması arasında ayrım yapmak için @WidgetbookTheme.light() ve @WidgetbookTheme.dark() adlı iki constructora sahiptir.

Örneğin

Widgetbook Paketleri

• widgetbook | Flutter Package
• widgetbook_annotation | Dart Package
• widgetbook_generator | Dart Package

Widgetbook hakkında daha fazla detaya aşağıdaki siteden erişebilirsiniz.

Review all UI changes of your Flutter app in seconds

Bu yazı, Widgetbook — The Storybook for Flutter makalesinden izin alınarak derlenip, Türkçe’ye çevirilmiştir. Desteklerinden dolayı Lucas Josefiak ve Osman Yılmaz’a teşekkür ederim.

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.

Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻

• Team Kraken Twitter hesabı
• Twitter hesabım

Flutter: Widgetbook was originally published in Team Kraken on Medium, where people are continuing the conversation by highlighting and responding to this story.

Katlanabilir cihazlar yani foldable devices teknolojisi hayatımıza girmeye başladı. Telefon ve tablet üretici firmalar cihazlarını çoktan çıkarmaya başladı bile. Hatta çok kısa süre önce Galaxy Z Fold3 tanıtıldı. Biraz zaman alsa da yakın zamanda, biz kullanıcılar olarak daha sık bu cihazları görebiliriz. Peki mobil uygulamaları geliştirirken, tasarımcılar ve uygulama geliştiricileri neler düşünebiliriz? Nelere dikkat etmeliyiz?

Katlanabilir Cihaz Türleri

Kısaca özetlemek gerekirse üç tip ekran özelliğine sahip cihazlar vardır:

• Ekran Kesikleri (Display Cutouts)
• Menteşeli Katlanabilir Ekran (Hinged Foldable Display)
• Katlanabilir Ekran (Foldable Display)

Ekran Kesikleri (Display Cutouts)

Katlanabilen cihazların en büyük özelliklerinden birisi elbette katlanabilen ekranlardır. Ekran kesikleri de katlanabilen cihazların bir parçası olduğundan dolayı, ekran kesitlerinden de bahsetmemizin aklımızdaki bazı sorulara cevap olacağını düşünüyorum.

Bazı cihazlarda, cihazın ön tarafında kamera veya önemli sensörler için sağlanan alana display cutouts yani ekran kesikleri denir. Bu durum Android tarafında,API 28 yani Android 9 ve sonraki yüksek sürümlerde, iOS’ta ise Iphone X cihazı ile birlikte notch ekranları desteklenmeye başlandı.

Cutout alanını Android’te kontrol etme

Not: Bu kısımdaki bilgiler Developer Android : Support display cutouts sayfasından derlenmiştir. Daha fazla detay için ilgili sayfayı ziyaret edebilirsiniz.

Android 9 çalıştıran cihazlarda uyumluluğu sağlamak için aşağıdaki kurallara uyması gerekiyor:

• Tek bir kenarda en fazla 1 kesik olabilir.
• Bir cihazda ikiden fazla kesik olamaz.
• Portre modda yani cihaz dikey yönlendirmede, Status Bar kadar, kesik yüksekliği kadar olmalıdır.
• Varsayılan olarak, tam ekran veya yatay yönde, tüm kesme alanı letterboxed olmalıdır.

Android ayrıca içeriğin cutout alanı içinde görüntülenip görüntülenmeyeceğini kontrol etmemizi de sağlıyor. Android projemizin içerisinde layoutInDisplayCutoutMode’u aşağıdaki modlardan birine eşitleyebiliriz.

• LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT : İçerik, portre modundayken cutout alanına işlenir, fakat yatay moddayken içerik letterboxed şeklini alır.
• LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES: Pencerenin her zaman ekranın kısa kenarlarındaki DisplayCutout alanlarına uzanmasına izin verir. Pencere asla ekranın uzun kenarlarındaki bir DisplayCutout alanına uzanmaz.

Bu mod genelde fotoğraflar, videolar, haritalar ve oyunlar gibi bazı içerikler için kullanılır.

• LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER : Pencerenin DisplayCutout alanıyla çakışmasına asla izin vermez.

Cutout alanını iOS’ta kontrol etme

iOS 11 ile birlikte viewleri konumlandırırken yeni SafeArea API kullanmamız gerekiyor. Cutout alanını yönetmenin en pratik yolu SafeArea ile kontrol etmek olacaktır. iOS tarafında SafeArea ve cutout tarafında daha fazla detaya buradan ulaşabilirsiniz.

Cutout alanını Flutter ile kontrol etme

Flutter’da tek yapmanız gereken WidgetınızıSafeArea ile sarmak.

Daha detaylı bilgi için aşağıdaki videoyu izleyebilir veya buradan SafeArea sınıf detaylarına bakabilirsiniz.

SafeArea kullanımına örnek vermek gerekirse:

Bu örnek stack overflow sitesinde bulunan Using SafeArea in Flutter başlıklı sorudan alınmıştır. Detaylı incelemek isterseniz buradan ulaşabilirsiniz.

Align(
  alignment: Alignment.topLeft,  // and bottomLeft
  child: Text('My Widget: ...'),
)

SafeArea(
  minimum: const EdgeInsets.all(16.0),
  child: Text('My Widget: ...'),
)

Menteşeli Katlanabilir Ekran (Hinged Foldable Display)

Bu tür cihazlar iki adet ekrana sahiptirler. Bu iki ekran menteşe ile birbirine bağlanır. Bu tür cihazlara örnek vermek gerekirse en iyi örnek Microsoft Surface Duo’dur.

Bu tür cihazlar için dikkat edilmesi gerekenler aşağıda listeledim:

Not: Bu kısımdaki örnekler Microsoft sitesinde bulunan Introduction to dual-screen devices yazısından derlenmiştir. Daha fazla detay için ilgili sayfayı ziyaret edebilirsiniz.

• Nesneleri bir tarafa taşıyın.

Bu nesneler bir diyalog, bildirim, snackbar, action, dropdown menuve bottom sheetolabilir.

• Widgetları veya componentleri kenarlara yapıştırın. Kenarlara göre uyarlayın.

Kullanıcı arayüzü bir grid (ızgara) veya tablo düzenine sahip olduğunda, dikey veya yatay çizgiler ile hizalanırsa, kullanıcının uygulamayı görüntülemesi ve kullanması daha kolay olabilir.

• UI öğelerini yeniden düzenleme

Çift ekranlı cihazlar için optimize etmek için kullanabileceğiniz duyarlı bir düzen tekniği, ekran yönü veya boyutu değiştiğinde içeriğinizi yeniden düzenlemek olacaktır. Aşağıdaki örneğe baktığımızda, cihazın üst kısmında bulunan ListView içerisindeki kutucuklar yeniden düzenlendiğinde GridView ile kullanılmış. Aynı şekilde alt kısımında bulunan ListView içerisindeki ListTile componentler tek tarafa ListView halinde uyarlanmış. Böylelikle componentler daha kullanışlı hale gelmektedir.

Katlanabilir Ekran (Foldable Display)

Samsung, 2019 yılında 500 bin adet katlanabilir cihaz satmış. 2020 yılında 4.5 milyon katlanabilir cihaz satacaklarını düşünmüş. Ancak gerçek rakamlar orijinal hedefin sadece %60'ıydı.“ Sammobile, Success of Samsung’s foldable phones depends a lot on Apple” Daha fazla detay için buraya tıklayın.

Menteşeli Katlanabilir Ekran bölümünde bahsettiğim gibi kurallar çoğunlukla bu tür cihazlarda da geçerlidir. Aynı şekilde burada da uygulama sürekliliği (app continuity) önemli yere sahiptir. Kullanıcıya daha sürükleyici bir deneyim sunar.

App Continuity (Uygulama Sürekliliği)

Katlanabilir cihazda çalışırken, uygulama otomatik olarak bir ekrandan diğerine geçebilir. Harika bir kullanıcı deneyimi sağlamak için, geçişten sonra mevcut görevin sorunsuz bir şekilde devam etmesi çok önemlidir.

Bu durumda sistem tetiklendiğinde UI stateleri kaydetmeli ve değişiklerini düzgün bir şekilde desteklemelidir.

Microsoft 365 Developer Day Tanıtımı

22 Ocak 2020 yılında yazılan blog yazısında çift ekranlı cihazlar için SDK duyurusu yapmıştı. Ayrıca Windows 10X isimli işletim sisteminden bahsetmişti. Paylaştıkları görsele baktığımızda yakınlarda tanıtılan Windows 11'e benzediğini görebiliriz. Yakın gelecekte Windows ile çalışan katlanabilir cihazlar görebiliriz.

Flutter ile geliştirilen uygulamalar, Windows’ta da çalışabilmektedir. Desktop support for Flutter

Foldable Android Emulator Kurulumu

Emulatorleri kurmadan önce, Android geliştirme ortamının kurulu ve güncel olması gerekiyor. Eğer Android Studio yüklü değilse Android Studio Kurulum sayfaya giderek kurulumu yapabilirsiniz.

Microsoft Surface Duo Emulator Kurulumu

Surface Duo Emulator indirme sayfasına giderek emulatoru indiriyoruz. Ben bu aşamada MacOS için kurulumu anlatacağım. Windows ve Debian kurulum için burada ki sayfaya giderek inceleyebilirsiniz. Ayrıca Mac için detaylı bilgiye buradan ulaşabilirsiniz.

1. İndirdikten sonra SurfaceDuoEmulator_ version _.dmg dosyasını açıyoruz.
2. İçerisindeki .jar ve diğer dosyaları Android emulator klasörü içerisinde yeni bir klasöre kopyalıyoruz. Genellikle bu konumda bulunur: /Users/{USER}/Library/Android/sdk
3. Eğer Android SDK konumunu değiştirdiysen buradaki adımları uygulayın.
4. Ardından kopyaladığımız SurfaceDuoEmulator_version klasörünü terminalde açıyoruz.
5. ./run.sh komutunu terminalde çalıştırıyoruz.
6. Emulatorun açılmasını bekliyoruz.

Emulatorun kullanımı hakkında detaylı bilgiye aşağıdaki linkten ulaşabilirsiniz.

Use the Surface Duo emulator - Dual-screen

Android Foldable Emulator Kurulumu

1. Android Studio’yu açıyoruz.
2. Açılan panelden Configure seçeneğine tıklıyoruz ve ardından AVD Manager seçeneğine tıklıyoruz.
3. Açılan Android Virtual Device Manager penceresinde en altta bulunan Create Virtual Device butonuna tıklıyoruz.
4. Açılan Virtual Device Configurationpenceresinde, sol taraftaki kategori alanından Phone seçeneğini seçiyoruz. Sağ taraftaki listenin üzerinde bulunan arama kısmına "Fold"yazdıktan sonra çıkan seçeneklerden istediğimiz cihaza tıklayarak Next butonuna tıklıyoruz.
5. Ardından ayarlarımızı yaptıktan sonra Finish butonuna tıklayarak ekliyoruz.
6. Emulatorümüzü açarak kullanabiliriz.

Flutter Foldable Support

Henüz foldable cihazlar için Flutter’da official bir API bulamadım fakat Microsoft’un bu konuda geliştirmeleri mevcut. Geliştirmeleri aşağıdaki PR linkinden inceleyebilirsiniz.

Foldable support & TwoPane Widget by andreidiaconu · Pull Request #77156 · flutter/flutter

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.

Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻

• Team Kraken Twitter hesabı
• Twitter hesabım

Katlanabilir Mobil Cihazlar ve Cutouts was originally published in Team Kraken on Medium, where people are continuing the conversation by highlighting and responding to this story.

Flutter, Twitter hesabından Engage etkinliğini bu tweet ile haber vermişti:

JavaScript is not available.

Everyone is invited! 🥳 pic.twitter.com/35HWogleoE

💙 Veee o muhteşem gün geldi çattı. Flutter Engage etkinliğinde tanıtılan heyecan verici duyuruları ve yenilikleri, Türkçe olarak sizlere sunmak için, etkinliğin sona ermesiyle birlikte Flutter Türkiye olarak bu yazıyı yazmaya karar verdik.

Not: Bu yazı Muhammet ÖMER ve Adem Furkan ÖZCAN tarafından yazılmıştır. What’s New in Flutter 2 yazısından derlenmiştir.

Yazıya başlamadan önce, sizlere Flutter ile yazılmış çok tatlı bir websitesi paylaşmak istiyoruz. Karşınızda Dashatar…

Engage: Dashatar Nedir?

Dashatar, etkinliğe özel olarak Flutter ile yapılmış olan Dash Avatar oluşturmaya yarayan bir websitesidir. Aşağıdaki linke veya buraya tıklayarak kendi dijital Dash’inizi oluşturabilirsiniz.

Flutter Engage - March 3rd

Flutter 2'deki Yenilikler

Bugün, Flutter’ın yeni versiyonu olan Flutter 2 tanıtıldı. Flutter 2 sürümüyle birlikte artık sadece mobil framework olmaktan çıkıyor. Flutter 2 versiyonu ile birlikte gelen yenilikleri aşağıya özetledik:

• Flutter web artık stabil.
• Flutter desktop; Windows, MacOS ve Linux erken erişim ile stabil.
• Google Mobile Ads, açık beta versiyonuna geçti.
• Dart 2.12 versiyonu duyuruldu.
• Yeni iOS widgetları duyuruldu.
• Yeni widgetlar olan Autocomplete ve ScaffoldMessenger duyuruldu.
• Yeni Flutter Tool’ları duyuruldu.
• Flutter 1.22 versiyonun çıktığı Eylül ayından itibaren, 5807 issue kapatıldı.
• Firebase paketleri Null-safety için güncellendi.

• Flutter ile geliştirilen 150.000'den fazla uygulama, uygulama store’larında yayınlandı.

• Flutter, artık katlanabilir (Foldable) telefonları destekliyor. Microsoft bu konuda Flutter’a katkıda bulunuyor. Announcing Flutter support for foldable devices isimli yazıdan detaylara erişebilirsiniz.
• Flutter 2.0 gömülü sistemleri (embedded systems) destekliyor. Toyota, araçları için Flutter ile uygulamalar geliştiriyor.

Flutter Web

• Flutter web artık stable versiyonda.
• DartPad Flutter Web ile geliştirildi.
• Büyük performans iyileştirmeleri yapıldı.
• Flutter 2, PWA uygulamalarını destekliyor.

Daha detaylı Flutter web hakkında bilgi almak isterseniz Flutter’ın web destek blog gönderisine göz atabilirsiniz.

• Flutter Folio Showcase
• Flutter Plasma
• iRobot Coding

Flutter Desktop

• Flutter desktop; Windows, MacOS ve Linux erken erişim ile stabil.
• Flutter, Ubuntu’nun gelecek uygulamaları için varsayılan olarak tercih edilecek.

JavaScript is not available.

🤩 Flutter is the default choice for future @ubuntu apps.@kenvandine joins us at #FlutterEngage to tell you about some of @canonical's contributions to Flutter at #FlutterEngage. On now 👉 https://t.co/T9025C5NCV pic.twitter.com/xVzwIZSCIt

• Ubuntu Installer uygulaması, Flutter ile yeniden geliştirildi.

Dart 2.12

• Null safety artık stable versiyonunda.
• Dart FFI artık stable versiyonunda.

Daha detaylı Dart 2.12 hakkında bilgi almak isterseniz Announcing Dart 2.12 gönderisine göz atabilirsiniz.

Flutter Tool

Flutter Fix

Flutter 2 ile birlikte sunulan Flutter Fix aracı, kullanımdan kaldırılmış olanları otomatik olarak temizlemeye yardımcı olmaktadır.

Flutter Fix

Flutter DevTools

Flutter DevTools aracı, artık Android Studio, IntelliJ ve Visual Studio Code’da destekleniyor. Örneğin overflow hataları aldığınızda, DevTools aracına yönlendirerek sorunu düzeltmek için seçenek sunuyor.

DevTools

Flutter projenizde kullandığınız paketlerin, Flutter sürümüzle uyumlu olup olmadığını pub.green’den kontrol edebilirsiniz.

• Check pub.dev package compatibility with your Flutter version
• What’s New in Flutter 2.0

Yayında bulunun oturumları Türkçe olarak izlemek isterseniz, 5 Mart Cuma günü olacak olan yayına aşağıdaki linkten katılabilirsiniz.

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederiz, faydalı olması dileğiyle.

Bize bu adreslerden ulaşabilirsiniz:

• Muhammet ÖMER Twitter hesabından
• Adem Furkan ÖZCAN Twitter hesabından

Flutter Engage Özeti was originally published in Flutter Türkiye on Medium, where people are continuing the conversation by highlighting and responding to this story.

Herkese tekrardan merhaba, Clean Code serimizin ilk yazısını yaklaşık 8 ay önce oluşturmuştum. Her ne kadar kısa gibi gözüksede bu geçen sürede kendimi daha da geliştirdim ve biraz daha temiz kod yazmayı öğrendim. Bu bilgileri sizlere de aktarmak istedim. Bir önceki yazıya nazaran elbette yenilikler mevcut. Bu yeniliklerden kısaca bahsedeceğim.

Serinin ilk yazısı olan Flutter: Clean Code’u buraya tıklayarak okuyabilirsiniz.

Hızlıca bahsedeceğim konu başlıklarına bakalım :

• Singleton Design Pattern
• Localization (No Static Strings)
• Part of Pages
• Extensions

Singleton Design Pattern

Yazdığımız kodda tanımladığımız değişkenler, nesneler ve benzeri değerler RAM’de yani cihazın belleğinde yer kaplamaktadır. Çoğu zaman değişkenleri fonksiyonlar içerisinde kullanıp, fonksiyonda işimiz bittiği zaman otomatik olarak yok olduğunu biliyoruz.

Fakat bazı değişkenler, nesneleri uygulamanın tamamında kullanıyoruz ve her birisi için tek tek, ayrı ayrı oluşturarak istekte bulunuyoruz. Örnek vermek gerekirse uygulamamızın teması (Text Theme, Icon Theme…)veya Database için oluşturduğumuz bağlantı…

Singleton Design Pattern ile birlikte bu yapıyı, tek bir örnek alarak kullanılırız. Böylelikle uygulama çalıştığı müddetçe sadece tek bir örnek oluşur. İlk kez çağırıldıklarında tek sefer oluşturulurlar.

Dart’ta nasıl kullanıldığına hep birlikte bakalım.

Yukarıdaki örneği incelediğimizde, bir sınıfımız mevcut ve bu sınıf içerisinde bir adet static olarak oluşturulmuş bir instance var. Bu sınıf içerisindeki cancel veya search değişkenine erişmek istersek aşağıdaki hatayı alırız.

Bu hatanın sebebi ise, instance kullanmadan cancel değişkenine erişmeye çalışmamızdan kaynaklanıyor. Yani cancel artık statik değil, statik olan instance ögesinin içerisinde bulunmakta.

Singleton tasarım deseni hakkında daha detaylı araştırmanızı tavsiye ederim. Stackoverflow’da gördüğüm sorunun altında faydalı cevaplara erişebilirsiniz. Okumak için: How do you build a Singleton in Dart?

Localization (No Static Strings)

Bir projeye başlarken genelde kullanıcı arayüzü (UI) tasarımı hazır halde olur. Geliştirici hazır olan tasarıma bakarak projeyi geliştirir. Proje kodlanırken dikkat edilmesi gereken noktalardan bir tanesi ise kullanıcı arayüzdenki kelimeler, cümleler yani kısaca Stringler statik olarak yazılmamalıdır.

Basit bir sebep ile örneklendirelim. Örneğin bir projede sadece Türkçe dili bulunsun ve Stringler statik olarak verilmiş olsun. İlerleyen zamanlarda ek olarak diğer diller eklenmek istendiğinde ise tek tek bu statik kelimeleri, cümleleri bulup çeviri için düzenlemeniz gerekecektir. Bu durumu projeye başlarken localization ekleyerek çözebiliriz. Böylelikle daha temiz kod yazılmış olur. Geliştirici daha az zaman harcamış olur.

Peki projeye başlarken ne yapmalıyız? Ben bir projeye başlarken bellirli kütüphaneleri ekliyorum. Localization için easy_localization kütüphanesini projeye ekliyorum. Ardından assets klasör dizinine hangi dilde geliştiriyor isem o dile ait bir json dosyasını oluşturuyorum.

assets
└── language
    ├── {languageCode}.json                  // Sadece dil kodu
    └── {languageCode}-{countryCode}.json    // Ya da full yerel kod

Ardından gerekli olan ayarları yaptıktan sonra projeyi geliştirmeye devam ediyorum. Dil eklemek istediğim zaman yapmam gereken tek bir şey kalıyor, yukarıda göstermiş olduğum klasör dizinine o dile ait bir json dosyayı oluşturuyorum. Son olarak çevirilmiş metinleri eklemek kalıyor.

Part of Pages

Çoğu Dart/Flutter geliştiricisi part kavramını kullanmaktan kaçınırlar. Genellikle bir sayfaya ait kodları tek sayfada yazmayı daha uygundur görürler. Çünkü ileride koda bakım yapılmak istendiğinde, kodun daha kolay bulunacağını düşünürler.

Bir sayfadaki kodların bir bölümünü ayırmak için part kavramını kullanmayı tercih ederseniz, hangi sayfaya ait olduğunu belirtmeniz gerekiyor. Yani özetlemek istersek, part ve part of kavramını kesinlikle kullanmanız gerekmektedir.

Part : Temel sayfaya yazılması gerekmektedir.
Part of : Parçası olunan sayfaya yazılması gerekmektedir.

DİKKAT : Bu parçalamayı kullandığınızda aradığınız kodların bulunmasında karmaşıklığa neden olabilir. Her zaman ve her yerde kullanmayınız.

Anlaşılması oldukça güç olan bir kavramı örnekle açıklamaya çalışalım. Bir giriş sayfamız olduğunu düşünelim. Giriş sayfamızın içerisinde çok fazla component olduğunu düşünelim. Kodları yazdıkça Login Form kod bloklarımızın kaybolduğunu ve bulmakta zorlandığınızı farkederseniz işte part of pages kullanmanın yeridir. Kodlarla birlikte daha iyi anlaşılacaktır. Hadi kodlayalım!

Giriş sayfamızın bu şekilde olduğunu hayal edelim. Yorum satırlarının olduğu yerlerde kod olduğunu varsayalım. Parçalamak istediğimiz zaman yapmamız gereken ilk adım 3. satırda görüldüğü üzere parçalanacak sayfaya part kavramını eklemek. Bunu ekledikten sonra bir hata alacaksınız fakat endişelenmeyin!

Bu hatada parçasını bulamadığını söylüyor. Bizden parçası olan sayfaya da part of kavramının eklenmesini istiyor. Diğer sayfaya da aşağıdaki örnekteki gibi ekledikten sonra hata düzelecektir.

Extensions

Extension’lar, Dart diline 2.7 versiyonuyla birlikte geldi. Extension’ları özet geçmek gerekirse varolan veya özel olarak oluşturduğumuz, belirlediğimiz tiplere özgü, yeni özellikler eklememize yaramaktadır. Kendimizde bir extension yazarak, projemizdeki geliştirme hızımızı gözle görülebilir derecede artırabiliriz.

Diğer yazılarımın birinde extension’lar hakkında yazı yazmıştım. Kendimi tekrarlamamak açısından o yazıyı yönlendirmemi mazur görün. Mobil Dünyada Extension yazımı buraya tıklayarak okuyabilirsiniz.

Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle.

Bana bu adreslerden ulaşabilirsiniz:

• Twitter hesabımdan
• LinkedIn hesabımdan

Ayrıca GitHub hesabıma buradan ulaşabilirsiniz.

Flutter: Clean Code 2 was originally published in Flutter Türkiye on Medium, where people are continuing the conversation by highlighting and responding to this story.

Herkese merhaba 👋 Bu yazımda sizlere Flutter’da, fotoğraf çekimi için telefonunuzun native kamera uygulamasına nasıl yönlendirebileceğinizi veya galerinizden nasıl fotoğraf seçebileceğinizi göstereceğim.

Projenizde, kamera işlemlerini çok yoğun olarak kullanmıyorsanız Flutter’ın camera eklentisini kullanmanızı önermiyorum. Henüz hazır olmadığını düşünüyorum. Çok fazla özellik sunamıyor ne yazık ki. Bu özelliklere örnek vermek gerekirse telefonunuzun flaş özelliği dahil değil, otomatik focus veya tıklanıldığında focus özelliği mevcut değil. Zoom özelliği de bulunmuyor. Bu gelişmeleri takip etmek isterseniz buraya tıklayarak ilgili alana ulaşabilirsiniz.

Yukarıda bir ifade kullandım “…kamera işlemlerini çok yoğun olarak kullanmıyorsanız…” burada yoğun işleme örnek vermek gerekirse Instagram uygulamasında bulunan kamera alanını hepimiz az çok görmüş veya kullanmışızdır. Burada renk efektleri, boomerang özelliği ve benzeri bir çok özellik mevcut.

Bizim tek isteğimiz fotoğraf çekip yüklemek ise image_picker kütüphanesini kullanarak telefonumuzda bulunan kamera uygulamasına yönlendirerek fotoğrafı çektikten sonra yükleyebiliriz. Evet bu kadar basit.

Haydi Başlayalım 🚀

Projemizde bulunan pubspec.yaml dosyamızı açalım. Ardından dependencies alanına image_picker isimli kütüphanemizi ekleyelim.

Güncel sürümü için lütfen image_picker kütüphanesinin bulunduğu websiteyi ziyaret ediniz.

Dikkat etmemiz gereken birkaç husus bulunuyor.

• Android :

Android API sürümü 29+ ise projemiz içerisindeki AndroidManifest.xml dosyamızda <application> etiketi içerisine android:requestLegacyExternalStorage="true" eklenmelidir.

Daha fazla detay için Storage updates in Android 11 dokümanını inceleyebilirsiniz.

• iOS :

iOS cihazları için bu ifadeleri projemizde bulunan ios > Runner > Info.plist dosyamıza eklememiz gerekmektedir.

<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string><key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string><key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>

UI tarafında geliştirmelerimizi tamamlıyoruz.

Örnek olması açısından hızlı bir tasarım oluşturdum.

Fonksiyonu Oluşturalım 📷

Projemize değişken olarak aşağıdaki satırı ekleyelim.

onImageButtonPressed Fonksiyonu

Bu fonksiyonumuz ImageSource tipinde bir parametre içeriyor. Bu parametre ise Enum cinsinden oluşmaktadır. İki seçenek bulunmakta:

• camera: Cihazın kamerasını açarak kullanıcının yeni bir fotoğraf çekmesine izin verir.
• gallery: Cihazın fotoğraf galerisini açarak kullanıcının bir fotoğraf seçmesine izin verir.

getImage Fonksiyonu

Bu fonksiyonumuz ile birlikte kamera ile çekilen veya galeriden seçilen fotoğrafı elde etmemizi sağlıyor.

Bu fonksiyon içerisinde yapmak istediğimiz işlemleri gerçekleştirebiliriz. Örneğin PickedFile tipinde bir liste oluşturduktan sonra seçilen fotoğrafları bu listeye ekleyebiliriz.

Son olarak oluşturduğumuz fonksiyonu, butonlara bağlandıktan sonra kullanabiliriz.

Sonuç 🎉

Uygulamamız aşağıdaki gibi sonuç vermektedir.

Buraya kadar zahmet göstererek, yazıyı okuyarak zaman ayırdığınız ve sabırla sonuna kadar geldiğiniz için teşekkür ederim, umarım faydalı olmuştur.

Bana aşağıdaki adreslerden ulaşabilirsiniz:

• Twitter hesabımdan
• LinkedIn hesabımdan

Flutter: Native Kamera Yönlendirme ve Galeriden Fotoğraf Seçme was originally published in HardwareAndro on Medium, where people are continuing the conversation by highlighting and responding to this story.

Merhabaa! 👋🏻

Yepyeni bir seri ile karşınızdayız. Bu serimizde, GitHub hesabımızda bulunan “Ezan Vakti” isimli projeyi adım adım nasıl geliştirdiğimizi anlatacağım.

Uygulama Hakkında Bilgi 📲🕌

Uygulamamız,

• kullanıcı tarafından seçilen il ve ilçenin namaz vakitleri göstermektedir,
• namaz vakitlerinden önce bildirim göndermektedir
• ve ayrıca kullanıcı dilerse tema seçimi ve dil seçimi yapabilmektedir.

Sıkı tutunun başlıyoruz!

Tasarım ve Kodlama Ortamı✒️💻

- UI/UX Tasarım Aracı Kurulumu ✒️

Uygulama tasarımını gerçekleştirmek için bir uygulamaya ihtiyacımız var. Bizim birkaç önerimiz var : Adobe XD ve Figma Biz tasarımımızı Adobe XD üzerinde yapacağız.

- Kod Editör Kurulumu 💻

Uygulamayı kodlamak için, Flutter’ın desteklendiği kod editörlerinden birini kullanmamız gerekmektedir. Biz uygulamayı kodlarken VS Code isimli editörü kullanacağız. Siz de bize eşlik etmek istiyorsanız ve bilgisayarınızda VS Code yüklü değilse buraya tıklayarak indirebilirsiniz.

- Flutter Kurulumu 💙

Samimi olmak gerekirse, bu kurulumu en iyi Flutter’ın sitesindeki yönlendirmeler ile yapabilirsiniz. Henüz dil destekleri arasında Türkçe bulunmuyor. Fakat üzülmeyin takıldığınız yer olursa Flutter Türkiye Telegram üzerinden yardım alabilirsiniz.

Uygulama Tasarımı✒️👨🏻‍🎨

Uygulamayı tasarlamadan önce, kağıtta hızlı ve basit bir mockup hazırladım. Artık az çok neler gerektiğini biliyoruz.

Tasarımımızı Material Design prensiplerine göre yapıyoruz.

Material Design nedir?

Materyal Tasarım, tasarımla ilgili en iyi pratikleri, genel olarak benimsenmiş kuralları ve herhangi bir cihazda evinizdeymiş gibi rahat hissetmenizi sağlayacak etkileyici uygulamalar oluşturmanıza yardımcı olacak görsel öğeleri içerir. [Materyal Tasarım, Google Developers]

Şimdi Adobe XD’de tasarlamaya başlayabiliriz. (Renk paleti ve logo seçimi daha önceden yapılmıştır.)

- Başlatma Ekranı (Splash Screen) ⏰

Splash screen, bir uygulama arka planda açılırken kullanıcıya boş bir ekran göstermek yerine hazırlanan tasarımını kullanarak ana sayfaya geçiş yapmamızı sağlayan ekrandır. Dikkat etmemiz gereken nokta ise, başlatma ekranında uzun bir yükleme süresi kullanıcıların duygularına negatif bir etki yansıtabilir. Bu durum kullanıcı deneyimi ile doğru orantılıdır. Materyal Tasarım’da verilen tavsiyelere bakıldığında ise marka logosu veya uygulamayı temsil eden bir görsel eklemek en doğru seçimdir.

Böylelikle seçimimiz bu şekilde olacaktır:

- Bilgilendirme Ekranı (Onboarding Screen)

Bu kısımda aklımıza birkaç soru işareti gelebilir. Bu ekran nedir? Bu ekrana neden ihtiyacımız var?

Bu ekran, uygulama kullanıcısıyla ilk temas ettiği noktadır. Kullanıcıya “Hoş Geldiniz” demek için bir fırsat da diyebiliriz 🎉. Bu nedenle uygulama üzerinde harika bir izlenim bırakmak için gereklidir ve oldukça basit hale getirmek önemli bir yere sahiptir. Bu ekran ile birlikte kullanıcıya, uygulamanın işlevleri hakkında bilgiler verebilirsiniz.

Bu ekranı, uygulamayı ilk kez kullanan kullanıcılarda göstermelisiniz. Geri dönen kullanıcılara göstermemelisiniz. Yani uygulama kapandıktan sonra geri açılınca hemen ana sayfaya yönlendirilmelidir.

Bilgilendirme ekranı hakkında detaylı bilgi için buraya tıklayın.

Şimdi sıra bu ekranı tasarlamakta. Peki kullanıcıya ne tür bilgiler verebiliriz? Kullanıcı uygulamayı açtıktan sonra konum bilgilerini manuel bir şekilde girmesi gerekmektedir. Bu durumdan bahsedebiliriz. Diğer bir husus ise kullanıcıyı namaz saatlerinden bildirim alacağını haberdar edebiliriz.

- Ana Sayfa (Home Screen)

Ana sayfa, bir uygulamanın en önemli bir parçasıdır. Çünkü kullanıcıların en fazla vakit geçirdiği sayfadır. Genellikle ana sayfada, kullanıcı diğer sayfalara yapacağı yolculukların başlangıç noktası olduğundan gezinme bileşenleri (components) içerir. Materyal tasarımda bu bileşenin ismi Bottom Navigation Bar olarak adlandırılmaktır.

Material.io Bottom Navigation

Daha öncesinde çizdiğimiz mockup’ta neler olacağını belirtmiştik. Materyal tasarım prensiplerine göre tasarladığımız zaman ortaya bu şekilde bir sonuç çıkmaktadır:

App Bar geçerli ekranla ilgili bilgileri ve eylemleri görüntüler.

App Bar bileşenimizde bilgi olarak, uygulamanın ismini ve logosunu ekleyebiliriz. Materyal tasarım prensiplerine göre tasarladığımız zaman ortaya bu şekilde bir sonuç çıkmaktadır:

Uygulamanın Body içerisinde sırasıyla bilgiler bulunduracağız. Bu bilgiler, bulunduğu günün tarihi miladi ve hicri takvime göre olabilir. Ramazan ayında bulunduğumuz için iftara kalan süreyi gösterebilir. En önemlisi ise kullanıcının seçimini yaptığı şehire göre namaz vakitlerinin bulunduğu bir alan olabilir. Bu bilgileri ayrı ayrı kutucuklar halinde hazırladığımız zaman ortaya bu şekilde bir sonuç çıkmaktadır:

En altta bulunan gezinme bileşenimiz (Bottom Navigation Bar) içerisinde bulunan eylem butonlarının işlevlerini tasarlarken, farklı bir sayfaya yönlendirme ihtiyacımız olmadığını ve aynı sayfada daha verimli olacağını düşünüyorum. Burda kullanılabilecek en doğru bileşen (component) “Dialog” olduğuna hepimizin hemfikir olduğumuzu düşünüyorum. Çünkü bu bileşen kullanıcı deneyimi açısından bakıldığında, kullanıcının dikkatini odaklamaktadır. Böylelikle seçimimiz bu şekilde olacaktır:

Veee böylelikle tasarımımızı tamamlamış olduk. Şimdi kodlamaya başlayabiliriz.

Uygulama Kodlama💻💙

Tasarımımız hazır olduğuna göre kodlamaya başlayabiliriz.

Uygulamanın kodlandığı Flutter sürümü “Flutter: 1.18.0–11.1pre” ve kanalı “beta”dır.

Beta kanalına, “Terminal”den flutter channel beta komutunu yazarak geçeebilirsiniz. flutter upgrade komutunu girmeyi unutmayın. [Upgrading Flutter]

- Projeyi Oluşturalım🆕

Eğer Flutter kurulumunu gerçekleştirdiyseniz, bu aşamada hızlı ve basit bir şekilde proje oluşturabilirsiniz. Proje oluşturmayı bilmiyorsanız buraya tıklayarak öğrenebilirsiniz.

Projeyi oluşturmak istediğimiz klasörü açtık ve Shift+Mouse Sağ Tık yaptıktan sonra Terminali açıyoruz. flutter create prayertimes komutunu giriyoruz. Projemiz oluşturuluyor. Ardından cd prayertimes komutu ile klasör içine giriyoruz ve code . komutu ile Visual Studio Code kod editöründe projeyi açıyoruz.

- Klasör Hiyerarşisini Düzenleyelim 📁

Bir önceki Flutter: Clean Code yazımda daha detaylı bahsetmiştim. Bu projemizde şimdilik bu klasörleri oluşturmamız yeterlidir.

- Arayüzdeki Ögeleri Ekleyelim🖌️📝

Tasarımda kullandığımız renkleri, yazıları, ikonları ve kütüphaneleri ekliyoruz.

- Logoyu Ekleyelim 🕌

Projemizde logonun temaya uygun renk seçilebilmesi ve boyutunun istenildiği şekilde düzenlebilmesi için svg olarak kaydetmiştik. Logomuzu custom widget hale getirerek bu özellikleri verebiliriz. Projemizde bulunan lib > ui > widgets klasörüne appLogo.dart dosyasını oluşturalım.

- Temayı Düzenleyelim🎨

Koyu ve açık mod temalarımızı oluşturmak için öncelikle yandaki görselde görüldüğü gibi lib > UI > Theme klasörümüze dosyalarımızı oluşturuyoruz.

Örnek olarak koyu mod temamızı oluşturmayı göstereceğim. Açık moddan tek farkı renkler olacaktır.

final themeDarkData = ThemeData(); isimli bir ThemeData değişkeni oluşturuyoruz. Ardından property olarak brightness: Brightness.dark ekliyoruz. Açık mod olsaydı Brightness.light olarak eklememiz yeterli olacaktır. Yazılar için tema eklerken, tasarımda kullandığımız Google Open Sans fontunu kullanabilmemiz için google_fonts paketini kurmamız gerekiyor ve geriye sadece renkleri ve yazı temalarını eklemek kalıyor.

Projemizdeki pubspec.yaml dosyası içerisinden dependencies: alanına google_fonts: ^1.1.0eklememiz gerekmektedir. (Sürüm değişkenlik gösterebilir.)

Oluşturduğumuz temaları uygulamamıza şimdilik sadece tanımlıyoruz. Projemizdeki main.dart dosyası içerisindeki MaterialApp widget’ımızın theme ve darkTheme property’lerine ekliyoruz.

- Splash Ekranı Düzenleyelim⏰

Splash ekranın amacından daha önce bahsetmiştik. Bu ekranı native bir şekilde düzenlemek için Android ve iOS tarafına da ayrı ayrı müdahale etmemiz gerekiyor.

Android için:

Projemizde bulunan android > app > src > main > res > values klasörüne colors.xml dosyasını oluşturalım. Ardından aşağıda bulunan kodu yapıştıralım. (Dilerseniz hex kodu ile yazılı olan rengi değiştirebilirsiniz.)

Adım 2) Projemizde bulunan android > app > src > main > res > drawable > launch_background.xml dosyasını açalım.

Dosyayı açtıktan sonra <layer-list> içerisinde bulunan <item android:drawable="@android:color/white" /> satırı <item android:drawable=”@color/splash_color” /> ile değiştirelim. Bunu yapma amacımız, uygulama açılırken gösterilen beyaz sayfa yerine, dilediğimiz rengi gösterebilmemizdir.

Dilersek görselde ekleyebiliriz. Görsel eklemek istemiyorsanız, adım 4'e geçiniz.

Adım 3) Projemizde bulunan android > app > src > main > res > drawable klasörüne logo.png dosyamızı ekleyelim. Ardından launch_background.xml dosyamızı açalım. Adım 2'de eklediğimiz <item> elementinin altına, aşağıda bulunan kodu ekleyelim. (Dikkat! drawable/logo yazma sebebimiz dosyanın isminin logo olmasından dolayıdır.)

Vee böylelikle Android native splash ekranımızı oluşturmuş olduk.

iOS için şimdilik bu kısmı ne yazık ki gösteremiyorum. Maddi durumlardan dolayı henüz kendime Mac cihaz satın alamadım.

- Onboarding Ekranı Hazırlayalım

Adım 1) Projemizde bulunan lib > screens klasörüne, kodu yazacağımız onboarding_page.dart isimli dosyayı oluşturalım.

Adım 2) StatefulWidget oluşturalım.

Adım 3) main.dart dosyamıza geri dönelim ve şimdilik Onboarding Page dosyamıza yönlendirelim.

Adım 4) onboarding_page.dart dosyamıza geri dönelim. Tasarımda bulunan arkaplan gölgelendirmesini oluşturalım. Sayfanın tamamını kaplayacağından dolayı Container içerisindeheight ve width özelliklerinedouble.infinity değerini verelim. Ardından decoration özelliği içerisine gradient ekleyelim. Bu gölgelendirme dairesel olmasından dolayı bizim için RadialGradient en verimli sonucu verecektir. Değerlerimizi girdikten sonra sonuç bu şekilde olacaktır.

Adım 5) Tasarımımıza baktığımız zaman sırasıyla container, indicator ve buton görmekteyiz. Düşündüğümüz zaman bunları Columnwidget içerisine alarak sıralayabiliriz. Öncelikle bilgilendirme kutumuzu oluşturalım. Container içerisinde PageView ekleyelim. Bunu eklememizde en önemli faktör hem parmaklarımız ile kutucukları kaydırabilmemiz hem de aynı boyutta bir yapı oluşturmamıza olanak sağlamasıdır. PageView içerisinde özellik olarak physics: ClampingScrollPhysics() eklemeliyiz. Bu aynı zamanda belirlediğimiz sınırın dışına çıkmasını engellemektedir. PageView içerisine controller veonPageChanged özelliklerini de ekledikten sonra kutu içerisinde gerekli olan bilgilerimizi tutacağımız model sınıfımızı oluşturabiliriz.

PageController ve anlık sayfayı gösterecek olan değişkeni eklemeyi unutmayın.

Adım 6) Projemizde bulunan lib > models klasörüne, model sınıfımızı yazacağımız onboarding_model.dart isimli dosyayı oluşturalım.

Adım 7) Tasarımımızdan gördüğümüz kadarıyla bilgilendirme kutucuklarımız; başlık, açıklama ve ikon barındırmaktadır ve geriye kalan her şey aynı olduğu için bu bilgilerden sınıf oluşturmamız yeterli olacaktır.

Adım 8) Bilgilerimizin bulunduğu nesneleri tutacağımız listemizi oluşturalım.

Adım 9) Oluşturduğumuz modeli sayfa içerisine implemente ediyoruz.

Adım 10) Tasarımda bulunan componentlere baktığımızda öncelikli olarak iki adet ana componentimiz var. Kırmızı renk ile işaretli olan componente baktığımızda Container içerisinde PageView ve onun içerisinde Column ardından Custom Widget , Text ve Text görmekteyiz. Bu tasarım yapısını oluşturduktan sonra onboarding ekranımızı tamamlamış oluyoruz.

Onboarding ekranına ait kodlara buradan ulaşabilirsiniz.

Biraz uzun olmasından dolayı ve okunaklılığı artırmak amacıyla, izninizle yazıyı burada “Part 1” olarak tamamlamak istiyorum. Çok yakında “Part 2” de görüşmek üzere.

Yazıyı okuyarak zaman ayırdığınız ve sabırla sonuna kadar geldiğiniz için teşekkür ederim, umarım faydalı olmuştur.

Ve ayrıca teşekkür ederim:

Flutter Türkiye

Adem ile birlikte geliştirdiğimiz açık kaynak projeye buradan ulaşabilir ve bize destek verebilirsiniz :

Not: Proje; sınav, yoğun çalışma temposu ve benzeri nedenlerden dolayı henüz tamamlanamamıştır.

flutterturkey/prayer-times

Bu yazımı gözden geçirip geri bildirim verenlere özel teşekkür etmek istiyorum.

• Muhammed Salih Guler
• Beyza Sunay Güler
• Zeynep Inkaya

Bana aşağıdaki adreslerden ulaşabilirsiniz:

• Flutter Türkiye Slack Kanalı
• Twitter hesabımdan
• LinkedIn hesabımdan

Baştan Sona Flutter Projesi: Ezan Vakti (Part 1) was originally published in Flutter Türkiye on Medium, where people are continuing the conversation by highlighting and responding to this story.