Form এবং Input Fields তৈরি করা

Flutter এ Form এবং Input Fields তৈরি করে আপনি একটি পূর্ণাঙ্গ ফর্ম ইনপুট ব্যবস্থা তৈরি করতে পারেন, যেখানে ব্যবহারকারী বিভিন্ন তথ্য ইনপুট করতে পারে। একটি Form সাধারণত এক বা একাধিক Input Fields ধারণ করে, যেমন TextField, Dropdown, Checkbox, ইত্যাদি। নিচে একটি Form এবং বিভিন্ন Input Fields তৈরি করার ধাপসমূহ এবং উদাহরণ দেয়া হলো।

Form এবং Input Fields তৈরির ধাপসমূহ:

১. Form তৈরি করা:

Form তৈরি করার জন্য Form Widget ব্যবহার করা হয়। এটি সাধারণত একটি গ্লোবাল কী (GlobalKey<FormState>) এর সাথে যুক্ত থাকে, যা Form এর স্টেট পরিচালনা করতে সহায়তা করে।

import 'package:flutter/material.dart';

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

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

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

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

  // Controllers for input fields
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  String? _selectedGender;
  bool _agreeToTerms = false;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            controller: _nameController,
            decoration: InputDecoration(
              labelText: 'Name',
              border: OutlineInputBorder(),
            ),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your name';
              }
              return null;
            },
          ),
          SizedBox(height: 16.0),
          TextFormField(
            controller: _emailController,
            decoration: InputDecoration(
              labelText: 'Email',
              border: OutlineInputBorder(),
            ),
            keyboardType: TextInputType.emailAddress,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your email';
              } else if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
                return 'Please enter a valid email';
              }
              return null;
            },
          ),
          SizedBox(height: 16.0),
          DropdownButtonFormField<String>(
            value: _selectedGender,
            hint: Text('Select Gender'),
            items: ['Male', 'Female', 'Other'].map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String? newValue) {
              setState(() {
                _selectedGender = newValue;
              });
            },
            validator: (value) {
              if (value == null) {
                return 'Please select a gender';
              }
              return null;
            },
          ),
          SizedBox(height: 16.0),
          CheckboxListTile(
            title: Text('I agree to the terms and conditions'),
            value: _agreeToTerms,
            onChanged: (bool? value) {
              setState(() {
                _agreeToTerms = value!;
              });
            },
            controlAffinity: ListTileControlAffinity.leading,
          ),
          SizedBox(height: 16.0),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate() && _agreeToTerms) {
                // Form is valid and terms are agreed
                print('Name: ${_nameController.text}');
                print('Email: ${_emailController.text}');
                print('Gender: $_selectedGender');
              } else if (!_agreeToTerms) {
                // If terms are not agreed
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Please agree to the terms')),
                );
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

কোডের ব্যাখ্যা:

• _formKey: এটি একটি গ্লোবাল কী যা ফর্মের স্টেট ম্যানেজ করতে সাহায্য করে এবং ফর্ম যাচাই করতে ব্যবহৃত হয়।
• TextFormField: নাম এবং ইমেইল ইনপুট ফিল্ড তৈরি করতে ব্যবহার করা হয়েছে।
  • validator প্রপার্টি ইনপুট যাচাই করে এবং কোনো ত্রুটি থাকলে মেসেজ দেখায়।
• DropdownButtonFormField: একটি ড্রপডাউন তৈরি করা হয়েছে, যেখানে ব্যবহারকারী লিঙ্গ নির্বাচন করতে পারেন।
• CheckboxListTile: শর্তাবলী গ্রহণের জন্য একটি চেকবক্স ব্যবহার করা হয়েছে। এটি ফর্মের অংশ হিসেবে ইনপুট যাচাই করতে সহায়তা করে।
• ElevatedButton: একটি বাটন যা ক্লিক করলে ফর্মের ইনপুট যাচাই করা হয় এবং ফর্মের মান প্রদর্শিত হয় যদি ফর্মটি বৈধ হয়।

Form এবং Input Fields সংক্ষেপে আলোচনা:

Form এবং Input Handling এর সুবিধা:

• ইনপুট যাচাই: TextFormField এবং অন্যান্য Input Fields এর মাধ্যমে ইনপুট যাচাই করে ব্যবহারকারীর সঠিক ইনপুট নিশ্চিত করা যায়।
• ইউজার ফ্রেন্ডলি: ইনপুট ফিল্ড এবং বাটন দিয়ে সহজ এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরি করা যায়।
• ডেটা সংগ্রহ: ফর্ম ব্যবহার করে ব্যবহারকারীর ডেটা সংগ্রহ এবং প্রক্রিয়াজাত করা সহজ হয়।

এই ধাপগুলো অনুসরণ করে আপনি Flutter এ একটি পূর্ণাঙ্গ ফর্ম তৈরি করতে পারবেন, যা ব্যবহারকারীর ইনপুট গ্রহণ ও যাচাই করে এবং প্রয়োজনীয় ডেটা সংগ্রহ করে।