Untitled Page

We will use:

1. A TextField for editing values.

2. A Save Button to apply updates.

3. Display of the current student data on the UI.

---

File Structure

Copyfeatures/
│
└── data_structure/
    └── student_object/
        ├── components/
        │   └── student_read_update_component.dart  
        └── screen/
            └── student_screen.dart                

---

1. Create the Read and Update UI Component

File: student_read_update_component.dart

Copyimport 'package:flutter/material.dart';

class StudentReadUpdateComponent extends StatefulWidget {
  const StudentReadUpdateComponent({Key? key}) : super(key: key);

  @override
  State<StudentReadUpdateComponent> createState() =>
      _StudentReadUpdateComponentState();
}

class _StudentReadUpdateComponentState
    extends State<StudentReadUpdateComponent> {
  // Dummy Student Object
  Map<String, dynamic> student = {
    "id": 1,
    "name": "John Doe",
    "age": 20,
    "grade": "A",
    "email": "johndoe@example.com",
  };

  // Controllers for text fields
  final TextEditingController nameController = TextEditingController();
  final TextEditingController ageController = TextEditingController();
  final TextEditingController gradeController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  @override
  void initState() {
    super.initState();
    // Initialize controllers with the current student data
    nameController.text = student["name"];
    ageController.text = student["age"].toString();
    gradeController.text = student["grade"];
    emailController.text = student["email"];
  }

  // Function to update the student map
  void updateStudent() {
    setState(() {
      student["name"] = nameController.text;
      student["age"] = int.tryParse(ageController.text) ?? student["age"];
      student["grade"] = gradeController.text;
      student["email"] = emailController.text;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            "Student Details (Read & Update)",
            style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 16),

          // Display Current Data
          Text("Current Student Data:"),
          Card(
            elevation: 4,
            margin: const EdgeInsets.symmetric(vertical: 10),
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("ID: ${student['id']}"),
                  Text("Name: ${student['name']}"),
                  Text("Age: ${student['age']}"),
                  Text("Grade: ${student['grade']}"),
                  Text("Email: ${student['email']}"),
                ],
              ),
            ),
          ),

          // Input Fields for Editing
          const SizedBox(height: 8),
          TextField(
            controller: nameController,
            decoration: const InputDecoration(
              labelText: "Name",
              border: OutlineInputBorder(),
            ),
          ),
          const SizedBox(height: 8),
          TextField(
            controller: ageController,
            decoration: const InputDecoration(
              labelText: "Age",
              border: OutlineInputBorder(),
            ),
            keyboardType: TextInputType.number,
          ),
          const SizedBox(height: 8),
          TextField(
            controller: gradeController,
            decoration: const InputDecoration(
              labelText: "Grade",
              border: OutlineInputBorder(),
            ),
          ),
          const SizedBox(height: 8),
          TextField(
            controller: emailController,
            decoration: const InputDecoration(
              labelText: "Email",
              border: OutlineInputBorder(),
            ),
          ),
          const SizedBox(height: 16),

          // Save Button
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: updateStudent,
              child: const Text("Save"),
            ),
          ),
        ],
      ),
    );
  }
}

---

2. Create the Main Screen

File: student_screen.dart

Copyimport 'package:flutter/material.dart';
import '../components/student_read_update_component.dart';

class StudentScreen extends StatelessWidget {
  const StudentScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Student CRUD Example"),
        centerTitle: true,
      ),
      body: const StudentReadUpdateComponent(),
    );
  }
}

---

---

1. Display the Current Student Data:

   • The Card widget shows the current values in the student map.

2. Update Fields:

   • Four TextFields allow editing of the name, age, grade, and email.

3. Save Button:

   • Clicking the "Save" button updates the Map and refreshes the UI with the updated values.

---