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

7 Mei 2022

Home » Blog » Software » Cara Menggunakan VoidCallback dan Function(x) Callbacks untuk Berkomunikasi Antar Widget di Flutter

Dalam untuk komunikasi antar bisa menggunakan dan .

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

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

typedef VoidCallback = void Function();

VoidCallbacks dan 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 pada aplikasi sederhana

1. Membuat proyek baru Flutter

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

TOP TUTORIALS:  EaseUS BitWiper – Menghapus File Secara Permanen di 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 createState() => _ParentWidgetPageState();
}

class _ParentWidgetPageState extends State {
  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: [
            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: [
            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 anda akan melihat ada dua tombol, yaitu tombol “VoidCallback” dan “Fx Callback”.

TOP TUTORIALS:  Cara Melindungi File Zip dengan Kata Sandi di Windows 11
void 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.

0 Komentar

Kirim Komentar