Edit Text Button - Flutter

I want the user to be able to edit the text within the note tile (see screenshot) when the user clicks the edit button. I've watched tutorial after tutorial and I can't get it to work. How do I do that? Your help is very much appreciated!

Here's the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import 'package:flutter/material.dart';

class PatientNotesTile extends StatelessWidget {
  final String date;
  final String text;

  const PatientNotesTile({super.key, required this.date, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.deepPurple.shade300.withOpacity(0.4),
        borderRadius: BorderRadius.circular(15),
      ),
      child: ListTile(
        title: Padding(
          padding: const EdgeInsets.only(bottom: 5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                date,
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15.0,
                    color: Colors.deepPurple.shade100),
              ),

              // Edit Button
              IconButton(
                icon: Icon(Icons.edit, color: Colors.deepPurple.shade100),
                onPressed: () {},
              ),
            ],
          ),
        ),
        subtitle: Padding(
          padding: const EdgeInsets.only(bottom: 15.0),
          child: Text(
            text,
            style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18.0,
                color: Colors.white),
          ),
        ),
      ),
    );
  }
}

<!-- end snippet -->

You can use readOnly: readOnly on TextFiled. when user press edit icon, make it writable. Others decoration can be tweak based on read only bool.

class PatientNotesTile extends StatefulWidget {
  final String date;
  final String text;

  const PatientNotesTile({super.key, required this.date, required this.text});

  @override
  State<PatientNotesTile> createState() => _PatientNotesTileState();
}

class _PatientNotesTileState extends State<PatientNotesTile> {
  late final TextEditingController controller = TextEditingController.fromValue(TextEditingValue(text: widget.text, selection: TextSelection.collapsed(offset: widget.text.length)));

  bool readOnly = true;
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.deepPurple.shade300.withOpacity(0.4),
        borderRadius: BorderRadius.circular(15),
      ),
      child: ListTile(
        title: Padding(
          padding: const EdgeInsets.only(bottom: 5.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                widget.date,
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0, color: Colors.deepPurple.shade100),
              ),

              // Edit Button
              IconButton(
                icon: Icon(
                  readOnly ? Icons.edit : Icons.save,
                  color: Colors.deepPurple.shade100,
                ),
                onPressed: () {
                  setState(() {
                    readOnly = !readOnly;
                  });
                },
              ),
            ],
          ),
        ),
        subtitle: Padding(
          padding: const EdgeInsets.only(bottom: 15.0),
          child: TextField(
            controller: controller,
            readOnly: readOnly,
            decoration: InputDecoration(
              border: readOnly ? InputBorder.none : OutlineInputBorder(borderRadius: BorderRadius.circular(15.0)),
              hintText: "Enter notes here",
              hintStyle: TextStyle(color: Colors.deepPurple.shade100),
            ),
            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 18.0, color: Colors.white),
          ),
        ),
      ),
    );
  }
}