Flutter ile Spotify UI Yapımı

En son güncellendiği tarih: May 30

Flutter, Google tarafından desteklenen ve açık kaynak kodlu olarak geliştirilen bir uygulama geliştirme ortamıdır. Geliştirilen uygulamalar Android ve iOS platformlarda native olarak çalışmaktadır. Böylece tek bir kod altyapısıyla her iki platforma uygulama desteği sunabilmekteyiz.


Başlarken

Bu yazıda Flutter kullanılarak Spotify uygulamasının arayüz yapım aşamaları gösterilmektedir. Uygulama içerisinden seçilen bir ekran önce analiz edilmekte ardından arayüze ait bir iskelet çıkarılmaktadır. Son olarak arayüz Dart koduna dökülmektedir.


Hedef Ekran

Kendimize hedef olarak belirlediğimiz ekran Spotify uygulamasının albüm detay ekranıdır. Temel düzeyde Flutter Widgets hakkında bilgi sahibi olmak adına bu ekran belirlenmiştir.


Arayüzün Analizi

Ekran üzerinde bar, resim, buton, liste gibi temel ekran bileşenleri bulunmaktadır. Öncelikle analizi yapılması gereken ekrandaki bileşenlerin nasıl bir yerleşime sahip olduğudur. İlk bakışta yatay bir şekilde bileşenlerin ekran üzerine yerleştiğini görebilmekteyiz. Widget kataloğundan bakacak olursak bir Column yerleşimi ile işe başlayacağımızı rahatlıkla görebiliriz.

Column, içerisine Widget listesi alan ve bunları yukarıdan aşağıya doğru sıralayan bir Widget türüdür.

Flutter’da her şey Widget’tır. Evet her şey!

Temel olarak ekran yerleşimi belirlendikten sonra en altta bir liste ve Bottom Navigation görülmektedir. Bar ve Bottom Navigation için Scaffold Widget kullanmamız gerekmektedir. Scaffold bize bir uygulamada lazım olabilecek temel yerleşimi sağlamaktadır.


Arayüzün İskeleti

Aşağıdaki görsel arayüze ait iskeleti göstermektedir.


İşe koyulalım…


main.dart

Projemizin lib klasörü altındaki main.dart dosyası başlangıç noktamızdır.

Ana ekranımız album_screen.dart dosyası içerisinde bulunan AlbumScreen adlı Widget’ı işaret etmektedir. AlbumScreen içerisinde arayüz tasarımlarımızı yapacağız.


AlbumScreen Widget’ına Genel Bakış

Albüm ekranımız lib/screens/album_screen.dart dosyasında bulunmaktadır. Şimdi bu Widget’ın içinde neler var genel olarak göz gezdirelim.

AlbumScreen Widget’ı StatelessWidget sınıfından kalıtılmıştır. State’i olmayan bir Widget kısaca statik bir Widget’tır. Yani ekran bileşenlerinde daha sonra herhangi bir değişiklik olmayacaktır.

İlk başta içi boş fonksiyonlar görmekteyiz. Görevlerine baktığımızda her biri ekranın belirli bir kısmını oluşturmaktadır. Örneğin buildAppBar() fonksiyonu içerisinde bir AppBar oluşturup gerekli işlemleri yapılmaktadır. Ekran kısım kısım fonksiyonlara ayrılmıştır.

Override edilen build(BuildContext context) fonksiyonuna baktığımızda en başta bir Scaffold Widget’ı oluşturulmuştur. Sırasıyla AppBar, BottomNavigationBar, arka planı oluşturan Gradient efekti ve diğer bileşenler oluşturulmuştur.

Şimdi sırasıyla ekranımızı kodlamaya başlayalım.


AppBar Yapımı

buildAppBar() fonksiyonu aşağıdaki gibidir. Bu fonksiyondan döndürülen AppBar Widget’ı Scaffold içerisinde appBar parametresine verilmiştir.

