Flutter Avengers Endgame Uygulaması
Herkese selam 👋
Bugün sizlere hepimizin merakla beklediği yeni Avengers filmi için yaptığım küçük Wiki uygulamasının yapım aşamalarını anlatacağım😏
Öncelikle main.dart dosyamızı oluşturacağız. Sonra oluşturmuş olduğumuz Material Widget’ının içerisine bir initialRoute ekliyoruz, yani gideceği sayfalara rotalarla gitmesini istiyoruz. Buraya initialRoute diyerek bir ana rota belirliyoruz. Aşağıdaki kodda olduğu “/” işaretinden sonra rotaları belirleyeceğiz. Ana rotayı belirledikten sonra tabii ki diğer rotaları da belirliyoruz. Böylelikle diğer sayfalara geçişimiz initialRoute ile daha da kolaylaşıyor.
Stateful Widget’ının içindeki Scaffold () Widget’ı bizim home.dart sayfamızın iskeletini oluşturacaktır ve bu Widget AppBar, body vb. özelliklere sahiptir. Appbar ile Avengers Endgame uygulamamızın üst kısmını oluşturacağız. Actions ile appbarımızın sol kısmında olacak olan ikonları yada resimleri belirliyoruz. Burada ben projede kullanacağım resimleri internet üzerinden direkt almak yerine Flutter uygulamasında assets dizini oluşturdum ve buraya resimleri attım sonrasında ise pubspec.yaml dosyasında assetsleri tanımladım.
Şimdi ise uygulama giriş ekranımızı ayarlayalım.Öncelikle giriş için lib klasörüne home.dart klasörünü açalım. Bu ekranda Marvel’ın çıkardığı filmlerin kronolojik sırasının bulunmasını istedim. Ve bunun için bir ListView oluşturdum. ListView, childrenların listesini yaparak kaydırılabilir olmasını sağlıyor ve bu da bizim bu sayfa için en çok istediğimiz özelliklerden birisi. Çünkü ListView içerisinde oluşturduğumuz yapılara yazı, renk, resim gibi bir çok özellik verebiliriz ve bu Widget’ın kaydırılabilir özelliğinin olması kronolojik sıralamamız için ideal.
Kodları yazdıktan sonra emülatörümüzde aşağıdaki gibi bir ekran oluşturmuş oluyoruz 👇
Sonra BottomNavigationBar Widget’ını ekleyerek ekranımızın alt kısmını oluştururuz. BottomNavigationBar içerisinde kullanacağımız Sizedbox en basit fakat en kullanışlı Widget’lardan birisidir. Bu SizedBox Widget’ının içerisine oluşturduğumuz RaisedButton ile bottomNavigation barımızdaki iki butonu oluşturmuş oluyoruz. Burada, yeni ekrana yönlendirmek için Navigator.pushNamed yöntemini kullanarak önceden belirlemiş olduğumuz rotalar sayesinde sayfalara yönlendiriyoruz.
Ve BottomNavigationBar’ı uyguladıktan sonra aşağıdaki gibi bir görünüm oluşuyor 👇
Home.dart sayfasına tekrar dönüş yapabilmek için yeni bir buton eklemek istiyoruz. Burada tercihim floatingActionButton’dan yana oluyor çünkü floatingActionButton, bir kullanıcının genellikle belirli ekranda yapacağı açık bir eyleme bağlı butondur. Bu buton ekran içeriğinin üzerinde tam anlamıyla yüzer ve genellikle ekranın bir köşesinde bulunur. Örneğin, Gmail’de, ana ekranda e-postaları oluşturmak için bir FloatingActionButton vardır. FloatingActionButton’un amacı, kullanıcının sık sık isteyebileceği veya yapması gereken bir şey olmalıdır. Bende burada ana sayfaya dönme işleminin sıklıkla gerçekleşeceğini düşündüğümden dolayı, bu butonu kullandım.
Şimdi gelelim Avengers Endgame’deki kahramanların bulunduğu ekrana. Burada kahramanlar ve düşmanlar olarak iki bölüm oluşturdum ve ikisi için de aynı işlemi uyguladığım için tek bir tanesinin adımlarını sizlerle paylaşacağım😬
Öncelikle lib klasöründe yeni bir dart dosyası açarak kahramanların bulunduğu sayfayı oluşturuyoruz. Bu sayfa da yine kaydırılabilir bir ekranın olmasını istediğimden dolayı ListView Widget’ını tercih ettik.
ListView içerisine eklediğimiz Container’lar ile oluşturacağımız kahramanlar listesini yapmak hiç de zor olmayacak. Container içerisine ListTile ekleyerek kolaylıkla yazı resim ikon gibi birçok özelliği içerisine ekleyebildik. Aynı şekilde burada da kahramanın resminin ve özelliklerinin olduğu ekrana yönlendirmek için Navigator.pushNamed yöntemini kullanarak önceden belirlemiş olduğumuz rotalar sayesinde sayfalara yönlendiriyoruz.
Şimdi gelelim kahramanlarımızın profil sayfalarına. Öncelikle her zaman yaptığım gibi, profil sayfası ayrı bir ekran olacağından tekrar bir dart dosyası oluşturdum.
Bu sayfa için öncelikle bir appbar kullanıyorum. Bu appbar’ın içersinde bir Title ve kahramanlar sayfasına geri dönmeyi sağlamak için bir ikon bulunuyor. Sonrasında kahramanın fotoğrafının olduğu ve özelliklerini yazacağımız kısmı oluşturmaya geliyoruz.Bunun için Column widgetını kullanıyoruz. Çünkü Column, öğeleri dikey olarak görüntülemek için kullanılan bir widgetdır. Column sayesinde fotoğrafı ve yazıyı alt alta kullanabiliyoruz.
Ve yukarıdaki kodları oluşturduğumuzda ortaya çıkan görüntü şöyle:
Diğer oluşturacağımız sayfalar içinde yukarıda yaptığımız adımları kullanacağız 😉
Siz de bu deneyimi kendiniz yaşamak isterseniz GitHub hesabımdan kodlara ulaşabilirsiniz 🤗
