Flutter ile WhatsApp arayüzünü tasarlayalım
Bu yazı ilk olarak Deven Joshi tarafından 6 temmuz 2018 tarihinde yayınlanmıştır. Flutter Türkiye için gerekli izinler alınarak Türkçe’ye çevrilmiştir.
‘Flutter ile’ serisi popüler uygulamaların arayüzlerindeki bazı parçaları Flutter kullanarak yeniden yazmayı hedeflemektedir.
Bu makalede popüler mesajlaşma uygulaması olan Whatsapp’ın Android’teki anasayfasını tasarlayacağız. Mesaj gönderip alma işlevlerine değil tamamen arayüze odaklanacağız.
Genel bakış
Whatsapp ana sayfası aşağıdaki bölümlerden oluşur;
- Arama ve menü butonları olan bir AppBar.
- AppBar’ın hemen altında 4 adet sekme.
- Durum paylaşmak için fotoğraf çekme sekmesi.
- Birden fazla işlev gerçekleştiren bir FloatingActionButton.
- Sohbetler sekmesi.
- Durum sekmesi.
- Aramalar sekmesi.
İlk Adımlar
whatsapp_ui isminde bir proje oluşturup sadece default AppBar ve altında boş bir ekran kalacak hale getirelim.
AppBar’ın Tasarımı
AppBar’ı aşağıdaki şekilde değiştirelim.
Yaptığımız değişiklik sonucunda AppBar’ımız aşağıdaki görünüşe gelecektir.
Sekmeler
Sekme özelliği AppBar’ın çok basit bir parçasıdır ve Flutter bu özelliği hayata geçirmemizde bize çok yardımcı olur.
AppBar’ın sekmelerimizi tanımlamamızı sağlayan ‘bottom’ isminde bir property’si vardır.
Sekme geçişlerini algılamak ve ona göre içerik göstermek için bir TabController oluşturmalıyız.
Bu işlem bir hata oluşturacaktır. TabController oluşturulurken “vsync” değeri ister. Bu değer animasyonlarda performansı iyileştirmek için gereklidir. Vsync değerine mevcut State’imizi atayabilmek için TickerProvider türünden olması gerekmektedir.
TickerProvider’ın detaylarına bu yazıda girmeyeceğim. “_MyHomePageState” class’ımızı TickerProvidera dönüştürmek çok basit. Class tanımlamasına aşağıdaki gibi with TickerProviderStateMixin eklemeniz yeterli.
Şimdi TabBar’ın “controller” property’sine oluşturduğumuz TabController’ı atayalım.
TabBar da seçilen tab değiştiğinde, TabController’ın içersindeki index değeri değişir. Seçili index değerine sahip sekmeyi göstermek için ‘TabBarView’ kullanırız.
Şimdi sayfamızın body değeri için bir TabBarView oluşturalım.
TabBarView’ın children alanına verdiğimiz widget’lar her bir sekmenin içeriğine karşılık gelir.
FloatingActionButton (FAB)
Whatsapp’ta ki FAB tuşu içinde bulunduğunuz sekmeye göre değişir.
Öncelikle sayfamızın Scaffold widget’ına FAB’ımızı ekleyelim.
Yukarıda oluşturduğumuz FAB’ın child property’sine “fabIcon” değişkenini atadık. Seklemeler arasında geçiş yapıldığında bu değişkeni güncelleyerek FAB’ın içerisindeki ikonu değiştirmiş olacağız.
Şimdi bu değişkeni tanımlayalım.
TabController’daki değişiklikleri dinleyip seçilen sayfaya göre bir ikonu oluşturduğumuz fabIcon değişkenine atayalım.
Sohbetler Sekmesi
Sohbetler sayfasında mesajların bir listesi bulunur. Mesajların listesini oluşturmak için ListView.builder() kullanabiliriz.
Sohbet sayfasındaki bir mesaja detaylı bakalım.
En dıştaki widget bir Row. İçinde bir adet resim sağında ise bir Column var.
Column’un içerisinde ilk eleman bir Row ikinci eleman da bir Icon ve bir Text’den oluşan bir row. İlk eleman da 2 adet Text’den oluşan bir Row
Mesajları gösteren arayüzün veri modelini oluşturalım.
Şimdilik işimizi basitleştirmek için profil fotoğrafını atlıyoruz. Mesajları göstermek için TabBarView’ın 2. elemanını aşağıdaki kod ile değiştiriyoruz.
Bu kod her mesaj için bir adet satır oluşturuyor. itemBuilder fonksiyonunun ilk satırında ChatItemModel chatItem = ChatHelper.getChatItem(position); mevcut pozisyon için gelecek itemi bir helper class içerisinden çekiyor. Helper classın kodları aşağıdadır.
Listeyi oluşturduktan sonraki görüntü:
Diğer sayfalar içinde aynı yöntemleri izleyerek tasarımlarını çabucak oluşturabiliriz. Diğer sayfaların tamamlanmış hali ile birlikte tüm örneğin bitmiş hali GitHub’ta paylaşılmıştır.
GitHub linki : https://github.com/deven98/WhatsappFlutter
Okuduğunuz için teşekkürler. Flutter’da arayüz tasarımının yapılmasını istediğiniz bir uygulama varsa yorumlarda belirtebilirsiniz. Eğer yazıyı beğendiyseniz birkaç alkış bırakmayı unutmayın. Bir sonraki yazıda görüşmek üzere.
Çeviri: Alper Tokcan
Twitter: https://twitter.com/DevAlper
GitHub: https://github.com/m6t
