{"id":89,"date":"2025-09-27T12:24:07","date_gmt":"2025-09-27T12:24:07","guid":{"rendered":"https:\/\/infokand23.my.id\/2015\/?p=89"},"modified":"2025-10-01T00:40:30","modified_gmt":"2025-10-01T00:40:30","slug":"input-widgets-dan-basic-form","status":"publish","type":"post","link":"https:\/\/infokand23.my.id\/2015\/input-widgets-dan-basic-form\/","title":{"rendered":"Input Widgets dan Basic Form"},"content":{"rendered":"\n

Praktikum kali ini bertujuan untuk membuat beberapa input widgets dan mengontrol inputan dari user. Sebelum melakukan praktikum ada beberapa hal yang perlu kita ketahui, langsung saja masuk ke pembahasan kita pada praktikum kali ini.<\/p>\n\n\n\n

Basic Form<\/mark><\/p>\n\n\n\n

Basic Form merupakan widget yang berfungsi sebagai inputan nilai seperti TextField, TextFormField, CheckBox, dan sebagainya. Basic form kita gunakan untuk validasi dan mengelola inputan dari berbagai field. <\/p>\n\n\n\n

Form akan memberikan tampilan inputan kemudian inputan akan diperiksa apakah sudah sesuai dengan aturan yang kita tetapkan, selanjutnya data inputan akan diambil nilainya setelah proses pengecekan selesai dilakukan.<\/p>\n\n\n\n

Text Field<\/mark><\/p>\n\n\n\n

TextField adalah widget yang digunakan untuk memasukan text oleh pengguna, widget ini biasa digunakan untuk membuat form inputan seperti form login, pencarian, dan sebagainya . Fitur TextField ini dapat menerima input dari keyboard, memiliki properti lengkap (stle, decoration, dan jenis inputan), dan dapat mengelola teks menggunakan TextEditingController. <\/p>\n\n\n\n

TextFormField<\/mark><\/p>\n\n\n\n

TextFormField adalah widget versi lengkap dari TextField yang secara otomatis terintegrasi dengan logika validasi dan manajemen state dari sebuah form. Terdapat beberapa fitur TextFormField diantaranya :<\/p>\n\n\n\n

    \n
  1. Menerima input teks dari keyboard.<\/li>\n\n\n\n
  2. Memiliki properti validator yang berfungsi untuk memeriksa apakah input sudah sesuai
    dengan aturan yang ditentukan.<\/li>\n\n\n\n
  3. Menampilkan pesan error secara otomatis di bawah field jika validasi gagal.<\/li>\n\n\n\n
  4. Berinteraksi dengan FormState untuk melakukan validasi secara kolektif dengan validate () method.<\/li>\n<\/ol>\n\n\n\n

    GlobalKey<FormState><\/mark><\/p>\n\n\n\n

    GlobalKey merupakan objek unik atau key yang digunakan untuk mengidentifikasi dan mengakses state secara global, artinya kita dapat mengakses widget dari widget mana saja. Kemudian, apa itu FormState? FormState adalah kelas yang mengelola status dari From, seperti status validasi setiap form inputan pada (TextFormField). <\/p>\n\n\n\n

    Menggunakan GlobalKey pada widget form, maka kita dapat memanggil metode seperti validate() atau save() dari luar widget, biasanya dari onPressed pada ElevatedButton.<\/p>\n\n\n\n

    Validate()<\/mark><\/p>\n\n\n\n

    Metode validate() merupakan sebuah fungsi yang terdapat FormState yang digunakan untuk menjalankan validasi pada setiap TextFormField yang ada di dalam form. Ketika kita memanggil _formKey.currentState!.validate(), maka Flutter akan: <\/p>\n\n\n\n

      \n
    1. Mengecek setiap TextFormField yang terikat pada form tersebut<\/li>\n\n\n\n
    2. Menjalankan fungsi validator yang telah didefinisikan pada setiap TextFormField<\/li>\n\n\n\n
    3. Jika fungsi validator mengembalikan String (pesan error), validate() akan menghentikan proses dan mengembalikan nilai false. Pesan error tersebut akan ditampilkan di bawah TextFormField tersebut<\/li>\n\n\n\n
    4. Jika semua fungsi validator mengembalikan null (tidak ada error), validate() akan mengembalikan nilai true<\/li>\n<\/ol>\n\n\n\n

      SetState()<\/mark><\/p>\n\n\n\n

      setState merupakan sebuah method yang ada pada flutter, method ini digunakan untuk
      rebuild ulang state yang ada pada StatefulWidget atau secara sederhana method ini
      digunakan untuk memberitahu flutter bahwa state yang ada pada StatefulWidget telah
      berubah dan widget tersebut perlu untuk rebuild.<\/p>\n\n\n\n

      Misalkan kita memiliki variable name yang mempunyai value \u201csakura\u201d yang akan diubah
      menjad \u201csakura sayonara\u201d didalam StatefulWidget maka tampilan teks tersebut tidak
      akan berubah sebelum memanggil method setState().<\/p>\n\n\n\n

      Const<\/mark><\/p>\n\n\n\n

      Kata kunci const pada widget Flutter digunakan untuk membuat widget menjadi konstanta
      pada saat kompilasi (compile-time). Penggunaan const dapat meningkatkan peforma karena widget const akan dibuat sekali dan akan disimpan pada memori sehingga dapat digunakan Kembali tanpa build ulang. Jika tidak menggunakan const maka widget akan di build() berkali-kali.<\/p>\n\n\n\n

      Setelah memahami materi di atas mari kita eksekusi dan implementasikan dengan mengikuti langkah berikut :<\/p>\n\n\n\n

      A. Basic Form TextField<\/p>\n\n\n\n

        \n
      1. Buat file dart baru dengan nama form-textfield di dalam folder lib<\/li>\n\n\n\n
      2. Buat dan pahami komen pada kodingan seperti berikut <\/li>\n<\/ol>\n\n\n\n
        import 'package:flutter\/material.dart';\n\nvoid main() => runApp(const MyApp());   \/\/entry poin apk flutter<\/mark>\n\nclass MyApp extends StatelessWidget { \/\/di sini kita make statelees dlu karna tampilannya statis<\/mark>\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text('Basic Form'),\n        ),\n        body: const MyForm(),\n      ),\n    );\n  }\n}\n\nclass MyForm extends StatefulWidget {  \/\/nah di myform ini kita make stateful karena tampilannya bisa berubah <\/mark>\n  const MyForm({super.key});\n\n  @override\n  State<MyForm> createState() => _MyFormState();  \/\/ini tuh kita bikin state yang menghubungkan ke _MyFormState<\/mark>\n  \/\/jadi Validasi untuk MyForm  di atur di dalam _MyFormState<\/mark>\n}\n\n\/\/nah kita bikin kelas privat _MyformState \n\/\/kita bikin privat biar ga bisa semabarang diakses dari luar\n\/\/Kita extend juga sama State<MyForm> biar semua daata yang bisa berubah ditaruh di sini \n\/\/Kalau data di _MyFormState berubah, otomatis UI MyForm akan di-rebuild<\/mark>\nclass _MyFormState extends State<MyForm> {\n  final TextEditingController _controller = TextEditingController();\n  \/\/TextEditingController dipakai untuk mengontrol dan membaca isi TextField.\n  \/\/kita bisa ambil textnya dengan _controller.text\n  \/\/kita pake final karena controller itu ga berubah referensinya tapi isinya<\/mark> bisa berubah\n  String _nama = \"\"; \/\/variabel ini untuk menyimpan hasil input setelah tombol ditekan<\/mark>\n\n  @override\n  void dispose() {    \/\/dipanggil otomatis ketika kita pindah halaman<\/mark>\n    _controller.dispose(); \/\/dipanggil untuk membersihkan resource <\/mark>\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Padding(\n      padding: const EdgeInsets.all(20.0),\n      child: Column(\n        crossAxisAlignment: CrossAxisAlignment.start,\n        children: [\n          const Text('Masukan nama anda:'),\n          const SizedBox(height: 10),\n          TextField(\n            controller: _controller,    \/\/nah di sini kita memanggil _controller<\/mark>\n            keyboardType: TextInputType.text,\n            decoration: const InputDecoration(   \/\/decoration text<\/mark>\n              labelText: 'Nama Lengkap',\n              hintText: 'Contoh Sherly',\n              border: OutlineInputBorder(),\n              prefixIcon: Icon(Icons.person),\n            ),\n            onChanged: (text) {  \/\/fungsi onChanged ini dipanggil setiap TextField berubah<\/mark>\n              print('Sedang mengetik teks: $text'); \n              \/\/$text di sini ialah parameter fungsi anonim agar flutter otomatis <\/mark>mengirimkan nilai teks terbaru ke parameter tiap user ngetik\n            },\n          ),\n          const SizedBox(height: 20),\n          ElevatedButton(\n            onPressed: () {\n              setState(() {\n                _nama = _controller.text;\n              });\n\n            },\n            style: ElevatedButton.styleFrom(\n              backgroundColor: Colors.amber,\n              foregroundColor: Colors.black,\n            ),\n            child: const Text('Tampilkan nama'),\n          ),\n          const SizedBox(height: 20),\n          Text(\n            \"Halo, $_nama\",\n            style: const TextStyle(fontSize: 18),\n          ),\n        ],\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        B. form-textformfield<\/p>\n\n\n\n
          \n
        1. Bikin file form-textformfield.dart pada lib<\/li>\n\n\n\n
        2. Buat dan pahami komen pada kodingan berikut<\/li>\n<\/ol>\n\n\n\n
          import 'package:flutter\/material.dart';\n\nvoid main() => runApp(const MyApp());\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text(\"Basic Form TextFormField\"),\n        ),\n        body: const MyFormText(),\n      ),\n    );\n  }\n}\n\nclass MyFormText extends StatefulWidget {\n  const MyFormText({super.key});\n\n  @override\n  State<MyFormText> createState() => _MyFormTextState();\n}\n\nclass _MyFormTextState extends State<MyFormText> {\n  final _formKey = GlobalKey<FormState>();  \n\/\/GlobalKey ini kita gunakan agar kita bisa memanggil validate()ke semua TextFOrmField dalam form.\n\/\/kalo pada TextField sebelumnya tidak ada form & globalkey jadi validasinya manual<\/mark> \n\n  final _nameController = TextEditingController();\n  final _emailController = TextEditingController();\n\n  @override\n  void dispose() {\n    _nameController.dispose();\n    _emailController.dispose();\n    super.dispose();\n  }\n\n  void _submitForm() {  \/\/ini tuh untuk validasi otomatis<\/mark>\n    if (_formKey.currentState!.validate()) {\n      String name = _nameController.text;\n      String email = _emailController.text;\n\/\/Di TextFormField, validasi bisa dijalankan sekaligus untuk semua \/\/input dengan formKey.currentState!.validate().\n\/\/Setiap field akan menjalankan fungsi validator-nya masing-masing.\n\/\/Kalau semua valid \u2192 lanjut ambil data (_nameController.text).\n\/\/Sedangkan kalau TextField \u2192 validasi dilakukan manual per field, tidak bisa pakai validate()<\/mark>\n\n      ScaffoldMessenger.of(context).showSnackBar(\n        SnackBar(content: Text('Validasi berhasil: $name, $email')),\n      );\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Form(\n      key: _formKey,\n      child: Padding(\n        padding: const EdgeInsets.all(20.0),\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.start,\n          children: [\n            const SizedBox(height: 10),\n            TextFormField(  \/\/inputnya make textformfield di bagian ini\n              controller: _nameController,\n              decoration: const InputDecoration(\n                labelText: \"Nama : \",\n                border: OutlineInputBorder(),\n              ),\n              validator: (value) {\n                if (value == null || value.isEmpty) {\n                  return 'Masukkan nama anda';\n                }\n                return null;\n              },\n            ),\n            const SizedBox(height: 10),\n            TextFormField(\n              controller: _emailController,\n              decoration: const InputDecoration(\n                labelText: \"Email : \",\n                border: OutlineInputBorder(),\n              ),\n              validator: (value) {\n                if (value == null || value.isEmpty) {\n                  return 'Masukkan email anda';\n                }\n                if (!value.contains('@')) {\n                  return 'Email tidak valid';\n                }\n                return null;\n              },\n            ),\n            const SizedBox(height: 10),\n            SizedBox(\n              width: double.infinity,\n              child: ElevatedButton(\n                onPressed: _submitForm,\n                child: const Text('Submit'),\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n
          \"\"<\/figure>\n\n\n\n
          C.  Tugas<\/p>\n\n\n\n
          Setelah melakukan praktikum membuat basic form menggunakan widget TextField dan
          TextFormField, silahkan kerjakan Tugas berikut ini.<\/p>\n\n\n\n
          Instruksi :<\/strong><\/p>\n\n\n\n
            \n
          • Buatlah aplikasi kalkulator yang dapat menjalankan operasi kabataku<\/li>\n\n\n\n
          • Gunakan 2 buah widget inputan (TextField atau TextFormField) untuk menerima nilai
            inputan.<\/li>\n\n\n\n
          • Gunakan ElevatedButton untuk mengeksekusi operasi kabataku<\/li>\n\n\n\n
          • Gunakan widget Text untuk menampilkan hasil operasi<\/li>\n<\/ul>\n\n\n\n
            Jawaban :<\/strong><\/p>\n\n\n\n
            import 'package:flutter\/material.dart';\n\nvoid main() => runApp(const MyApp());\n\nclass MyApp extends StatelessWidget {\n  const MyApp({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      home: Scaffold(\n        appBar: AppBar(\n          title: const Text(\"Kalkulator APP\"),\n        ),\n        body: const MyCalcu(),\n      ),\n    );\n  }\n}\n\nclass MyCalcu extends StatefulWidget {\n  const MyCalcu({super.key});\n\n  @override\n  State<MyCalcu> createState() => _MyCalcu();\n}\n\nclass Kalkulator {\n  double tambah(double a, double b) => a + b;\n  double kurang(double a, double b) => a - b;\n  double kali(double a, double b) => a * b;\n  double bagi(double a, double b) {\n    if (b == 0) throw ArgumentError('Division by zero');\n    return a \/ b;\n  }\n}\n\nclass _MyCalcu extends State<MyCalcu> {\n  final _formKey = GlobalKey<FormState>();\n  final _a = TextEditingController();\n  final _b = TextEditingController();\n  final kalk = Kalkulator();\n\n  String _result = '';\n\n  @override\n  void dispose() {\n    _a.dispose();\n    _b.dispose();\n    super.dispose();\n  }\n\n  void _calculate(String op) {\n    if (!_formKey.currentState!.validate()) return;\n\n    final a = double.tryParse(_a.text);\n    final b = double.tryParse(_b.text);\n\n    if (a == null || b == null) {\n      ScaffoldMessenger.of(context).showSnackBar(\n        const SnackBar(content: Text('Masukan angka yang valid')),\n      );\n      return;\n    }\n\n    double hasil;\n    try {\n      switch (op) {\n        case '+':\n          hasil = kalk.tambah(a, b);\n          break;\n        case '-':\n          hasil = kalk.kurang(a, b);\n          break;\n        case 'x':\n          hasil = kalk.kali(a, b);\n          break;\n        case '\u00f7':\n          hasil = kalk.bagi(a, b);\n          break;\n        default:\n          return;\n      }\n\n      setState(() {\n        _result = hasil.toString();\n      });\n    } catch (e) {\n      ScaffoldMessenger.of(context).showSnackBar(\n        SnackBar(content: Text('Error: ${e.toString()}')),\n      );\n    }\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return Form(\n      key: _formKey,\n      child: Padding(\n        padding: const EdgeInsets.all(20.0),\n        child: Column(\n          mainAxisAlignment: MainAxisAlignment.start,\n          children: [\n            const SizedBox(height: 10),\n            TextFormField(\n              controller: _a,\n              decoration: const InputDecoration(\n                labelText: \"Inputkan angka 1\",\n                border: OutlineInputBorder(),\n              ),\n              validator: (value) {\n                if (value == null || value.isEmpty) {\n                  return 'Masukkan angka';\n                }\n                if (double.tryParse(value) == null) {\n                  return 'Bukan angka';\n                }\n                return null;\n              },\n            ),\n            const SizedBox(height: 10),\n            TextFormField(\n              controller: _b,\n              decoration: const InputDecoration(\n                labelText: \"Inputkan angka 2\",\n                border: OutlineInputBorder(),\n              ),\n              validator: (value) {\n                if (value == null || value.isEmpty) {\n                  return 'Masukkan angka';\n                }\n                if (double.tryParse(value) == null) {\n                  return 'Bukan angka';\n                }\n                return null;\n              },\n            ),\n            const SizedBox(height: 20),\n            Row(\n              mainAxisAlignment: MainAxisAlignment.spaceEvenly,\n              children: [\n                ElevatedButton(\n                  onPressed: () => _calculate('+'),\n                  child: const Text('+'),\n                ),\n                ElevatedButton(\n                  onPressed: () => _calculate('-'),\n                  child: const Text('-'),\n                ),\n                ElevatedButton(\n                  onPressed: () => _calculate('x'),\n                  child: const Text('x'),\n                ),\n                ElevatedButton(\n                  onPressed: () => _calculate('\u00f7'),\n                  child: const Text('\u00f7'),\n                ),\n              ],\n            ),\n            const SizedBox(height: 20),\n            Text(\n              'Hasil: $_result',\n              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),\n            )\n          ],\n        ),\n      ),\n    );\n  }\n}\n<\/code><\/pre>\n\n\n\n
            \"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"
            Praktikum kali ini bertujuan untuk membuat beberapa input widgets dan mengontrol inputan dari user. Sebelum melakukan praktikum ada beberapa hal yang perlu kita ketahui, langsung saja masuk ke pembahasan kita pada praktikum kali ini. Basic Form Basic Form merupakan widget yang berfungsi sebagai inputan nilai seperti TextField, TextFormField, CheckBox, dan sebagainya. Basic form kita gunakan untuk validasi dan mengelola inputan dari berbagai field. Form akan memberikan tampilan inputan kemudian inputan akan diperiksa apakah sudah sesuai dengan aturan yang kita tetapkan, selanjutnya data inputan akan diambil nilainya setelah proses pengecekan selesai dilakukan. Text Field TextField adalah widget yang digunakan untuk memasukan text oleh pengguna, widget ini biasa digunakan untuk membuat form inputan seperti form login, pencarian, dan sebagainya . Fitur TextField ini dapat menerima input dari keyboard, memiliki properti lengkap (stle, decoration, dan jenis inputan), dan dapat mengelola teks menggunakan TextEditingController. TextFormField TextFormField adalah widget versi lengkap dari TextField yang secara otomatis terintegrasi dengan logika validasi dan manajemen state dari sebuah form. Terdapat beberapa fitur TextFormField diantaranya : GlobalKey<FormState> GlobalKey merupakan objek unik atau key yang digunakan untuk mengidentifikasi dan mengakses state secara global, artinya kita dapat mengakses widget dari widget mana saja. Kemudian, apa itu FormState? FormState adalah kelas yang mengelola status dari From, seperti status validasi setiap form inputan pada (TextFormField). Menggunakan GlobalKey pada widget form, maka kita dapat memanggil metode seperti validate() atau save() dari luar widget, biasanya dari onPressed pada ElevatedButton. Validate() Metode validate() merupakan sebuah fungsi yang terdapat FormState yang digunakan untuk menjalankan validasi pada setiap TextFormField yang ada di dalam form. Ketika kita memanggil _formKey.currentState!.validate(), maka Flutter akan: SetState() setState merupakan sebuah method yang ada pada flutter, method ini digunakan untukrebuild ulang state yang ada pada StatefulWidget atau secara sederhana method inidigunakan untuk memberitahu flutter bahwa state yang ada pada StatefulWidget telahberubah dan widget tersebut perlu untuk rebuild. Misalkan kita memiliki variable name yang mempunyai value \u201csakura\u201d yang akan diubahmenjad \u201csakura sayonara\u201d didalam StatefulWidget maka tampilan teks tersebut tidakakan berubah sebelum memanggil method setState(). Const Kata kunci const pada widget Flutter digunakan untuk membuat widget menjadi konstantapada saat kompilasi (compile-time). Penggunaan const dapat meningkatkan peforma karena widget const akan dibuat sekali dan akan disimpan pada memori sehingga dapat digunakan Kembali tanpa build ulang. Jika tidak menggunakan const maka widget akan di build() berkali-kali. Setelah memahami materi di atas mari kita eksekusi dan implementasikan dengan mengikuti langkah berikut : A. Basic Form TextField B. form-textformfield C. Tugas Setelah melakukan praktikum membuat basic form menggunakan widget TextField danTextFormField, silahkan kerjakan Tugas berikut ini. Instruksi : Jawaban :<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":3,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/posts\/89\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infokand23.my.id\/2015\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}