การจัดการข้อมูลของ Form Element อื่นๆ ใน Flutter

ListTile(
  title: Text('This is title'),
  trailing: Checkbox(
  value: _termsChecked,
  onChanged: (bool? value) {
    setState(() {
      _termsChecked = value!;
    });
  },
),
),
CheckboxListTile(
  value: _termsChecked,
  onChanged: (value) {
    setState(() {
      _termsChecked = value!;
    });
  },
  subtitle: !_termsChecked
      ? Text(
          'Required',
          style: TextStyle(color: Colors.red, fontSize: 12.0),
        )
      : null,
  title: new Text(
    'I agree to the terms and condition',
  ),
  controlAffinity: ListTileControlAffinity.leading,
),

// กำหนดตัวแปร ลิสรายการ checkbox
List<Map<String, bool>> hobbies = [
  {'อ่านหนังสือ': true},
  {'วาดรูป': false},
  {'ดูหนัง': true},
  {'ช้อปปิ้ง': true},
];

// กำหนดตัวแปร เก็บค่าของแต่ละ checkbxo
List<bool> _checkHobby = [];

Divider(), // ตัว widget แบ่ง
Builder(builder: (context) { // เราใช้ Builder เพื่อที่จะใช้งานฟังก์ชั่นสร้าง widget ได้
  List<Widget> list = <Widget>[];
  hobbies.asMap().forEach((index, hobby){ // วนลูปสร้างลิสรายการ
    var key = hobby.keys.toList(); // แปลงเป็น list ของ key 
    var val = hobby.values.toList();  // แปลงเป็น list ของ value   
    _checkHobby.add(val[0]); // เก็บค่า value ขแงแต่ละรายการ
    list.add(CheckboxListTile(
      value: _checkHobby[index], // ใช้ค่า value ของแต่ละรายการ
      onChanged: (value) {
        setState(() {
          _checkHobby[index] = value!; // เปลี่ยนค่าเมื่อมีการเลือกหรือไม่เลือก
        });
      },
      title:  Text( '${key[0]}', ), 
      controlAffinity: ListTileControlAffinity.leading,
    ));
  });
  return Column( // คืนค่าเป็นรายการ checkbox ในคอลัมน์
    children: list,
  );
}),

enum ColorOption { red, green, blue }

enum Gender { male, female }

// กำหนดตัวแปรค่าเริ่มต้นของรายการที่่ถูกเลือก
Gender? _selectedGender = Gender.male;
// กำหนดตัวแปรสำหรับใช้เก็บข้อความอ้างอิง
String? _selectedGenderText = 'ชาย';

Column(
  children: <Widget>[
    RadioListTile(
      title: const Text('Male'),
      value: Gender.male, // ค่าของตัวเล็อก male
      groupValue: _selectedGender, // ใช้กลุ่มค่าที่ถูกเลือกเป็นตัวแปรเดียวกัน
      onChanged: (Gender? value) {
        setState(() {
          _selectedGender = value;
          _selectedGenderText =  (_selectedGender == Gender.male) ? 'ชาย' : 'หญิง';
        });
      },
      controlAffinity: ListTileControlAffinity.leading,
    ),
    RadioListTile(
      title: const Text('Female'),
      value: Gender.female, // ค่าของตัวเล็อก female
      groupValue: _selectedGender, // ใช้กลุ่มค่าที่ถูกเลือกเป็นตัวแปรเดียวกัน
      onChanged: (Gender? value) {
        setState(() {
          _selectedGender = value;
          _selectedGenderText =  (_selectedGender == Gender.male) ? 'ชาย' : 'หญิง';
        });
      },
      controlAffinity: ListTileControlAffinity.leading,
    ),
  ],

enum ColorOption { red, green, blue }

// กำหนดตัวแปรค่าเริ่มต้นของรายการที่่ถูกเลือก
ColorOption? _selectedColorOption = ColorOption.red;
// กำหนดตัวแปรสำหรับใช้เก็บข้อความอ้างอิง
String _selectedColorOptionText = 'สีแดง';
// กำหนดตัวแปรสำหรับใช้เก็บข้อความอ้างอิงในลูป
List<String> _listColorOptionText = ['สีแดง', 'สีเขียว', 'สีน้ำเงิน'];

Divider(),
Builder(builder: (context) {
  List<Widget> list = <Widget>[];
  ColorOption.values.asMap().forEach((index, val){
    list.add(
      RadioListTile(
        title: Text(_listColorOptionText[index]),
        value: val, // ค่าของตัวเล็อก female
        groupValue: _selectedColorOption, // ใช้กลุ่มค่าที่ถูกเลือกเป็นตัวแปรเดียวกัน
        onChanged: (ColorOption? value) {
          setState(() {
            _selectedColorOption = value;
            _selectedColorOptionText = _listColorOptionText[index];
          });
        },
        controlAffinity: ListTileControlAffinity.leading,
      ),
    );
  });
  return Column(
    children: list,
  );
}),

DropdownButton<String>(
  value: _dropdownValue,
  onChanged: (String? newValue) {
    setState(() {
      _dropdownValue = newValue!;
    });
  },
  isExpanded: true,
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
),                      
SizedBox(height: 5.0,), 
DropdownButtonFormField<String>(
  value: null,
  onChanged: (value) {
    setState(() {
      _dropdownValue = value!;
    });
  },
  hint: Text('Rating'),
  isExpanded: true,  
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),  
), 

