Bu yazıda StateProvider ve ConsumerWidget kullanarak, BottomNavigationBar yönetimini inceleyeceğiz ve uygulayacağız. Bunu yaparken Provider değil, Riverpod kullanacağız. Öncelikle StateProvider ne işe yarar buna bakalım.
StateProvider nedir?
Basit state objelerimizin tutulmasına olanak sağlayan bir Provider çeşidi olan StateProvider, uygulama içerisinde her yerden erişilmesi gereken objeleri dağıtmanıza olanak sağlar. BottomNavigationBar’ın currentIndex parametresi, DarkMode’un seçili olup olmadığı vb. değişkenler buna örnek olarak gösterilebilir.
ConsumerWidget nedir?
Providerlarda oluşturduğunuz nesneleri UI içerisinde kullanabilmenizi sağlayan bir çeşit widget tipi. Consumer, yalnızca altında bulunan widgetları rebuild ederken, ConsumerWidget, WidgetRef ile izlediği providerda değişiklik olduğu durumda tüm state’i yeniden rebuild eder.
BottomNavigationBar’ı kodlayalım
final homeIndexProvider = StateProvider<int>((ref) {
return 0;
});
class HomeView extends ConsumerWidget {
const HomeView({Key? key}) : super(key: key);
final List<Widget> list = const [
MapView(),
ConfigView(),
];
@override
Widget build(BuildContext context, WidgetRef ref) {
var index = ref.watch(homeIndexProvider.state);
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
onTap: (value) {
ref.refresh(homeIndexProvider.state).state = value;
},
currentIndex: index.state,
items: const [
BottomNavigationBarItem(
label: 'Ana Sayfa',
icon: Icon(Icons.home),
),
BottomNavigationBarItem(
label: 'Ayarlar',
icon: Icon(Icons.settings),
)
],
),
body: SafeArea(
child: IndexedStack(
index: index.state,
children: list,
),
),
);
}
}
Kodun anlaşılmayan kısımlarını parçalara bölelim şimdi:
var index = ref.watch(homeIndexProvider.state);Öncelikle ref değişkeni ile tüm providerlara erişebilirsiniz. ref.watch(), ref.read(), ref.listen() vb. tüm fonksiyonlarla, oluşturduğunuz provider’ın nesnesini, sonucunu, objesini, ne return ettiyseniz onu alabilirsiniz. Bu nesneye erişmek için de state objesini kullanmanız gerekmektedir.
onTap: (value) {
ref.refresh(homeIndexProvider.state).state = value;
},onTap fonksiyonu çağrıldığında yani kullanıcı navigasyon üzerinde bir nesneye tıkladığında yeni oluşan değeri refresh fonksiyonuyla, provider’ın state’ine yazalım.
currentIndex: index.state,En sonunda da, currentIndex kısmına, provider objemizin bize döndürdüğü state’i ekleyelim.
Basit bir şekilde ConsumerWidget ve StateProvider’ı projemizde hayati sayılabilecek bir yerde kullanmış olduk. Riverpod’u olabildiğince basit nasıl kullanabileceğinizi ufak örneklerle blogumda yazmaya devam edeceğim. İlerleyen yazılarda vakit buldukça API işlemlerine, lokasyon servislerine, bluetooth servislerine, database işlemlerine giriş yapacağız. 🙂 Seriyi takipte kalmaya devam edin.
Okuyucuya Not
Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.
Sağlıcakla kalın!