The textfield cursor does not work correctly - flutter

Question

The textfield cursor does not work correctly when I retrieve data from the database and display it in a textfield and then try to edit it.
I would like the position of the cursor to be respected each time I return the validate result of the change method.
Full code below.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'TextField Test',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
TextEditingController _nameController = TextEditingController();
TextEditingController _emailController = TextEditingController();
ApplicationBloc _bloc;
#override
void initState() {
super.initState();
_bloc = new ApplicationBloc();
_bloc.initData();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('TextField Test'),
),
body: ListView(
shrinkWrap: true,
children: <Widget>[_buildName(), _buildEmail(), _buildSubmit()],
),
);
}
Widget _buildName() {
return StreamBuilder(
stream: _bloc.name,
builder: (context, snapshot) {
if (snapshot.hasData) {
_nameController.text = snapshot.data;
}
return TextField(
controller: _nameController,
onChanged: _bloc.changeName,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "Name",
errorText: snapshot.error,
),
);
},
);
}
Widget _buildEmail() {
return StreamBuilder(
stream: _bloc.email,
builder: (context, snapshot) {
if (snapshot.hasData) {
_emailController.text = snapshot.data;
}
return TextField(
controller: _emailController,
onChanged: _bloc.changeEmail,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
labelText: "Email",
errorText: snapshot.error,
),
);
},
);
}
Widget _buildSubmit() {
return StreamBuilder(
stream: _bloc.submit,
builder: (context, snapshot) {
return RaisedButton(
onPressed: (!snapshot.hasData || !snapshot.data)
? null
: () {
_bloc.submitForm();
_nameController.text = '';
_emailController.text = '';
},
child: Text('Submit!'),
);
},
);
}
}
class ApplicationBloc {
BehaviorSubject<String> _nameController =
BehaviorSubject<String>(seedValue: '');
Observable<String> get name => _nameController.stream.transform(validateName);
Function(String) get changeName => _nameController.sink.add;
BehaviorSubject<String> _emailController =
BehaviorSubject<String>(seedValue: '');
Observable<String> get email =>
_emailController.stream.transform(validateEmail);
Function(String) get changeEmail => _emailController.sink.add;
Observable<bool> get submit => Observable.combineLatest2(
name, email, (e, e1) => e.isNotEmpty && e1.isNotEmpty);
initData() {
// This data from database
_nameController.sink.add('Test123');
_emailController.sink.add('test#email.com');
}
submitForm() {
//Send to api and wait
//Reset values
Future.delayed(const Duration(seconds: 1));
}
final validateName =
StreamTransformer<String, String>.fromHandlers(handleData: (name, sink) {
if (name.isEmpty || name.length > 4) {
sink.add(name);
} else if (name.isNotEmpty) {
sink.addError('Invalid Name!');
}
});
final validateEmail =
StreamTransformer<String, String>.fromHandlers(handleData: (email, sink) {
String p =
r'^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
RegExp regExp = new RegExp(p);
if (email.isEmpty || (email.length > 4 && regExp.hasMatch(email))) {
sink.add(email);
} else {
sink.addError('Invalid email!');
}
});
//dispose/close all the streams when we call dispose() method
void dispose() {
_nameController.close();
_emailController.close();
}
}
I tried a code that changes the cursor position to final but its not work properly when i try edit the middle content of the textfield.

Answer 1

If you take a look at the text setter of TextEditingController, you'll see:
set text(String newText) {
value = value.copyWith(
text: newText,
selection: const TextSelection.collapsed(offset: -1),
composing: TextRange.empty,
);
}
Notice that selection is reset, so you cannot use this setter. Instead, inside your builder, do:
if (snapshot.hasData) {
_nameController.value = _nameController.value.copyWith(
text: snapshot.data,
);
}
Just the text is going to change and you don't have to worry about the other properties.