// กำหนดตัวแปรสำหรับลิสรายการ
List<String> maritalStatus = ['โสด','แต่งงาน','หย่า','หม้าย'];
// กำหนดตัวแปรสำหรับเก็บค่าที่เลือก เริ่มต้นเป็นค่าว่าง
String _seslectedMaritalStatus = '';

Divider(),
DropdownButtonFormField<String>(
  value: null,
  autovalidateMode: AutovalidateMode.always,
//  validator: (value) => (value == null) ? 'เลือกสถานะการแต่งงาน' : null,
  validator: Validators.required('เลือกสถานะการแต่งงาน'),
  onChanged: (value) {
    setState(() {
      _seslectedMaritalStatus = value!;
    });
  },
  hint: Text('สถานะการแต่งงาน'),
  isExpanded: true,  
  items: maritalStatus.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),  
), 

import 'package:flutter/material.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:intl/intl.dart';
import 'package:flutter/services.dart';

import '../validations/validation.dart';

  
class Contact extends StatefulWidget {
    static const routeName = '/contact';
 
    const Contact({Key? key}) : super(key: key);
  
    @override
    State<StatefulWidget> createState() {
        return _ContactState();
    }
}
  
class _ContactState extends State<Contact> with Validators {

    // กำหนดข้อมูลฟิลด์ สำหรับบันทึก
    final Map<String, dynamic> formData = {
        'email': null, 
        'password': null,
        'birthday': null,
        'gender': null,
        'hobby': null,
        'maritalstatus': null,
      };

  
    // สร้างฟอร์ม key หรือ id ของฟอร์มสำหรับอ้างอิง
    final _formKey = GlobalKey<FormState>();

    late DateFormat dateFormat; // รูปแบบการจัดการวันที่และเวลา

    // กำหนดตัวแปรรับค่า
    final _text1 = TextEditingController();
    final _text2 = TextEditingController();
    final _text3 = TextEditingController();
    final _text4 = TextEditingController();    

    // กำหนดตัวแปร ลิสรายการ checkbox
    List<Map<String, bool>> hobbies = [
      {'อ่านหนังสือ': true},
      {'วาดรูป': false},
      {'ดูหนัง': true},
      {'ช้อปปิ้ง': true},
    ];
    // กำหนดตัวแปร เก็บค่าของแต่ละ checkbxo
    List<bool> _checkHobby = [];
    List<String> _checkedHobby = []; // ค่าสำหรับส่งไปใช้งาน

    // กำหนดตัวแปรค่าเริ่มต้นของรายการที่่ถูกเลือก
    Gender? _selectedGender = Gender.male;
    // กำหนดตัวแปรสำหรับใช้เก็บข้อความอ้างอิง
    String? _selectedGenderText = 'ชาย';
    // กำหนดตัวแปรสำหรับใช้เก็บข้อความอ้างอิงในลูป
    List<String> _listGenderText = ['ชาย', 'หญิง'];


    // กำหนดตัวแปรสำหรับลิสรายการ
    List<String> maritalStatus = ['โสด','แต่งงาน','หย่า','หม้าย'];
    // กำหนดตัวแปรสำหรับเก็บค่าที่เลือก เริ่มต้นเป็นค่าว่าง
    String _seslectedMaritalStatus = '';

    // กำหนดสถานะการแสดงแบบรหัสผ่าน
    bool _isHidden = true;
    bool _termsChecked = false;


    void _selectDate() async {
      final DateTime? newDate = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(2017, 1),
        lastDate: DateTime(2022, 7),
        helpText: 'Select a date',
      );
      if (newDate != null) {
        setState(() {
          _text2.value = TextEditingValue(text: dateFormat.format(newDate).toString());
        });
      }
    }    

    // เกียวกับการใช้เวลา 
    /// แปลงเวลาจากวันที่ TimeOfDay.fromDateTime(DateTime.now())
    /// เวลาปัจจุบัน TimeOfDay.now()
    /// แบบกำหนดเอง TimeOfDay(hour: 7, minute: 15),
    void _selectTime() async {
      final TimeOfDay? newTime = await showTimePicker(
        context: context, 
        initialTime: TimeOfDay.now(), 
      );
      if (newTime != null) {
        setState(() {
          _text2.value = TextEditingValue(text: newTime.format(context));
        });
      }
    }    

    @override
    void initState() {
      // กำหนดรูปแบบการจัดการวันที่และเวลา 
      Intl.defaultLocale = 'en';
      initializeDateFormatting();
      dateFormat = DateFormat('d/MM/y','en');

    }

    @override
    void dispose() {
      _text1.dispose(); // ยกเลิกการใช้งานที่เกี่ยวข้องทั้งหมดถ้ามี
      _text2.dispose(); 
      _text3.dispose(); 
      _text4.dispose(); 
      super.dispose();
    }

    @override
    Widget build(BuildContext context) {
        
        return Scaffold(
            appBar: AppBar(
                title: Text('Contact Us'),
            ),
            body: SingleChildScrollView(
              child: Form(  // ใช้งาน Form
                key: _formKey, // กำหนด key
                child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Column(
                      children: <Widget>[ // กำหนด widget ที่จะใช้งานกับฟอร์ม
                        TextFormField(
                          autovalidateMode: AutovalidateMode.always,
                          decoration: InputDecoration(
                            hintText: 'อีเมล',    
                            icon: Icon(Icons.email_outlined),
                          ),
                          controller: _text1, // ผูกกับ TextFormField ที่จะใช้
                          validator: Validators.compose([
                            Validators.required('กรุณาระบุอีเมล'),
                            Validators.email('กรุณาใส่อีเมลให้ถูกต้อง')
                          ]),
                        ),
                        SizedBox(height: 5.0,), 
                        TextFormField(
                          autovalidateMode: AutovalidateMode.always,
                          decoration: InputDecoration(
                            icon: Icon(Icons.vpn_key),
                            hintText: 'รหัสผ่าน',
                            suffixIcon: IconButton(
                              onPressed: (){
                                setState(() {
                                  _isHidden = !_isHidden; // เมื่อกดก็เปลี่ยนค่าตรงกันข้าม
                                });
                              }, 
                              icon: Icon(
                                _isHidden // เงื่อนไขการสลับ icon
                                ? Icons.visibility_off 
                                : Icons.visibility
                              ),
                            ),
                          ),    
                          controller: _text3, // ผูกกับ TextFormField ที่จะใช้                        
                          validator: Validators.required('กรุณาระบุรห้สผ่าน'),
                          obscureText: _isHidden, // การซ่อนหรือแสดงข้อความในรูปแบบรหัสผ่าน
                        ),
                        SizedBox(height: 5.0,), 
                        TextFormField(
                          autovalidateMode: AutovalidateMode.always,  
                          decoration: InputDecoration(
                            hintText: 'วันเกิด',
                            icon: Icon(Icons.date_range),
                          ),
                          controller: _text2, // ผูกกับ TextFormField ที่จะใช้
                          validator: Validators.required('กรุณาระบุวันเกิด'),
                          onTap: _selectDate,
                          readOnly: true,
                        ), 
                        Divider(),
                        Builder(builder: (context) {
                          List<Widget> list = <Widget>[];
                          Gender.values.asMap().forEach((index, val){
                            list.add(
                              RadioListTile(
                                title: Text(_listGenderText[index]),
                                value: val, // ค่าของตัวเล็อก female
                                groupValue: _selectedGender, // ใช้กลุ่มค่าที่ถูกเลือกเป็นตัวแปรเดียวกัน
                                onChanged: (Gender? value) {
                                  setState(() {
                                    _selectedGender = value;
                                    _selectedGenderText = _listGenderText[index];
                                  });
                                },
                                controlAffinity: ListTileControlAffinity.leading,
                              ),
                            );
                          });
                          return Column(
                            children: list,
                          );
                        }),
                        Divider(), // ตัว widget แบ่ง
                        Builder(builder: (context) { // เราใช้ Builder เพื่อที่จะใช้งานฟังก์ชั่นสร้าง widget ได้
                          List<Widget> list = <Widget>[];
                          _checkedHobby.clear();
                          hobbies.asMap().forEach((index, hobby){ // วนลูปสร้างลิสรายการ
                            var key = hobby.keys.toList(); // แปลงเป็น list ของ key 
                            var val = hobby.values.toList();  // แปลงเป็น list ของ value   
                            _checkHobby.add(val[0]); // เก็บค่า value ขแงแต่ละรายการ
                            if(_checkHobby[index]) _checkedHobby.add(key[0]); // เก็บรายการที่เลือก
                            list.add(CheckboxListTile(
                              value: _checkHobby[index], // ใช้ค่า value ของแต่ละรายการ
                              onChanged: (value) {
                                setState(() {
                                  _checkHobby[index] = value!; // เปลี่ยนค่าเมื่อมีการเลือกหรือไม่เลือก
                                });
                              },
                              title:  Text( '${key[0]}', ), 
                              controlAffinity: ListTileControlAffinity.leading,
                            ));
                          });
                          return Column( // คืนค่าเป็นรายการ checkbox ในคอลัมน์
                            children: list,
                          );
                        }),
                        Divider(),
                        DropdownButtonFormField<String>(
                          value: null,
                          autovalidateMode: AutovalidateMode.always,
                          decoration: InputDecoration(
                            icon: Icon(Icons.family_restroom_outlined),
                          ),
                          validator: Validators.required('เลือกสถานะการแต่งงาน'),
                          onChanged: (value) {
                            setState(() {
                              _seslectedMaritalStatus = value!;
                            });
                          },
                          hint: Text('สถานะการแต่งงาน'),
                          isExpanded: true,  
                          items: maritalStatus.map<DropdownMenuItem<String>>((String value) {
                            return DropdownMenuItem<String>(
                              value: value,
                              child: Text(value),
                            );
                          }).toList(),  
                        ), 
                        Divider(),
                        CheckboxListTile(
                          value: _termsChecked,
                          onChanged: (value) {
                            setState(() {
                              _termsChecked = value!;
                            });
                          },
                          subtitle: !_termsChecked
                              ? Text(
                                  'ต้องระบุ',
                                  style: TextStyle(color: Colors.red, fontSize: 12.0),
                                )
                              : null,
                          title: new Text(
                            'ยอมรับเงื่อนไขและข้อตกลงการใช้งาน',
                          ),
                          controlAffinity: ListTileControlAffinity.leading,
                        ),
                          ElevatedButton(
                            onPressed: () {
                              // อ้างอิงฟอร์มที่กำลังใช้งาน ตรวจสอบความถูกต้องข้อมูลในฟอร์ม
                              if (_formKey.currentState!.validate()) { //หากผ่าน 
                                  formData['email'] = _text1.text;
                                  formData['password'] = _text2.text;
                                  formData['birthday'] = _text3.text;
                                  formData['gender'] = _selectedGenderText;
                                  formData['hobby'] = _checkedHobby;
                                  formData['maritalstatus'] = _seslectedMaritalStatus;
                                 // print(formData);
                                // แสดงข้อความจำลอง ใน snackbar
                                ScaffoldMessenger.of(context).showSnackBar(
                                  // นำค่าข้อมูลไปแสดงหรือใช้งานผ่าน controller
                                   SnackBar(content: Text('Process Data...${formData}')),
                                );
                              }
                            },
                            child: const Text('Submit'),
                          ),
                      ],
                  ),
                ),
              ),
            ),
        );
    }
}

// กำหนดข้อมูลสำหรับ radio
enum Gender { male, female }