Twitter Clone P-2

Merve Arslan
Ben Flutter’ı Seçtim🦄
2 min readApr 24, 2019

--

Twitter Clone P-1'de Twitter ekranının temel arayüzünü gerçekleştirdik. Şimdi ise diğer sayfaları tasarlamaya başlayalım.

İlk sayfamız homepage.dart sayfası.

Bu sayfayı oluşturarak emülatörümüzde aşağıdaki ekranı elde edeceğiz.

Twitter ekranındaki o dörtlü ikonların yani like, rt vs. gibi ikonların bulunduğu bölümü yapmak için ikonları yan yana tutacağımız Row Widget’ını kullanacağız.

Bir sonraki adımımız FloatingActionButton, kullanıcının genellikle o ekranda yapacağı açık bir eyleme bağlı ekrandaki düğmedir. Bu düğme ekran içeriğinin üzerinde yüzer ve genellikle ekranın bir köşesinde bulunur.

Sonrasında ise message.dart oluşturuyoruz.

Message.dart’ta homepage.dart’taki gibi genel arayüzünü oluşturuyoruz ve aşağıdaki görüntü oluşuyor.

Mesajları da bitirdikten sonra bildirimlerin yapıldığı notifications.dart sayfasına geçiyoruz.

Bu ekranda da Twitter bildirimler ekranında olduğu gibi iki sekmeden oluşmasını istiyoruz o yüzden DefaultTabController kullanıyoruz.

DefaultTabController, DefaulTabBar ve TabBarView ile birlikte çalışan bir Tabs denetleyicisi ve Widget’ı tanımlamanıza izin verir. Bu denetleyici, içerdiği sekme sayısını tanımlama gibi birçok niteliğe sahiptir.

Flutter’da bir günlük çalışma ile bunun gibi arayüzleri oluşturmak gerçekten çok kolay. Siz de bu deneyimi kendiniz yaşayıp, bir gün içinde bir Flutter arayüzü oluşturabilirsiniz 🤗

--

--