Flutter ile WhatsApp arayüzünü tasarlayalım

Alper Tokcan
Oct 20 · 3 min read

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.

Yazının orijinal haline bu bağlantıdan ulaşabilirsiniz.


‘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.

FAB eklenmiş haldeki uygulamamız

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

Flutter Türkiye

Flutter SDK için Türkçe ve İngilizce kaynaklarin yayinlayan topluluk

Thanks to Beyza Sunay Güler

Alper Tokcan

Written by

Flutter, .Net, Vue. Twitter: @DevAlper

Flutter Türkiye

Flutter SDK için Türkçe ve İngilizce kaynaklarin yayinlayan topluluk

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade