InheritedWidget – apabila kamu seorang mobile developer, tentunya sudah tidak asing lagi dengan apa itu Flutter. Salah satu framework mobile development yang cukup populer saat ini. Framework yang mampu meluncurkan aplikasi yang dapat dijalankan di berbagai platform hanya dalam satu basis kode saja.
Aplikasi yang dibangun dengan Flutter pada dasarnya semua berisi sebuah widget. Terdapat dua jenis widget yang sering kita gunakan, antara lain StatefulWidget dan StatelessWidget. Namun, apakah kamu pernah mendengar mengenai InheritedWidget? Kenapa kita membutuhkan jenis widget ini dan kapan kita menerapkannya? Yuk, kenali melalui penjelasan berikut.
Apa itu InheritedWidget?
InheritedWidget adalah widget yang berfungsi untuk menampung data yang dapat digunakan pada widget turunannya secara langsung tanpa mengirimkannya melalui constructor.
Apabila kita memiliki struktur widget seperti pada gambar diatas, dan pada Widget A terdapat sebuah data. Lalu, bagaimana cara kita membagikan data tersebut untuk digunakan di Widget B dan juga di Widget C?
Mungkin kita dapat mengirimkan data tersebut ke setiap widget, atau bisa juga menyimpan di database lokal. Kedua cara tersebut memang bisa dilakukan, tapi akan sangat merepotkan bukan? Nah, disinilah peran InheritedWidget sangat dibutuhkan.
Dengan InheritedWidget, widget B maupun widget C dapat langsung mengambil data yang ada pada widget A, tanpa harus melalui widget yang ada diantara widget-widget yang lain.
InheritedWidget digunakan sebagai arsitektur salah satu state management yang paling populer dan mudah digunakan yaitu Provider.
Contoh Penggunaan InheritedWidget
Pertama kita akan membuat class untuk InheritedWidgetnya. Disini kita akan mencoba menyimpan value Color.
Di code tersebut kita menyimpan value colorPrimary.
Kita menggunakan method of yang static untuk mempermudah kita dalam mengambil value nantinya.
class FrogColor extends InheritedWidget {
const FrogColor({
super.key,
required this.color,
required super.child,
});
final Color color;
static FrogColor of(BuildContext context) {
final FrogColor? result = context.dependOnInheritedWidgetOfExactType<FrogColor>();
assert(result != null, 'No FrogColor found in context');
return result!;
}
@override
bool updateShouldNotify(FrogColor old) => color != old.color;
}Sekarang kita akan menggunakan InheritedWidget tersebut pada MyPage.
class MyPage extends StatelessWidget {
const MyPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: FrogColor(
color: Colors.green,
child: Builder(
builder: (BuildContext innerContext) {
return Text(
'Hello Frog',
style: TextStyle(color: FrogColor.of(innerContext).color),
);
},
),
),
);
}
}
