Why do we need an InheritedWidget in Flutter code?

Hallo teman”, kali ini kita akan membahas tentang Flutter lagi nih. Flutter developer tentu cukup sering menggunakan StatelessWidget dan juga StatefulWidget. Lalu bagaimana dengan InheritedWidget? InheritedWidget adalah widget yang cukup berbeda dengan Stateless dan Stateful widget.

Penjelasan

Widget ini hanya memiliki fungsi untuk menampung data yang diinginkan. Biasanya widget ini tidak memiliki logic tambahan. Lalu kenapa harus menggunakan InheritedWidget? Jika kita telah memiliki project yang cukup kompleks, tentu kita akan memiliki widget yang memiliki banyak turunan. Seperti berikut:

Jika kita memiliki struktur widget seperti di ilustrasi, dan pada Widget A terdapat sebuah data. Bagaimana caranya untuk menshare data tersebut atau diambil untuk digunakan di Widget B dan juga di Widget C.

Mungkin kita bisa mengirimkan value ke setiap widget? Atau bagaimana jika menyimpan ke database local? Ya tentu kedua cara tersebut bisa dilakukan, tapi bukankah itu jadi merepotkan? Nah di sini lah InheritedWidget memiliki peran penting.

Dengan InheritedWidget, Widget B atau Widget C bisa langsung mengambil data yang ada pada Widget A, tanpa harus melalui widget yang ada diatara mereka. Praktis bukan? Kita akan coba langsung ke codenya ya.

Code

Nah sebelum ke coding, kita akan coba menyederhanakan struktur widget, agar lebih mudah dipahami ya. Kita akan coba buat widget dengan struktur seperti berikut:

Nah pada struktur tersebut kita akan mencoba untuk mendapatkan value di Widget A dari Widget C dan Widget D.

Pertama kita akan membuat class untuk InheritedWidgetnya. Disini kita akan mencoba menyimpan value Color. Color ini nantinya akan digunakan di Widget C dan Widget D untuk warna dari text. Berikut codenya:

class TextColor extends InheritedWidget {
  const TextColor({
    @required this.colorPrimary,
    @required Widget child,
  })  : assert(colorPrimary != null),
        assert(child != null),
        super(child: child);

  final Color colorPrimary;

  static TextColor of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<TextColor>();
  }

  @override
  bool updateShouldNotify(TextColor old) => colorPrimary != old.colorPrimary;
}

• Di code tersebut kita menyimpan value colorPrimary
• Kita menggunakan method of yang static untuk mempermudah kita dalam mengambil value nantinya

Sekarang kita akan menggunakan InheritedWidget tersebut pada Widget A, sesuai dengan struktur yang telah kita buat sebelumnya.

class WidgetA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "InheritedWidget",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: TextColor(colorPrimary: Colors.red, child: WidgetB()),
    );
  }
}

• TextColor merupakan InheritedWidget yang telah kita buat sebelumnya
• Pada TextColor kita memberikan value colorPrimary yang nantinya akan kita gunakan di widget C dan widget D

Setelah itu kita akan membuat widget B, widget C, dan juga widget D

class WidgetB extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(
          "Child One",
        ),
        WidgetC()
      ],
    );
  }
}

class WidgetC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textColor = TextColor.of(context);

    return Column(
      children: [
        Text(
          "Child Two",
          style: TextStyle(color: textColor.colorPrimary),
        ),
        WidgetD()
      ],
    );
  }
}

class WidgetD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final textColor = TextColor.of(context);

    return Column(
      children: [
        Text(
          "Child Three",
          style: TextStyle(color: textColor.colorPrimary),
        )
      ],
    );
  }
}

• Pada widget C dan widget D, kita mengambil data InheritedWidget yang terdapat di widget A dan menyimpannya pada textColor
• Kita menggunakan static method yaitu “of” dan cukup mengirimkan context sebagai parameter.

Nah jadi lebih mudah bukan? Kita bisa mengambil data yang ada di parent widget, meskipun kita berada di widget yang mungkin cukup jauh secara struktural 😀

Pertanyaan baru

Lalu bagaimana jika terjadi perubahan data pada InheritedWidget? Jika kita memiliki data yang dinamis atau kemungkinan perubahan data, maka gunakanlah InheritedModel.

Untuk pembahasan InheritedModel bakalan mimin pisah di tulisan lainnya, karena kalau digabung dengan tulisan ini, kayaknya bakalan kepanjangan ya :3

Nah next kita bakalan bahas tentang InheritedModel, ditunggu ya. Sekian dulu untuk tulisan kali ini. Semoga membantu ya, dan jangan lupa untuk tepuk tangan, dan dishare ya. Hal tersebut sangat berarti bagi mimin. 😀

Oh ya, blog ini juga punya tulisan menarik lainnya loh, baik itu tentang flutter maupun hal lainnya. Terimakasih 😀

• [English] Local Storage in Flutter with SQFLite
• Tiba-tiba pencarian menggunakan Bing di Google Chrome?
• [English] Local storage with shared_preferences in Flutter
• Menggunakan WebView di Flutter
• Relative Import vs Package Import di Flutter