AppBar Widget’ı parametrelerini açıklayalım:

  • elevation: Bar’a gölgelendirme verir. Ekranımızda bar’a ait gölgelendirme olmadığı için değeri 0.0 verilmiştir.

  • backgroundColor: Uygun renk ataması yapılmıştır.

  • leading: Sol tarafta bulunan ana buton bu parametre ile verilir. Ekranda geri tuşu bulunduğu için BackButton() Widget’ı verilmiştir.

  • actions: Sağ tarafta bulunan butonlar bu parametre ile verilir. Widget listesi almaktadır.

Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


BottomNavigationBar Yapımı

buildBottomNavigationBar(BuildContext context) fonksiyonu aşağıdaki gibidir. Bu fonksiyondan döndürülen Theme Widget’ı Scaffold içerisinde bottomNavigationBar parametresine verilmiştir.

Bu fonksiyonun BottomNavigationBar Widget’ı döndürmesi gerekmiyor mu?


Evet! Fonksiyonun görevi açıkça BottomNavigationBar Widget’ı oluşturmaktır ancak Flutter’da her şey bir Widget’tır. Özelleştirme yapabilmek için Theme Widget’ının bir “child”ı olması gerekmektedir.


Theme Widget’ının parametrelerini açıklayalım:

  • canvasColor: Arkaplan rengini değiştirir. Örneğimizde orijinal ekrana uygun bir renk kullandık.

  • textTheme: Yazı stillerini değiştirir. Örneğimizde yazı rengini gri yaptık.

  • BottomNavigationBar parametrelerini açıklayalım:

  • items: BottomNavigationBarItem listesi almaktadır. Bu elemanlara simge ve yazı özelliği verilmektedir.

  • currentIndex: Seçili elemanı işaret eder.

  • fixedColor: Seçili elemanın rengini işaret eder.

  • onTap: Elemanlara dokunulduğunda yapılacak işlem.

Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


Arka Plandaki Gradient Efekti

Scaffold body kısmında bir Container Widget bulunmaktadır. Şimdi dekorasyon özelliğini kullanarak arka planı Spotify’daki gibi gradient bir hale getirelim.

buildGradientDecoration() fonksiyonu aşağıdaki gibidir.

BoxDecoration Widget’ının gradient özelliğinden yararlanarak arka plan oluşturulmuştur.


Parametreleri açıklayalım:

  • colors: Renk dizisi alır. Örneğimizde iki renk bulunmaktadır.

  • begin: Başlangıç konumu belirtilir. Üstten ve ortalı şekilde başlattık.

  • end: Bitiş konumu belirtilir. Ekranın ortasında bitirdik.

  • tileMode: Kenarın nasıl sonlanacağı belirtilir. Örneğimizde “clamp” belirtilmiştir. Bu özellik kenarı en son renge göre uzatır. (Siyah rengi ekranın altına kadar gitmektedir.)

Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


Albüm Kapak Resmi

Resim gösterebilmek için Image Widget’ı kullanılmaktadır. Resmi assets içerisinden göstereceğimiz için bir kaç ayar yapmamız gerekmektedir.


Öncelikle kullanmak istediğimiz resim dosyasını kök dizin içerisinde assets/images içerisine kopyalıyoruz. Örneğimizde mozart_cover.jpeg adında bir resim dosyası kullanılmıştır. Bu dosyaya uygulamanın erişebilmesi için yine kök dizin içerisindeki pubspec.yaml dosyasını açıyoruz. Burada flutter: altında aşağıdaki tanımlamayı yapıyoruz:

Artık uygulama belirtilen resmi kullanabilir durumdadır.


buildCoverImage() fonksiyonu aşağıdaki gibidir:

Padding Widget kullanılarak tüm kenarlardan 8.0 mantıksal piksel değeri verilmiştir. Image Widget’ı bir AssetImage kullanmış ve 200.0x200.0 değerinde bir resim gösterilmiştir.


Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


