Membuat Custom Widget

Jika widget yang kita buat sudah terlalu komplek, akan sulit untuk dibaca jika disimpan dalam file main.dart, akan lebih mudah jika kita pisahkan dalam file tersendiri. WIdget ini dapat disebut sebagai custom widget.

Pada modul ini kita akan mengubah widget text yang menampilkan pertanyaan dari modul sebelumnya. Kita akan tambahkan styling sederhana agar pertanyaan bisa tampil lebih baik pada layar aplikasi.

Buat file baru, question.dart (untuk penamaan file bebas, sesuaikan dengan keperluan dan makna dari isi file).

import 'package:flutter/material.dart';

class Question extends StatelessWidget {
  final String qtext;

  Question(this.qtext);

  @override
  Widget build(BuildContext context) {
    return Container( 
      width: double.infinity,
      margin:EdgeInsets.all(8) ,
      child: Text(
        qtext, 
        style: TextStyle(fontSize: 26),
        textAlign: TextAlign.center,
      ),
    );
  }
}

Pembahasan Code

Class Question di extends dari StatelessWidget, dengan constructor yang akan melakukan inisialisasi variable qtext.

Variable qtex harus di deklarasikan menggunakan keyword final, karena StatelessWidget adalah imutable.

class Question extends StatelessWidget {
  final String qtext;

  Question(this.qtext);

Untuk pengaturan layout digunakan widget container. Dengan mengatur property width dan margin. Sementara property child diisi dengan widget Text dengan isi dari pertanyaan yang dipasing saat class dibuat.

double.infinity adalah enum yang akan mengambil lebar layar maksimum.

EdgeInsets.all(8) adalah constructor untuk membuat margin sebesar 8 pixel dengan semua arah (top, right, bottom dan left margin).

Sementara untuk main.dart, tambahkan import ‘./question.dart’; agar custom widget diakses.

import './question.dart';

Ganti perintah text untuk menampilkan question dengan custom widget Question yang telah kita buat diatas.

Question(questions[qIdx]['qtxt']),

import 'package:flutter/material.dart';

import './question.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']),
            RaisedButton(
              child: Text('Answer 1'),
              onPressed: btnAnswer,
            ),
            RaisedButton(
              child: Text('Answer 2'),
              onPressed: btnAnswer,
            ),
            RaisedButton(
              child: Text('Answer 3'),
              onPressed: btnAnswer,
            ),
          ],
        ),
      ),
    );
  }
}

Kesimpulan

Dapat kita lihat dari contoh sederhana diatas. Dengan menambahkan styling saja, widget menjadi cukup kompleks. Bila disimpan semua di file main.dart akan sulit untuk dibaca. Dan maintenance code akan menjadi sulit.