Twitter Clone P-1
Flutter üzerinde uzun süredir çalışıyorum ve günlük uygulamalar çıkarmak benim için eğlenceli bir hal aldı, çünkü gerçekten kısa sürede Flutter üzerinden uygulama çıkarmak çok kolay. Bugün sizlerle günlük uygulamalarımın başında “Twitter Clone” yer alıyor.
Haydi başlayalım.
Öncelikle Twitter Clone’a başlarken bir main.dart dosyası oluşturmamız gerekiyor.
Oluşturduğumuz bu main.dart dosyasında MyHome sınıfımızın altında kırmızı çizginin bulunmasının sebebi bizim bu sınıfı oluşturup import etmememizden kaynaklı o yüzden hemen MyHome sınıfımızı oluşturup, bu sınıfı main.dart’da import etmeliyiz. Import etmemizden sonra bu sorun çözülecektir.
Home.dart sayfasında oluşturduğumuz Stateful Widget’ının içindeki Scaffold () Widget’ı, temel bir düzeni çabucak oluşturmamıza yardımcı olacaktır. AppBar, body vb. özelliklere sahiptir. Oluşturduğumuz sayfanın iskeletini oluşturacaktır. Appbar ile Twitter Clone sayfamızın üst kısmını oluşturacağız. Appbar da bulunan leading ise Appbar’ın sol kısmını düzenlemek için kullanılır bizde leading kullanarak Twitter’ın sol üst kısımda yer alan profil resmini oluşturacağız.
Daha sonra açılır yan pencereyi oluşturmak için Drawer Widget’ı ile normalde daha fazla zamanımızı alacak bir işlemi tek bir Widget’la kısa sürede gerçekleştireceğiz. Drawer Widget’ının içinde kullandığımız Widgetlarla da aşağıdaki gibi bir görünüm elde ederiz.
Body bölümünde oluşturacağımız ilk Widget TabBarview Widgetdır. Bu Widget sekmeler arası görüntülenmesi için bize katkı sağlar, tabii bu sekmelerin görüntülenmesi için yapılması gereken tek işlem bu değil. Aynı zamanda alttaki görselde gördüğünüz gibi TabBar Controller da eklememiz gerekmektedir. TabBar Controller, oluşturduğumuz sekmeler arasındaki hareketi kontrol eder.
Daha sonrasında ise Twitter sayfasındaki altta bulunan bara genel görüntüsünü verecek olan BottomNavigationBar’ı ekleyeceğiz. BottomNavigationBar, Flutter içerisinde yer alan harika Widgetlardan bir tanesidir. BottomNavigationBar’ı Scaffold yapısının içerisine kolayca ekleyebiliriz.
Scaffold’da, BottomNavigationBar adında bir nitelik vardır ve Scaffold’a bunun için BottomNavigationBar atayabiliriz.
BottomNavigationBar Widget’ının içerisine ikonlar ekleyerek alttaki gibi bir görüntü elde ederiz.
Şimdi yavaş yavaş diğer sayfaları oluşturmaya başlayalım. Diğer sayfaları oluşturmak için öncelikle home.dart dosyasında yaptığımız gibi lib klasöründe sayfalar klasörü açarak Twitter’daki her sayfa için ayrı ayrı dosya açalım.
Oluşturduğumuz dosyaları home.dart dosyasındaki TabBar Widget’ının içine entegre edelim ki her butona tıkladığımızda ayrı ayrı sayfa açılsın. İlk sayfaları bu Widget’ın içerisine eklediğinizde alt tarafının kırmızı olacağını göreceğiz. Bu, yine sayfaları home.dart’a import etmediğimiz için olacaktır, import ettiğimizde bu sorun çözülür.
Ufaktan da olsa Twitter Sayfalarını oluşturmaya başladık Twitter Clone P-2 diğer sayfaları oluşturmaya devam edeceğiz. 👇
