如何发现 TextField 编辑被取消/键盘折叠/焦点丢失

Question

The code below shows 2 text fields. It's a stripped example, just ignore things like TextEditingController not being disposed.

If user edits one of the text fields, and presses "Done" on the keyboard, new value is sent to the cubit (saved) and all is good.

However, when - during editing - user clicks on another TextField, or collapses the keyboard, he's left with a very inconsistent state. TextField - the one he was editing - shows value, which wasn't saved, and he's not aware of it.

So how can I either save the value, or restore it back to the original, or do whatever when user just didn't confirm changes and stopped editing?

I tried messing with text controllers, forms, TextField and TextFormField - no luck. I don't want a Save button, and it seems the onSubmitted is there for some reason, but I miss onCancelled or sth.

testpage.dart :

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'some_cubit.dart';

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

  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Test')),
      body: BlocProvider(
        create: (context) => SomeCubit(),
        child: BlocBuilder<SomeCubit, SomeState>(
          builder: (context, state) {
            return Column(
              children: [
                Flexible(
                  child: TextField(
                    controller: TextEditingController(text: state.string1),
                    onSubmitted: (s) {
                      BlocProvider.of<SomeCubit>(context).updateString1(s);
                    },
                  ),
                ),
                Flexible(
                  child: TextField(
                    controller: TextEditingController(text: state.string2),
                    onSubmitted: (s) {
                      BlocProvider.of<SomeCubit>(context).updateString2(s);
                    },
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

some_cubit.dart

import 'package:bloc/bloc.dart';

class SomeCubit extends Cubit<SomeState> {
  SomeCubit() : super(SomeState("abc", "123"));

  void updateString1(String value) => emit(SomeState(value, state.string2));
  void updateString2(String value) => emit(SomeState(state.string1, value));
}

class SomeState {
  final String string1;
  final String string2;

  SomeState(this.string1, this.string2);
}

Answer 1

textField has onChanged function that it fires each time the user adds a character