راهنمای جامع کار با Form و Inputها در فلاتر

مقدمه

فرمها یکی از بخشهای اصلی برنامههای کاربردی هستند. اگر شما یک برنامهنویس فلاتر هستید، حتماً با چالشهایی مثل اعتبارسنجی دادهها، مدیریت وضعیت فرم و استفاده از انواع Input مانند TextField، Checkbox و Radio مواجه شدهاید. در این مقاله قصد داریم به شما کمک کنیم تا فرمهای قدرتمند و حرفهای بسازید.

ایجاد یک فرم ساده با Form ویجت

فلاتر برای مدیریت فرمها یک ویجت به نام Form ارائه میدهد. این ویجت یک ظرف (Container) برای گروهبندی چندین Input است.

مثال کد:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Form Example')),
        body: MyForm(),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16.0),
      child: Form(
        key: _formKey,
        child: Column(
          children: [
            TextFormField(
              decoration: InputDecoration(labelText: 'نام'),
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'لطفاً نام خود را وارد کنید';
                }
                return null;
              },
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('اطلاعات معتبر است')),
                  );
                }
              },
              child: Text('ارسال'),
            ),
          ],
        ),
      ),
    );
  }
}

کار با TextField

ویجت TextField یکی از پرکاربردترین ورودیها در فلاتر است که به کاربران امکان وارد کردن متن را میدهد.

ویژگیهای مهم:

• controller: کنترل مقدار داخل TextField.
• decoration: تنظیم ظاهر ورودی با استفاده از InputDecoration.
• keyboardType: تعیین نوع کیبورد (مثل اعداد یا متن).

مثال کد:

TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: 'ایمیل'),),

Checkbox

برای ورودیهایی که نیاز به انتخاب دو حالت (true/false) دارند، از Checkbox استفاده میشود.

مثال کد:

bool isChecked = false;
Checkbox(
value: isChecked,
onChanged: (bool? value) {
etState(() {
isChecked = value!;
});},),

Radio Button

برای انتخاب یک گزینه از بین چندین گزینه، از ویجت Radio استفاده کنید.

مثال کد:

int selectedValue = 1;Radio(
value: 1,
groupValue:selectedValue,
onChanged:(int? value){setState(()=>selectedValue=value!);},),

اعتبارسنجی فرمها

برای اعتبارسنجی دادههای ورودی کاربران، میتوانید از ویژگی validator در TextFormField استفاده کنید. این روش امکان بررسی شرایط مختلف مثل خالی بودن یا فرمت ایمیل را فراهم میکند.

نتیجه گیری

فلاتر امکانات بسیار قدرتمندی برای ساخت فرمهای حرفهای ارائه داده است. با استفاده از ترکیب ویجتهایی مثل TextField, Checkbox, و Radio همراه با قابلیت اعتبارسنجی دادهها، میتوانید تجربه کاربری عالی خلق کنید.