Albüm Başlığı

Basit bir Text Widget’ı ile albüm başlığı gösterilmiştir.


Yazı Fontu Değiştirme

Spotify uygulaması Gotham yazı fontunu kullanmaktadır. Bunun için uygulamada özel bir font seçimi yapmamız gerekmektedir. Resim ekleme kısmında olduğu gibi assets/fonts içerisine gotham_medium.ttf dosyası kopyalanmıştır. Ardından uygulamanın bu fontu kullanabilmesi için pubspec.yaml dosyasında flutter: içerisine aşağıdaki ekleme yapılmıştır.

main.dart dosyasında MaterialApp Widget’ına aşağıdaki parametre eklenmiştir:

Bu işlemlerden sonra uygulama genelinde kullanılacak font artık Gotham’dır.


Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


Takip Et Butonu

buildFollowButton() fonksiyonu aşağıdaki gibidir:

BoxDecoration kullanılarak Text etrafına yuvarlatılmış dikdörtgen çizdirilmiştir.


Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


Takipçi Sayısı Yazısı

buildFollowerCountText() fonksiyonu aşağıdaki gibidir:

Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


Shuffle Play Butonu

buildShufflePlayButton() fonksiyonu aşağıdaki gibidir:

Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


İndirme Kısmı

Bu kısımda bir Text ve Switch bulunmaktadır. buildDownloadSection() fonksiyonu aşağıdaki gibidir:

Burada Row Widget görmekteyiz. Row içerisine aldığı elemanları yatay bir şekilde yerleştirir.


Bu aşamadaki ekran görüntüsü aşağıdaki gibidir:


Müzik Listesi

Ekranın en altında görülen müzik listesi için ListView Widget’ı kullanılacaktır. Liste elemanları spesifik bir görünümde olduğu için bir özelleştirme yapmamız gerekmektedir. Bunun için ilk başta song.dart adında model sınıfımızı aşağıdaki gibi oluşturduk:

Bu sınıfı kullanarak ekrana istediğimiz görüntüyü verebilen bir SongItem Widget’ı yazmamız gerekmektedir. Bu Widget, listedeki her bir elemana denk gelmektedir. song_item.dart dosyamız aşağıdaki gibidir:

Yapıcı metodumuz bir Song nesnesi almaktadır. Override edilen build fonksiyonuna baktığımızda Row kullanılmıştır. Bu sayede ilk elemana Expanded özelliği verilerek Icon yatayda sona yaslanmıştır. Column kullanılarak yazılar alt alta dizilmiştir.


album_screen.dart dosyamıza dönüyoruz. Burada generateSongList() fonksiyonu bir SongItem listesi oluşturmaktadır.

Albüm ekranındaki Column içerisinde listemizi aşağıdaki gibi oluşturuyoruz.

Expand Widget kullanılarak liste boş alana yayılmıştır. ListView.builder ile SongItem içeren listemiz ListView olarak oluşturulmuştur.


Gösteri Zamanı

Yapılan tüm işlemlerin ardından arayüz son halini almış durumdadır. Aşağıdaki görseller orijinal uygulama ve bu yazıda kodlanan uygulamaya ait görsellerdir.

Son

Widget’lar ve esnek bir yapı sayesinde karmaşık gibi görünen ekran bileşenleri kolayca uygulanabilmiştir. Flutter bu sayede mobil yazılım geliştirme maliyetlerini büyük oranda azaltmaktadır. Platform yeni olmasına rağmen hızla gelişmekte ve yeni özelliklere hızlıca adapte olmaktadır. En önemlisi tek kod altyapısıyla iki platforma da native bir şekilde uygulama yazıyor olmamızdır.


Github: https://github.com/serkancay/spotify_flutter


#flutter #dart #native #cross #app #spotify #ui

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
JetBrains Hakkında Detaylı Bilgi Alın

© 2020 by mobiler.dev

mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın