Passing Callback Function

Untuk menjelaskan passing callback function, kita akan buat lagi custom widget untuk answer button. Buat file answer.dart (silakan beri nama sesuai kebutuhan).

Answer akan diextends dari StatelessWidget, dengan variable untuk handling fungsi yang dipasing dan answer text.

Constructor akan menerima function pointer dan answer text yang akan ditampilkan pada button.

class Answer extends StatelessWidget {
  final Function btnHandler;
  final String ansText;

  Answer(this.btnHandler, this.ansText);

Styling untuk button adalah mengubah warna dasar button dan warna text.

import 'package:flutter/material.dart';

class Answer extends StatelessWidget {
  final Function btnHandler;
  final String ansText;

  Answer(this.btnHandler, this.ansText);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        color: Colors.blue,
        textColor: Colors.white,
        child: Text(ansText),
        onPressed: btnHandler,
      ),      
    );
  }
}

Pada main dart, perlu ditambahkan import custom widget answer yang telah kita buat diatas.

import './answer.dart';

Pada bagian menampilkan button diubah menjadi perintah berikut. Perintah ini akan mengambil setiap isi list answer dari variable questions kemudian ditampilkan dalam bentuk button.

...(questions[qIdx]['qans'] as List<String>).map((answer){
  return Answer(btnAnswer, answer);
}).toList()

Berikut code lengkap dari main.dart

import 'package:flutter/material.dart';

import './question.dart';
import './answer.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp>{
    var questions = [
      { 'qtxt': 'Warna favorite ?',
        'qans': ['Hitam', 'Merah', 'Putih'],
      },
      { 'qtxt': 'Olah raga favorite ?',
        'qans': ['Jogging', 'Yoga', 'Renang'],
      },
      { 'qtxt': 'Binatang favorite ?',
        'qans': ['Harimau', 'Ular', 'Kelinci'],
      },
    ];

  var qIdx = 0;

  void btnAnswer(){
    setState(() {
      qIdx = qIdx + 1;    
    });
    print(qIdx);
  }

  @override
  Widget build(BuildContext ctx) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Hello Flutter'),
        ),
        body: Column(
          children: [
            Question(questions[qIdx]['qtxt']),
            ...(questions[qIdx]['qans'] as List<String>).map((answer){
              return Answer(btnAnswer, answer);
            }).toList()
          ],
        ),
      ),
    );
  }
}