Herkese merhaba. Bugün Flutter 3.27 versiyonu üzerine yazmak istedim. Güncellemeler beni hep heyecanlandırmıştır. Bu da öyle. Neler değişmiş, hep birlikte görelim.
Flutter 3.27 sürümü bu ay tanıtıldı ve bu sürüm, hem performans hem de kullanım kolaylığı açısından birçok yenilik ve iyileştirme içeriyor. Belli başlıklar altında sizler için inceledim.
Performans Geliştirmeleri
Impeller Render Motoru Güncellemeleri
Flutter’ın grafik performansı, Impeller render motoru ile büyük ölçüde iyileştirildi. Bu motor, özellikle animasyonlar ve grafik yoğun uygulamalar için daha akıcı bir deneyim sunuyor. Örneğin, yüksek çözünürlüklü görseller içeren bir e-ticaret uygulaması geliştiriyorsanız, sayfa geçişlerinde yaşanan donmalar bu sürümde önemli ölçüde azalmış durumda.
WebAssembly Optimizasyonları
Flutter web uygulamaları artık WebAssembly için daha iyi optimize edilmiş. Bu, uygulamanızın tarayıcılarda daha hızlı yüklenmesini sağlar. Örneğin, bir çevrimiçi eğitim platformu oluşturuyorsanız, kullanıcılarınız artık ders içeriklerine daha hızlı erişebilir.
Masaüstü Platformlarındaki İyileştirmeler
Flutter artık Windows, macOS ve Linux için daha gelişmiş yerel eklenti desteği sunuyor. Örneğin, Windows uygulamanızda sistem düzeyinde bir dosya yöneticisi entegrasyonu gerekiyorsa, bu işlem daha kolay hale geldi. Ayrıca, masaüstü uygulamalarında klavye ve fare girdileri daha akıcı bir şekilde çalışıyor, bu da özellikle masaüstü oyun ve üretkenlik uygulamalarında büyük avantaj sağlıyor.
Geliştiriciler İçin Yeni Araçlar
Test Araçlarında Neler Değişti?
- Entegre test araçları geliştirildi. Artık uygulamanızın her platformda aynı şekilde çalıştığından emin olmak daha kolay.
- Örneğin, bir bankacılık uygulaması geliştiriyorsanız, kullanıcıların hem Android’de hem de iOS’ta hesap işlemlerini sorunsuz yapmasını test edebilirsiniz.
Firebase Entegrasyonu
Firebase kullanan geliştiriciler için entegrasyon süreçleri kolaylaştırıldı. Örneğin, gerçek zamanlı bir sohbet uygulaması geliştirirken Firebase altyapısını kurmak daha az zaman alıyor.
Hot Reload İyileştirmeleri
Yaptığınız değişiklikleri uygulamanızı yeniden başlatmadan daha hızlı görebilirsiniz. Bu, özellikle yoğun kodlama sırasında büyük bir zaman tasarrufu sağlar.
Uluslararasılaştırma ve Yerelleştirme (i18n)
Flutter, sağdan sola yazılan diller (RTL) ve birden çok dil desteği için daha iyi bir uyum sunuyor. Örneğin, bir haber uygulaması geliştirirken hem Türkçe hem de Arapça içerik sunmanız gerekiyorsa, bu süreç artık daha kolay.
Material 3 Güncellemeleri
Flutter, Google’ın en güncel tasarım dili olan Material 3 ile daha uyumlu hale geldi. Yeni widget’lar ve özelleştirme seçenekleri eklendi. Örneğin, bir spor takip uygulaması geliştiriyorsanız, modern bir görünüm için daha fazla bileşen seçeneğiniz var. Aşağıda sizler için bazılarını yazdım ve denedim. Umarım ilham verici olur.
Column ve Row İçin spacing Özelliği
Artık Column ve Row widget'larında, çocuklar arasındaki boşluğu belirlemek için spacing parametresi kullanılabiliyor. Bu özellik, her bir çocuğun arasına otomatik olarak boşluk eklemenizi sağlar.
Örnek Kullanım:
Column(
spacing: 22.0, // Her bir widget arasında 22 piksel boşluk
children: [
Text('Title'),
Text('Subtitle'),
ElevatedButton(onPressed: () {}, child: Text('Continue')),
],
)
Bu kodda, her bir widget arasında otomatik olarak 22 piksel boşluk bırakılır. Önceden bu işlemi SizedBox veya Paddingile manuel yapmanız gerekiyordu.
Container İçin foregroundDecoration Özelliği
Container widget'ına eklenen foregroundDecoration, arka planın üzerinde ancak içeriklerin altında bir dekorasyon katmanı eklemenizi sağlar. Bu, özellikle opak efektler veya ön plan vurguları için faydalıdır.
Örnek Kullanım:
Container(
decoration: BoxDecoration(color: Colors.blue),
foregroundDecoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.transparent, Colors.black54],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: Text(
'Background Decoration',
style: TextStyle(color: Colors.white,fontSize:32.0),
),
)
Bu örnek, bir metin üzerine yarı saydam bir degrade efekti ekler.
NavigationDrawer Güncellemeleri
Material 3 ile NavigationDrawer daha modern bir görünüme kavuşturuldu ve özelleştirme seçenekleri artırıldı. Artık ikonlar ve etiketler arasındaki boşlukları daha kolay yönetebilir, gruplandırılmış bölümler oluşturabilirsiniz.
Örnek Kullanım:
Scaffold(
body: Container(),
drawer: const NavigationDrawer(
children: [
NavigationDrawerDestination(
icon: Icon(Icons.home),
label: Text('HomePage'),
),
Divider(),
NavigationDrawerDestination(
icon: Icon(Icons.settings),
label: Text('Settings'),
),
],
),
),
Badge (Rozet) Widget’ı
Material 3 ile rozetler için özel bir widget sunuluyor. Bu, bildirim sayılarını veya durum göstergelerini vurgulamak için kullanılabilir.
Örnek Kullanım:
Badge(
label: Text('5'),
child: Icon(Icons.notifications),
)
Bu kod, bir bildirim ikonu üzerine “5” rozetini ekler.
TextField İçin hintStyle ve prefixIconStyle
TextField’de artık hintStyle ve prefixIconStyle gibi özelliklerle metin ve ikonları daha esnek bir şekilde özelleştirebilirsiniz.
Örnek Kullanım:
TextField(
decoration: InputDecoration(
hintText: 'User Name',
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.person),
prefixIconColor: Colors.pink,
),
)
ElevatedButton İyileştirmeleri
ElevatedButton artık daha kolay bir şekilde özelleştirilebilir hale geldi. Örneğin, kenar boşluklarını ve yükseklikleri ayarlamak için daha fazla seçenek sunuluyor.
Örnek Kullanım:
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.add),
label: Text('Add'),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
elevation: 8,
),
)
Card Widget’ında Gölge ve Kenarlık İyileştirmeleri
Material 3, kartların tasarımında modern bir yaklaşım sunar. Gölge seviyeleri ve kenarlıklar daha doğal görünecek şekilde optimize edilmiştir.
Örnek Kullanım:
Card(
elevation: 8,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
child: Padding(
padding: const EdgeInsets.all(28.0),
child: Text('A Modern Card with Material 3'),
),
)
Adaptive Tasarım Özellikleri
Material 3, cihaz boyutuna ve türüne göre otomatik olarak uyum sağlayan widget’ları destekler. Örneğin, NavigationBar ve NavigationRail arasında otomatik geçiş yapılabilir.
Örnek:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) {
return NavigationRail(
destinations: [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home Page'),
),
NavigationRailDestination(
icon: Icon(Icons.settings),
label: Text('Settings'),
),
NavigationRailDestination(
icon: Icon(Icons.person),
label: Text('Profile'),
),
],
);
} else {
return NavigationBar(
destinations: [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Home Page',
),
NavigationDestination(
icon: Icon(Icons.settings),
label: 'Settings',
),
NavigationDestination(
icon: Icon(Icons.person),
label: 'Profile',
),
],
);
}
},
)
ViewModelBuilder ile Daha Modüler Kodlama
Flutter’ın ViewModel yaklaşımıyla uygulama mantığını ayırmak daha kolay hale geldi. Örneğin, bir “todo listesi” oluşturmak için artık ViewModelBuilder kullanabiliriz.
Örnek Kullanım:
class TodoViewModel extends ChangeNotifier {
List<String> _todos = [];
List<String> get todos => _todos;
void addTodo(String todo) {
_todos.add(todo);
notifyListeners();
}
}
ViewModelBuilder<TodoViewModel>(
viewModelBuilder: () => TodoViewModel(),
builder: (context, viewModel, child) {
return Column(
children: [
ListView.builder(
shrinkWrap: true,
itemCount: viewModel.todos.length,
itemBuilder: (context, index) {
return Text(viewModel.todos[index]);
},
),
TextField(
onSubmitted: (value) => viewModel.addTodo(value),
),
],
);
},
);Use Case: Dinamik olarak bir listeyi yönetmek için daha okunabilir ve modüler bir yapı sağlar.
SliverAppBar’ın Yeni İyileştirmeleri
SliverAppBar artık stretchTriggerOffset gibi özelliklerle kullanıcı deneyimini geliştiren daha fazla özelleştirme seçeneği sunuyor.
Örnek Kullanım:
CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
floating: true,
stretch: true,
stretchTriggerOffset: 100,
flexibleSpace: FlexibleSpaceBar(
title: Text('Sliver App Bar'),
background: Image.network(
'https://picsum.photos/250?image=9',
opacity: const AlwaysStoppedAnimation(.5),
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => ListTile(title: Text('Item $index')),
childCount: 50,
),
),
],
);
Use Case: Kullanıcı ekranı aşağı doğru çektiğinde uygulamalara daha dinamik bir his kazandırır.
ScrollView’in Yeni Özellikleri
Artık ScrollView bileşenleri daha gelişmiş özelliklere sahip. Özellikle keyboardDismissBehavior özelliği, kullanıcı deneyimini optimize etmek için harika bir eklenti.
Örnek Kullanım:
SingleChildScrollView(
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
child: Column(
children: [
TextField(
decoration: InputDecoration(labelText: 'User Name'),
),
ElevatedButton(
onPressed: () {},
child: Text('Login'),
),
],
),
);Use Case: Klavyenin, kullanıcı ekranı aşağı kaydırırken otomatik olarak kapanmasını sağlar.
Adaptive Teslimatlar (Device-Adaptive Widget’lar)
Material 3, cihaz türüne göre farklı görünümler oluşturmayı kolaylaştırıyor. Örneğin, bir telefon ve tablet arasında farklı düzenler oluşturabilirsiniz.
Örnek Kullanım:
AdaptiveWidget(
phone: Center(child: Text('This is a phone view')),
tablet: Center(child: Text('This is a tablet view')),
);Use Case: Farklı cihazlar için aynı kod tabanı üzerinden uyarlanabilir tasarımlar oluşturmak.
ColorScheme Harmonization ile Renklerin Otomatik Uyumu
Yeni ColorScheme.fromSeed metodu, tek bir renk tohumu (seed) kullanarak tüm temayı oluşturmayı kolaylaştırıyor.
Örnek Kullanım:
MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
),
home: Scaffold(
appBar: AppBar(title: Text('Color Matching')),
body: Center(child: Text('Hello Flutter!')),
),
);
Use Case: Kurumsal uygulamalar için daha tutarlı bir tema sistemi oluşturmak.
Transition Animation API ile Özel Geçişler
Flutter 3.27, sayfa geçişlerini daha kolay özelleştirmek için yeni animasyon API’leri sunuyor.
Örnek Kullanım:
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
);Use Case: Sayfa geçişlerine animasyonlar eklemek, uygulamalara profesyonel bir dokunuş katmak.
Gradiant Theme Desteği
Yeni güncelleme, degrade (gradient) temaları destekleyerek modern tasarımlara olanak sağlıyor.
Örnek Kullanım:
Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.blue, Colors.purple],
),
),
child: Center(child: Text('Gradient Theme')),
);
Use Case: Ana ekranlara görsel çekicilik kazandırır.
Hata Düzeltmeleri ve Stabilite
- Önceki sürümlerde bildirilen birçok hata düzeltildi.
- Örneğin, iOS’ta bazı animasyon hataları ve Android’de eski cihazlarla uyum sorunları giderildi.
Sonuç
Flutter 3.27, performansı artırmak, geliştirici deneyimini iyileştirmek ve modern tasarım trendlerine uyum sağlamak için önemli bir adım oldu. Bu güncellemelerle ilgili daha fazla bilgi için Flutter resmi dokümanlarına göz atabilirsiniz.
Okuduğunuz için teşekkür ederim.
Beğendiyseniz, alkış düğmesine basmayı 👏 ve bu tür daha fazla içerik için beni takip etmeyi unutmayın.
Selin.
