Flutter’da Temel Widgetlar ile Bir Uygulama Tasarımı Örneği
Selamlar, 🖐️
Bugün Flutter’da temel widgetları ele alarak bir uygulama örneğinden bahsetmek istiyorum. Flutter’a yeni başladığımı söyleyebilirim, yaklaşık 5–6 ay oldu. Aslında bakarsanız yeni başlayanlar için Flutter bir yapboz gibidir, ki bence de öyledir. Widgetları yapboz parçaları gibi düşünürsek, bu parçaları nerede kullanacağımızı bilirsek geriye sadece yapboz parçalarını birleştirmek kalıyor. Tabii ki tüm widgetları bilmemiz mümkün değil, geliştireceğiniz uygulamaya bağlı olarak kullanacağımız widgetlar değişiyor. Flutter’ın bir güzel yanı ise istediğimiz herhangi bir widgetın kullanımını Flutter’ın web sitesi üzerinden inceleyebilirsiniz. Aynı zamanda YouTube üzerinden Flutter’ın her hafta bir video ile widget kullanımları için bir video serisi var, burayı da incelemenizi tavsiye ederim.
- Flutter widget katoloğuna buradan erişebilirsiniz.
- Flutter YouTube widget video serisine de buradan erişebilirsiniz.
Şimdi bir örnek üzerinden gidelim. Bir not alma uygulaması ile başlayabiliriz. Örneği dribbble üzerinden seçtim, dribbble üzerinden ücretsiz tasarımlara erişebilirsiniz.
Temel widgetları inceleyecek olursak bunları Container, Column, Row şeklinde 3'e ayırabiliriz.
- Container: Türkçesine baktığımızda “konteyner” olduğunu, bir boş kutu gibi düşünebilirsiniz. Bu boş kutuya nesneleri yerleştiriyoruz.
- Column: Türkçesine baktığımızda “kolon” olduğunu, üst üste nesnelerin geldiğini düşünebilirsiniz.
- Row: Türkçesine baktığımızda “satır” olduğunu, yan yana nesnelerin geldiğini düşünebilirsiniz.
İlk Ekran:
İlk ekranı incelediğimizde, hangi widgetları kullanacağımızı belirliyoruz ve ekranı yapboz gibi widgetlara bölüyoruz. Böylelikle kodlamaya geçtiğimizde işimizi biraz daha kolaylaştırıyoruz. Adım adım ilerlediğimizde ilk widgetımızın Container olduğunu görüyoruz. Sonrasında sırasıyla Row, Column, Row ve yine Column widgetlarının geldiğini görüyoruz. Yazı fontunu da örnekteki fonta yakın “Ramabhadra” fontunu seçtim.
İlk ekrandaki Container widgetını çizdikten sonra, Row widgetının kod bloğunu inceleyelim.
Burada Row-children widgetın içerisine ilk ekranda gördüğümüz “My Notes” iki Text widgetlarımızı kodluyoruz. Kullandığımız SizedBox iki Textin arasına bir boşluk vermek için kullandık. Sonrasında ise Rowdan sonra gelen Column widgetını kullanıyoruz.
Burada ise Column widgetından farklı olarak Padding widgetını kullanıyoruz, bunun sebebi ise Column widgetının dışarıdaki Row widgetının arasındaki uzaklığı ayarlamak. Column-children widgetın içerisine ListTile widgetlerını kodluyoruz. Son olarak Column ve Row widgetlarımızı kullanıyoruz.
İlk başta Row widgetı kullanmamızın nedeni menü ikonun ve ekle butonun yan yana bulunması. Sonrasında Column widgetı kullanarak menü ikonun altında Text widgetın bulunmasını sağlamak için kullanıyoruz. Ekle butonu Container widgetının içinde kodluyoruz, bunun nedeni FloatingActionButton widgetın default boyutu örnekteki boyutu ile aynı olmadığı için kodluyoruz. Böylelikle Container widgetın height ve width parametreleri ile istediğimiz boyutu ayarlıyoruz.
İkinci Ekran:
İkinci ekrana geçtiğimizde ise yine sırasıyla Container, Column, Row widgetlarını bölüyoruz. Container widgetın içine Column widgetını kodluyoruz, çünkü yine burada nesnelerin üst üstüne geldiğini görüyoruz. Sonrasında ise sol köşede geri ikonunu ve “My Notes” textinin yan yana geldiğini görüyoruz. Bunun için ise Row widgetını kullanıyoruz. Ardından ListTile widgetını kullanıyoruz. ListTile widgetı ile title parametresini “Work”, trailing parametresine ise FloatingActionButton kullanıp, child parametresine text ile “6” veriyoruz.
Sonrasında Column widgetın içine örnekte gördüğümüz 3 not için Card widgetını kullanıyoruz.
Burada ScrollView widgetı kullanarak, scroll yapılmasına sağlayabilirsiniz. 2. Card widgetımızda iki tane fotoğraf olduğunu görüyoruz. Bunun için ise 2. Card widgetımız için Image.network() widgetımız ile web üzerinden rastgele fotoğraf linklerini kullanıyoruz. Ve örnek uygulama tasarımını tamamlıyoruz.
Umarım yazım faydalı olmuştur, bir sonraki flutter serisinde görüşmek dileğiyle.😊
Kaynak kodu:
