Flutter ve Material 3 ile Her Cihaza Uygun Tasarım
Bu yazıda Material 3'e eklenen en son özellikleri ve bu özelliklerin daha estetik Flutter uygulamaları tasarlamayı nasıl kolaylaştırdığını inceleyeceğiz.
Material Design mobil, web ve masaüstü uygulamaları için yüksek kaliteli, güzel ekran deneyimleri oluşturmamıza yardımcı olan açık kaynaklı bir Google şirket içi tasarım sistemidir.
Material Design son güncellemesi olan Material 3, geliştiricilerin tüm platformlarda(mobil, web, masaüstü) tutarlı bir tasarımla Flutter uygulamaları oluşturmasına olanak tanır.
Bu yazıda Material 3'ün getirdiği yeni özellikler, M2 ile M3 arasındaki temel farkları ve Flutter uygulamalarımızı Material 3'e nasıl taşıyacağımızı öğreneceğiz.
.
.
Haydi başlayalımmmmm 😎
.
.
Flutter Uygulamamıza Material 3 Eklenmesi
Material 3'ü uygulamamızda kullanabilmek için MaterialApp içerisindeki “theme” kısmında “useMaterial3” özelliğini true olarak ayarlamamız yeterlidir.
.
.
Material 3 Tasarımındaki Yenilikler Neler?
Material 3 ile birlikte Typography/Iconography, ColorScheme, over-scroll stretch efekti gibi Android 12 özellikleri (Ekranı sağa sola yada aşağı yukarı çektiğinizdeki o esnek hareket 🙂), yeni ink ripple efekti, yeni buton ve widget’lar, splashFactory için InkSparkle(Widget’lara dokunmalarda oluşan arka plan görüntüsü) gibi yenilikler geldi.
Bazı güncellemeler alan başlıca material widget’lar:
- AppBar
- FloatingActionButton(FAB)
- ElevatedButton
- OutlinedButton
- IconButton
- Card
- Sliders
- DropdownMenu
- Switches
- BottomSheet
- Chips
- Dialogs
- NavigationRail
- BottomAppBar
- popUp Menus
- Radio
- CheckBox
- Material Banner
- CircleAvatar
- DatePicker
- ListTile
- Drawer
- TimePicker
.
.
Material 3'teki Yeni Widget’lar
Materyal 3'e eklenen yeni widget’lardan bazıları şunlardır:
- NavigationBar & NavigationDrawer
- Segmented buttons
- Filled buttons
- Filled tonal button
- Badges
.
Bu yeni widget’ları ve özelliklerini biraz daha yakından inceleyelim :)
.
- NavigationBar and NavigationDrawer
Material 3 ile birlikte BottomNavigationBar widget’ı NavigationBar olarak değiştirilmiştir. NavigationBar biraz daha uzun ve tıklandığında altındaki gölge yok. Bunun yerine arka planında seçili olanda yüzey renk tonu vardır.
2. Segmented Buttons
Segmented buttons seçenekleri belirlemek, görünümleri değiştirmek veya öğeleri sıralamak için kullanılan bir widget’tır. MultiSelectionEnabled parametresini belirtmediğiniz sürece varsayılan olarak yalnızca tek bir öğeyi seçebiliriz.
3. Filled buttons and Filled tonal button
Filled button; FAB’den sonra en iyi görsel etkiye sahip olduğundan “Onayla”, “Kaydet”, “Şimdi Katıl” gibi akışı tamamlayan önemli son eylemler için kullanılabilir.
Filled tonal button; ikincil bir arka plan rengi vardır. Bu butonu daha düşük öncelikli bir gereksinim için kullanılabilir. Örneğin; bir akışı olan ekranda “Sonraki” gibi bir buton olarak kullanmayı düşünebiliriz.
4. Badges
Badge, widget hakkında bir durum, sayı yada ekstra bilgi sağlamak amacıyla kullanılır.
Material 2 ve Material 3 Arasındaki Temel Farklar
- Dynamic Colour
- Shapes
- Elevation
- Typography
.
Hadi şimdi bu maddelere dalalım :)
.
- Dynamic Color
Material 3 dinamik renk seçenekleri sunar. Uygulamanın tamamında kolayca tutarlı bir renk teması belirtmemizi sağlar. Bunun için colorSchemeSeed renigini ayarlamamız yeterli olacaktır. colorSchemeSeed ekledikten sonra colorScheme, primaryColor, or PrimarySwatch bu özellikleri kaldırmamız gerekmektedir.
Rengine müdahale etmediğimiz ve Material 3 destekleyen widgetlar için görüntü şu şekilde olacaktır:
Dynamic Color için kullanışlı bir çok özellik var. Şuraya incelemeniz için bir paket ve içerik bırakıyorum. Şuraya :)
.
.
2. Shapes
Material 3 ile FAB’ın yuvarlak dikdörtgen bir şekle sahip olduğunu görüyoruz. Diğer tüm butonlar da yine aynı şekilde yuvarlak dikdörtgen şekline dönüşmüş durumdadır. Card, Dialog, BottomSheets, Chips, Switch gibi widget’lar ise daha yuvarlak hale getirilmiş.
.
.
3. Elevation
Material 3 ile surfaceTintColor adında yeni bir özellik geldi. Herhangi bir widget’in üzerinde yüksekliği/yoğunluğu gösteren bir ifade gibi düşünülebilir. Elevation değerine göre widget opaklığı ayarlanır.
.
.
4. Typography
Material 2'de Headline, Subtitle, BodyText, Caption, Overline ve Buton vardı. Ancak Material 3'te kullanımları daha açıklayıcı olan Display, Headline, Title, Body, and Label bulunur.
Material 2'de Headline en büyük, Overline en küçük yazı tipi boyutuna (10) sahipken, Material 3'te Display en büyük ve Label en küçük yazı tipi boyutuna (11) sahiptir.
Örneğin,
Material 2 headline1 yazı tipi boyutu 96, Material 3 displayLarge yazı tipi boyutu ise 57'dir.
Material 2 overline yazı tipi boyutu 10'dur, Material 3 labelSmall yazı tipi boyutu ise 11'dir.
Material 3 ve Material 2 yazı tipi boyutları arasındaki karşılaştırma şu şekildedir:
Her iki versiyonun tipografisi hakkında daha fazla bilgi için Material 2 ve Material 3'ü kontrol edebilirsiniz.
.
.
.
Sonuç
Material 3, Flutter’a yeni bir renk katıyor diyebiliriz. Tek bir yerde yazılan Flutter kodunu web, mobil ve masaüstünde kullanabiliyorken tasarım anlamında farklılıklar olabiliyordu. Fakat Material 3 ile farklılıklar oluşmadan bütün platformlar için dizayn içerikleri de daha da ortaklaşmış oldu/oluyor/olacak. :)
Flutter ekibi tüm widget’ları Material 3'e taşımak için çalışmalarını sürdürüyor. İlerlemelerini Bring Material 3 to Flutter sayfasından takip edebilirsiniz.
Ayrıca Material 3'ü Flutter ile hızlıca test etmek için şuraya tıklayabilirsiniz: Şuraya :)
.
.
Umarım faydalı bir yazı olmuştur 🙏
Bir sonraki yazımda görüşmek üzere 👋
