Flutter Mobile Development · Pelajaran

Bidang Formulir Kustom

Buat bidang formulir kustom yang dapat digunakan kembali dan disesuaikan dengan kebutuhan aplikasi tertentu, sehingga modularitas dan pengalaman pengguna meningkat.

Bidang Formulir Kustom adalah pelajaran Flutter Mobile Development gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Flutter Mobile Development, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Why Custom Form Fields?

When building apps, you often need similar input fields across different screens. Think about email inputs, password fields, or phone numbers.

Copying and pasting the same TextFormField code everywhere can lead to messy, hard-to-maintain code. This is where custom form fields come in!

What is a Custom Field?

A custom form field is essentially a Flutter Widget that wraps other input widgets, like TextFormField, and adds specific styling, validation, or behavior.

Reusability: Define it once, use it everywhere.
Consistency: Ensures all similar inputs look and behave the same.
Clean Code: Reduces boilerplate and improves readability.

Basic Custom Field Structure

Let's start with a simple custom text input field. We'll create a StatelessWidget that wraps a TextFormField. This allows us to define its basic look and feel.

import 'package:flutter/material.dart';

class CustomTextInput extends StatelessWidget {
  final String hintText;

  const CustomTextInput({Key? key, required this.hintText}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        hintText: hintText,
        border: OutlineInputBorder(),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Custom Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: CustomTextInput(hintText: 'Enter your name'),
        ),
      ),
    ),
  ));
}

Adding Controllers & Validation

For our custom field to be truly useful, it needs to accept a TextEditingController to manage its value and a FormFieldValidator for validation. We pass these as parameters to our custom widget.

import 'package:flutter/material.dart';

class CustomValidatedInput extends StatelessWidget {
  final String hintText;
  final TextEditingController controller;
  final String? Function(String?)? validator;

  const CustomValidatedInput({
    Key? key,
    required this.hintText,
    required this.controller,
    this.validator,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      decoration: InputDecoration(
        hintText: hintText,
        border: OutlineInputBorder(),
      ),
      validator: validator,
    );
  }
}

void main() {
  final TextEditingController _nameController = TextEditingController();
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Validated Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            child: CustomValidatedInput(
              hintText: 'Enter your name (min 3 chars)',
              controller: _nameController,
              validator: (value) {
                if (value == null || value.length < 3) {
                  return 'Name must be at least 3 characters.';
                }
                return null;
              },
            ),
          ),
        ),
      ),
    ),
  ));
}

A Reusable Email Field

Let's create a specific custom field for email input. It will have a predefined keyboard type and a common email validation pattern. This makes it easy to use consistently.

import 'package:flutter/material.dart';

class CustomEmailField extends StatelessWidget {
  final TextEditingController controller;
  final String labelText;

  const CustomEmailField({
    Key? key,
    required this.controller,
    this.labelText = 'Email',
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      keyboardType: TextInputType.emailAddress,
      decoration: InputDecoration(
        labelText: labelText,
        border: OutlineInputBorder(),
        prefixIcon: Icon(Icons.email),
      ),
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your email.';
        }
        if (!RegExp(r"^[a-zA-Z0-9.]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
            .hasMatch(value)) {
          return 'Please enter a valid email.';
        }
        return null;
      },
    );
  }
}

void main() {
  final TextEditingController _emailController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Custom Email Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                CustomEmailField(controller: _emailController),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      print('Email: ${_emailController.text}');
                    }
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Generic Custom Text Input

What if you need a custom field that's flexible enough for various text inputs (names, addresses, etc.) but still offers custom styling? You can pass more properties to make it generic.

import 'package:flutter/material.dart';

class GenericCustomTextField extends StatelessWidget {
  final TextEditingController controller;
  final String labelText;
  final TextInputType keyboardType;
  final bool obscureText;
  final String? Function(String?)? validator;

  const GenericCustomTextField({
    Key? key,
    required this.controller,
    required this.labelText,
    this.keyboardType = TextInputType.text,
    this.obscureText = false,
    this.validator,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      keyboardType: keyboardType,
      obscureText: obscureText,
      decoration: InputDecoration(
        labelText: labelText,
        border: OutlineInputBorder(),
      ),
      validator: validator,
    );
  }
}

