Cara Menggunakan VoidCallback dan Function(x) Callbacks untuk Berkomunikasi Antar Widget di Flutter

Dalam Flutter untuk komunikasi antar widget bisa menggunakan VoidCallback dan Function Callback.

VoidCallbacks adalah callback yang tidak mengembalikan nilai ke Parent Widget. Hal ini akan berguna jika kita hanya ingin memberitahu Parent Widget peristiwa yang terjadi pada Child Widget.

Function Callback adalah callback yang memberi tahu Parent Widget suatu peristiwa yang terjadi di Child Widget dan juga mengembalikan nilai ke Parent Widget.

typedef VoidCallback = void Function();

VoidCallbacks dan Function Callback sebenarnya adalah sama-sama sebuah fungsi. Perbedaannya hanya pada VoidCallback tidak memiliki argumen dan tidak mengembalikan data.

Pada artikel ini, Bardimin akan memberikan contoh sederhana penggunaan VoidCallback dan Function Callback pada aplikasi Flutter sederhana

1. Membuat proyek baru Flutter

Sebagai langkah pertama, buat proyek baru Flutter dengan Android Studio. Anda bisa melihat integrasi Flutter dan Android Studio pada artikel Cara Mudah Instal Flutter di Android Studio dan Windows.

Setelah proyek baru terbentuk, kita akan memodifikasi file contoh tersebut untuk membuat aplikasi sederhana yang menggunakan VoidCallback dan Function Callback.

Pada file “main.dart” ubah sebagai berikut.

import 'package:flutter/material.dart';
import 'parent_widget.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ParentWidgetPage(title: 'Flutter VoidCallback & Function Callback'),
    );
  }
}

2. Membuat Parent Widget

Kemudian buat file baru dengan nama “parent_widget.dart”. Pada file ini kita akan membuat fungsi “_voidCallback” dan “_functionCallback” yang akan kita panggil dari Child Widget.

Fungsi “_voidCallback” akan kita panggil dengan menggunakan “VoidCallback”.

  void _voidCallback() {
    setState(() {
      _counter++;
    });
  }

Fungsi “_functionCallback(int i)” dengan parameter akan kita panggil menggunakan “Function(x) Callback”.

  void _functionCallback(int i) {
    setState(() {
      _counter += i;
    });
  }

File “parent_widget.dart” yang kita buat selengkapnya sebagai berikut.

import 'package:flutter/material.dart';
import 'voidcallback_child_widget.dart';
import 'function_child_widget.dart';

class ParentWidgetPage extends StatefulWidget {
  const ParentWidgetPage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<ParentWidgetPage> createState() => _ParentWidgetPageState();
}

class _ParentWidgetPageState extends State<ParentWidgetPage> {
  int _counter = 0;

  void _voidCallback() {
    setState(() {
      _counter++;
    });
  }

  void _functionCallback(int i) {
    setState(() {
      _counter += i;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            VoidChildWidgetPage(voidCallback: _voidCallback),
            FunctionChildWidgetPage(functionCallback: _functionCallback),
          ],
        ),
      ),
    );
  }
}

3. Membuat VoidCallback Child Widget

Selanjutnya buat file “voidcallback_child_widget.dart”. Pada file ini kita akan membuat tombol yang akan memanggil fungsi “_voidCallback” pada file “parent_widget.dart”.

import 'package:flutter/material.dart';

class VoidChildWidgetPage extends StatelessWidget {
  final VoidCallback voidCallback;

  const VoidChildWidgetPage({Key? key, required this.voidCallback})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => voidCallback(),
      child: const Text("Void Callback"),
    );
  }
}

4. Membuat Function Callback Child Widget

Kemudian buat file “function_ child_widget.dart”. Sama seperti sebelumnya, pada file ini kita juga akan membuat tombol yang akan memanggil fungsi “_functionCallback(int i)” pada file “parent_widget.dart” yang akan mengembalikan nilai integer.

import 'package:flutter/material.dart';

class FunctionChildWidgetPage extends StatelessWidget {
  final Function(int) functionCallback;

  const FunctionChildWidgetPage({Key? key, required this.functionCallback})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => functionCallback(5),
      child: const Text("Fx Callback"),
    );
  }
}

Kemudian jalan proyek tersebut. Pada emulator anda akan melihat ada dua tombol, yaitu tombol “VoidCallback” dan “Fx Callback”.

Jika tombol “VoidCallback” anda klik, VoidCallback Child Widget hanya akan memanggil fungsi “_voidCallback” pada Parent Widget tanpa mengembalikan nilai apapun.

Sedangkan jika tombol “Fx Callback” anda klik, Function Callback Child Widget akan memanggil fungsi “_functionCallback(int i)” pada Parent Widget dengan mengembalikan nilai integer.