Menggunakan Stateful Widget

Masih menggunakan code dari modul sebelumnya, kita kembangkan dengan menambahkan variable questions, dan mengubah widget menjadi stateful.

Code dibawah adalah sebelum diubah menjadi stateful widget. Bila RaisedButton ditekan, screen tidak akan berubah menampilkan pertanyaan selanjutnya.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    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(){
    qIdx = qIdx + 1;
    print('button answer ditap..');
  }

  @override
  Widget build(BuildContext ctx) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Hello Flutter'),
        ),
        body: Column(
          children: [
            Text(questions[qIdx]['qtxt']),
            RaisedButton(
              child: Text('Answer 1'),
              onPressed: btnAnswer,
            ),
            RaisedButton(
              child: Text('Answer 2'),
              onPressed: btnAnswer,
            ),
            RaisedButton(
              child: Text('Answer 3'),
              onPressed: btnAnswer,
            ),
          ],
        ),
      ),
    );
  }
}

Agar perubahan data dapat mentriger Flutter untuk merender ulang screen, kita perlu mengubah code diatas ke stateful widget.

Anda dapat melakukan refactoring dengan menggunakan shortcut Ctrl + Shift + R, dan visual studio code akan memberikan suggestion factoring ke Stateful Widget.

Namun pada modul ini, kita akan lakukan secara manual. Agar kita bisa paham, bagaimana stateful widget dibuat.

Langkah pertama mengubah class MyApp extends StatelessWidget menjadi class MyAppState extends State (konvensi nama adalah nama widget yang kita buat ditambahkan kata State).

Pada fungsi btnAnswer, fungsi yang melakukan perubahan data, tambahkan fungsi setState()

class MyAppState extends State<MyApp> {
  var qIdx = 0;

  void btnAnswer(){
    setState(() {
      qIdx = qIdx + 1;    
    });
    print('button answer ditap..');
  }
...
...
...

...
}

Lalu tambahkan class MyApp extends StatefulWidget yang didalamnya akan mengembalikan MyAppState().

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

Silakan hot reload atau reload aplikasi, lalu coba tekan tombol. Maka pertanyaan akan berubah ke pertanyaan kedua yaitu Olah raga favorit?

Berikut isi code main.dart setelah dilakukan perubahan ke stateful widget.

import 'package:flutter/material.dart';

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

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

class MyAppState extends State<MyApp>{
  var qIdx = 0;

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

  @override
  Widget build(BuildContext ctx) {
    var questions = [
      { 'qtxt': 'Warna favorite ?',
        'qans': ['Hitam', 'Merah', 'Putih'],
      },
      { 'qtxt': 'Olah raga favorite ?',
        'qans': ['Jogging', 'Yoga', 'Renang'],
      },
      { 'qtxt': 'Binatang favorite ?',
        'qans': ['Harimau', 'Ular', 'Kelinci'],
      },
    ];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My Hello Flutter'),
        ),
        body: Column(
          children: [
            Text(questions[qIdx]['qtxt']),
            RaisedButton(
              child: Text('Answer 1'),
              onPressed: btnAnswer,
            ),
            RaisedButton(
              child: Text('Answer 2'),
              onPressed: btnAnswer,
            ),
            RaisedButton(
              child: Text('Answer 3'),
              onPressed: btnAnswer,
            ),
          ],
        ),
      ),
    );
  }
}

Pada modul berikutnya akan kita pelajari styling sederhana dan memisahkan custom widget kedalam file dart yang terpisah dari main.dart