void main() {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Generic Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                GenericCustomTextField(
                  controller: _usernameController,
                  labelText: 'Username',
                  validator: (value) => value!.isEmpty ? 'Enter username' : null,
                ),
                SizedBox(height: 20),
                GenericCustomTextField(
                  controller: _passwordController,
                  labelText: 'Password',
                  obscureText: true,
                  validator: (value) => value!.length < 6 ? 'Min 6 chars' : null,
                ),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      print('Username: ${_usernameController.text}');
                      print('Password: ${_passwordController.text}');
                    }
                  },
                  child: Text('Login'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Adding Interactive Elements

Custom fields can also include interactive elements like suffix icons that change state. A common example is a password field with a toggle to show/hide text.

For this, our custom field needs to be StatefulWidget to manage the visibility state.

Custom Password Field with Toggle

Here's how to build a custom password field that allows users to toggle password visibility. Notice the use of StatefulWidget to manage the internal _obscureText state.

import 'package:flutter/material.dart';

class CustomPasswordField extends StatefulWidget {
  final TextEditingController controller;
  final String labelText;

  const CustomPasswordField({
    Key? key,
    required this.controller,
    this.labelText = 'Password',
  }) : super(key: key);

  @override
  _CustomPasswordFieldState createState() => _CustomPasswordFieldState();
}

class _CustomPasswordFieldState extends State<CustomPasswordField> {
  bool _obscureText = true;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: widget.controller,
      obscureText: _obscureText,
      decoration: InputDecoration(
        labelText: widget.labelText,
        border: OutlineInputBorder(),
        prefixIcon: Icon(Icons.lock),
        suffixIcon: IconButton(
          icon: Icon(
            _obscureText ? Icons.visibility : Icons.visibility_off,
          ),
          onPressed: () {
            setState(() {
              _obscureText = !_obscureText;
            });
          },
        ),
      ),
      validator: (value) {
        if (value == null || value.length < 6) {
          return 'Password must be at least 6 characters.';
        }
        return null;
      },
    );
  }
}

void main() {
  final TextEditingController _passwordController = TextEditingController();
  final _formKey = GlobalKey<FormState>();

  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Password Field Demo')),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: _formKey,
            child: Column(
              children: [
                CustomPasswordField(controller: _passwordController),
                SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      print('Password: ${_passwordController.text}');
                    }
                  },
                  child: Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Benefits of Custom Fields

Using custom form fields significantly improves your application's development and maintenance:

Code DRYness: Don't Repeat Yourself, leading to less code.
Easier Updates: Change one custom field, and all instances update automatically.
Better UX: Ensures a consistent and intuitive user experience across your app.
Simplified Logic: Encapsulates complex validation or UI logic within the field itself.

Quick Check: Custom Fields

Which of the following are primary benefits of creating custom form fields in Flutter?

Recap: Custom Form Fields

You've learned how to create custom form fields in Flutter! By wrapping existing input widgets in your own StatelessWidget or StatefulWidget, you can build reusable, consistent, and maintainable input components.

This approach helps keep your code clean, centralizes design and validation, and drastically improves the user experience by providing a unified interface across your application.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Bidang Formulir Kustom” gratis?

Ya — teks lengkap “Bidang Formulir Kustom” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Flutter Mobile Development, upgrade ke CoddyKit PRO. Kursus Flutter Mobile Development mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Bidang Formulir Kustom”?

Buat bidang formulir kustom yang dapat digunakan kembali dan disesuaikan dengan kebutuhan aplikasi tertentu, sehingga modularitas dan pengalaman pengguna meningkat. Kamu berlatih Flutter Mobile Development dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Flutter Mobile Development?

Tidak diperlukan pengalaman sebelumnya. Flutter Mobile Development di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Bidang Formulir Kustom” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Flutter Mobile Development ini?

Ya. Setiap pelajaran Flutter Mobile Development menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Flutter Mobile Development