Pembangunan Aplikasi Mudah Alih Flutter · Pelajaran

Medan Borang Tersuai

Cipta medan borang tersuai yang boleh digunakan semula dan disesuaikan dengan keperluan aplikasi tertentu, sekali gus meningkatkan modulariti serta pengalaman pengguna.

Pelajaran 3 daripada 411 langkah

Medan Borang Tersuai ialah pelajaran Pembangunan Aplikasi Mudah Alih Flutter percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Mengapa Medan Borang Tersuai?

Semasa membina aplikasi, anda sering memerlukan medan input yang serupa pada skrin yang berbeza. Contohnya ialah input e-mel, medan kata laluan atau nombor telefon.

Menyalin dan menampal kod TextFormField yang sama di merata-rata tempat boleh menghasilkan kod yang berserabut dan sukar diselenggara. Di sinilah medan borang tersuai berguna!

Apakah Medan Tersuai?

Medan borang tersuai pada asasnya ialah Widget Flutter yang membungkus widget input lain, seperti TextFormField, serta menambahkan penggayaan, pengesahan atau tingkah laku tertentu.

Boleh Digunakan Semula: Takrifkan sekali, gunakan di mana-mana.
Kekonsistenan: Memastikan semua input yang serupa kelihatan dan berfungsi dengan cara yang sama.
Kod Kemas: Mengurangkan kod berulang dan meningkatkan kebolehbacaan.

Struktur Medan Tersuai Asas

Mari mulakan dengan medan input teks tersuai yang ringkas. Kita akan mencipta StatelessWidget yang membungkus TextFormField. Ini membolehkan kita mentakrifkan rupa dan gaya asasnya.

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'),
        ),
      ),
    ),
  ));
}

Menambahkan Pengawal & Pengesahan

Supaya medan tersuai kita benar-benar berguna, medan itu perlu menerima TextEditingController untuk mengurus nilainya dan FormFieldValidator untuk pengesahan. Kita menghantar kedua-duanya sebagai parameter kepada widget tersuai kita.

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;
              },
            ),
          ),
        ),
      ),
    ),
  ));
}

Medan E-mel Boleh Digunakan Semula

Mari cipta medan tersuai khusus untuk input e-mel. Medan ini akan mempunyai jenis papan kekunci yang telah ditetapkan dan corak pengesahan e-mel yang biasa. Ini memudahkan penggunaannya secara konsisten.

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'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Input Teks Tersuai Generik

Bagaimana jika anda memerlukan medan tersuai yang cukup fleksibel untuk pelbagai input teks (nama, alamat dan sebagainya), tetapi masih menawarkan penggayaan tersuai? Anda boleh menghantar lebih banyak sifat untuk menjadikannya generik.

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'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Menambahkan Elemen Interaktif

Medan tersuai juga boleh menyertakan elemen interaktif seperti ikon akhiran yang berubah keadaan. Contoh biasa ialah medan kata laluan dengan togol untuk memaparkan atau menyembunyikan teks.

Untuk tujuan ini, medan tersuai kita perlu menjadi StatefulWidget bagi mengurus keadaan keterlihatan.

Medan Kata Laluan Tersuai dengan Togol

Berikut ialah cara membina medan kata laluan tersuai yang membolehkan pengguna menogol keterlihatan kata laluan. Perhatikan penggunaan StatefulWidget untuk mengurus keadaan dalaman _obscureText.

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'),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

Faedah Medan Tersuai

Penggunaan medan borang tersuai meningkatkan pembangunan dan penyelenggaraan aplikasi anda dengan ketara:

Kod DRY: Jangan Ulangi Diri Sendiri, lalu menghasilkan kod yang lebih sedikit.
Kemas Kini Lebih Mudah: Ubah satu medan tersuai, dan semua kejadiannya akan dikemas kini secara automatik.
UX Lebih Baik: Memastikan pengalaman pengguna yang konsisten dan intuitif di seluruh aplikasi anda.
Logik Dipermudah: Merangkum logik pengesahan atau UI yang kompleks dalam medan itu sendiri.

Semakan Pantas: Medan Tersuai

Antara berikut, yang manakah faedah utama mencipta medan borang tersuai dalam Flutter?

Jawab dalam pelajaran interaktif

Imbas Kembali: Medan Borang Tersuai

Anda telah mempelajari cara mencipta medan borang tersuai dalam Flutter! Dengan membungkus widget input sedia ada dalam StatelessWidget atau StatefulWidget anda sendiri, anda boleh membina komponen input yang boleh digunakan semula, konsisten dan mudah diselenggara.

Pendekatan ini membantu memastikan kod anda kemas, memusatkan reka bentuk dan pengesahan, serta meningkatkan pengalaman pengguna dengan ketara melalui penyediaan antara muka yang seragam di seluruh aplikasi anda.

Percuma untuk bermula

Pelajari Dart dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 22
Pelajaran: 88

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Medan Borang Tersuai” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Pembangunan Aplikasi Mudah Alih Flutter, termasuk “Medan Borang Tersuai”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Pembangunan Aplikasi Mudah Alih Flutter merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Medan Borang Tersuai”?

Cipta medan borang tersuai yang boleh digunakan semula dan disesuaikan dengan keperluan aplikasi tertentu, sekali gus meningkatkan modulariti serta pengalaman pengguna. Anda berlatih Pembangunan Aplikasi Mudah Alih Flutter menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pembangunan Aplikasi Mudah Alih Flutter?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Mudah Alih Flutter di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Medan Borang Tersuai” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pembangunan Aplikasi Mudah Alih Flutter ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Mudah Alih Flutter menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pembangunan Aplikasi Mudah Alih Flutter