Issue Summary:
In a Flutter app designed for TV users, there is an issue where focus management becomes problematic when a TextField is focused and then unfocused. Specifically, when a TextField is programmatically unfocused, the focus gets stuck, and buttons on the remote control become unresponsive. However, when the TextField is unfocused using the back arrow on the TV remote, everything works correctly, and the focus moves to the next widget as expected.
Detailed Problem Description:
Scenario:
When a TextField is focused (i.e., when a user selects the TextField for input), everything works as expected, but unfocusing it programmatically causes issues.
After unfocusing the TextField programmatically, the app does not behave correctly:
The focus appears to be lost or stuck.
Buttons on the remote control do not respond.
The focus does not move to the next widget as it should.
Observations:
When a TextField is focused:
The console prints: “The input method toggled cursor monitoring on”.
When the TextField is unfocused using the back arrow on the remote:
The console prints: “The input method toggled cursor monitoring off”.
The focus moves to the next widget, and the buttons work fine.
When the TextField is unfocused programmatically:
The console does not print “The input method toggled cursor monitoring off”.
The app does not behave correctly (focus is stuck, buttons are unresponsive).
<code>part of '../screens.dart';
class RegisterUserTv extends StatefulWidget {
const RegisterUserTv({Key? key}) : super(key: key);
@override
State<RegisterUserTv> createState() => _RegisterUserTvState();
}
class CustomFocusNode extends FocusNode {
bool _isDisposed = false;
@override
void dispose() {
_isDisposed = true;
super.dispose();
}
bool get isDisposed => _isDisposed;
}
class _RegisterUserTvState extends State<RegisterUserTv> {
final _playlistName = TextEditingController();
final _playlistUrl = TextEditingController();
final _xtreamAccount = TextEditingController();
final _xtreamUsername = TextEditingController();
final _xtreamPassword = TextEditingController();
final _xtreamUrl = TextEditingController();
int indexTab = 0;
bool xtream = false;
final FocusNode playListButtonNode = FocusNode();
final FocusNode xtreamNode = FocusNode();
final CustomFocusNode nameFieldNode0 = CustomFocusNode();
final CustomFocusNode urlFieldNode0 = CustomFocusNode();
final CustomFocusNode nameFieldNode1 = CustomFocusNode();
final CustomFocusNode usernameFieldNode = CustomFocusNode();
final FocusNode containerName0 = FocusNode();
final FocusNode containerName1 = FocusNode();
final FocusNode containerUrl1 = FocusNode();
final FocusNode containerUrl0 = FocusNode();
final FocusNode containerPassword = FocusNode();
final FocusNode containerUsername = FocusNode();
final CustomFocusNode passwordFieldNode = CustomFocusNode();
final CustomFocusNode urlFieldNode1 = CustomFocusNode();
final FocusNode cancelNode1 = FocusNode();
final FocusNode addUserNode1 = FocusNode();
changeNode(BuildContext context, FocusNode focusNode) {
FocusScope.of(context).requestFocus(focusNode);
setState(() {});
}
Widget buildTextField(
BuildContext context,
CustomFocusNode focusNode,
TextEditingController controller,
String hintText,
Size mediaQuerySize,
FocusNode containerFocusNode,
FocusNode focusBefore,
FocusNode focusAfter,
) {
return Shortcuts(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.enter): ActivateIntent(),
// Mapping "OK" button (Enter key) to ActivateIntent
},
child: Actions(
actions: {
ActivateIntent: CallbackAction(
onInvoke: (intent) {
if (containerFocusNode.hasFocus) {
changeNode(context, focusNode);
}
return null;
},
),
ButtomButtonIntent: CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
changeNode(context, focusAfter);
},
),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
// Unfocus the text field before changing focus
changeNode(context, focusBefore);
},
),
},
child: Focus(
focusNode: containerFocusNode,
child: Container(
width: mediaQuerySize.width * 0.7,
height: mediaQuerySize.height * 0.1,
child: TextField(
focusNode: focusNode,
onSubmitted: (object) {
focusNode.dispose();
changeNode(context, containerFocusNode);
},
controller: controller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: hintText,
fillColor: containerFocusNode.hasFocus
? Colors.grey[850]
: Colors.grey[900],
filled: true,
contentPadding: EdgeInsets.symmetric(
vertical: mediaQuerySize.height * 0.02,
horizontal: mediaQuerySize.width * 0.03,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(mediaQuerySize.height * 0.05),
right: Radius.circular(mediaQuerySize.height * 0.05),
),
borderSide: BorderSide.none,
),
),
),
),
),
),
);
}
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) {
playListButtonNode.requestFocus();
setState(() {});
});
super.initState();
}
@override
void dispose() {
_playlistName.dispose();
_xtreamAccount.dispose();
_xtreamPassword.dispose();
_xtreamUrl.dispose();
_xtreamUsername.dispose();
xtreamNode.dispose();
nameFieldNode0.dispose();
urlFieldNode0.dispose();
nameFieldNode1.dispose();
usernameFieldNode.dispose();
passwordFieldNode.dispose();
urlFieldNode1.dispose();
cancelNode1.dispose();
addUserNode1.dispose();
super.dispose();
}
Widget playListSelected(Size mediaquarry) {
return Column(
children: [
buildTextField(
context, nameFieldNode0, _playlistName, "Name", mediaquarry,containerName0,playListButtonNode,containerUrl0),
SizedBox(height: mediaquarry.height * 0.05),
buildTextField(
context, urlFieldNode0, _playlistUrl, "Url", mediaquarry,containerUrl0,containerName0,cancelNode1),
],
);
}
Widget xtreamAccount(Size mediaquarry) {
return Column(
children: [
Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent: CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) => changeNode(context, usernameFieldNode)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) => changeNode(context, playListButtonNode))
},
child: buildTextField(
context, nameFieldNode1, _xtreamAccount, "Account", mediaquarry,containerName1,playListButtonNode,containerUsername)
),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, usernameFieldNode, _xtreamUsername, "Username", mediaquarry,containerUsername,containerName1,containerPassword),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, passwordFieldNode, _xtreamPassword, "Password", mediaquarry,containerPassword,containerUsername,containerUrl1),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, urlFieldNode1, _xtreamUrl, "http://url.domain.net:8080", mediaquarry,containerUrl1,containerPassword,cancelNode1),
],
);
}
@override
Widget build(BuildContext context) {
final mediaquarry = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.blueGrey[900],
body: SafeArea(
child: BlocConsumer<AuthBloc, AuthState>(
listener: (context, state) {
if (state is AuthSuccess) {
Get.snackbar("Success", "User registered successfully");
Navigator.pop(context);
} else if (state is AuthFailed) {
// Handle error state (e.g., show error message)
Get.snackbar(
"Error", "Failed to register user: ${state.message}");
}
},
builder: (context, state) {
return Shortcuts(
shortcuts: <LogicalKeySet, Intent>{
LogicalKeySet(LogicalKeyboardKey.arrowLeft): LeftButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowRight):
RightButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowDown):
ButtomButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowUp): TopButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.enter): const ActivateIntent(),
},
child: ListView(
children: [
Center(
child: Padding(
padding: EdgeInsets.symmetric(
vertical: mediaquarry.width * 0.01),
child: Text(
"Add playlist",
style: TextStyle(
color: Colors.white,
fontSize: 21,
fontWeight: FontWeight.bold,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent:
CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerName1);
} else {
changeNode(context, containerName0);
}
}),
RightButtonIntent: CallbackAction<RightButtonIntent>(
onInvoke: (intent) =>
changeNode(context, xtreamNode)),
ActivateIntent: CallbackAction<ActivateIntent>(
onInvoke: (ActivateIntent intent) => {
setState(() {
xtream = false;
})
},
)
},
child: Focus(
focusNode: playListButtonNode,
child: ElevatedButton(
onPressed: () {
setState(() {
xtream = false;
});
},
child: Container(
width: mediaquarry.width * 0.18,
child: Center(
child: Text('Playlist',
style: TextStyle(
fontWeight: FontWeight.bold,
color: !xtream
? Colors.black
: Colors.white)))),
style: ElevatedButton.styleFrom(
shape: playListButtonNode.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor:
xtream ? Colors.black : Colors.white,
// Set the background color to white
foregroundColor:
Colors.black, // Set the text color to black
),
),
),
),
SizedBox(
width: mediaquarry.height * 0.03,
),
Actions(
actions: <Type, Action<Intent>>{
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, playListButtonNode))
},
child: Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent:
CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerName1);
} else {
changeNode(context, containerName0);
}
}),
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, playListButtonNode)),
ActivateIntent: CallbackAction<ActivateIntent>(
onInvoke: (ActivateIntent intent) => {
setState(() {
xtream = true;
})
},
),
},
child: Focus(
focusNode: xtreamNode,
child: ElevatedButton(
onPressed: () {
setState(() {
xtream = true;
});
},
child: Container(
width: mediaquarry.width * 0.18,
child: Center(
child: Text(
'Xtream Account',
style: TextStyle(
color: xtream
? Colors.black
: Colors.white,
fontWeight: FontWeight.bold),
))),
style: ElevatedButton.styleFrom(
shape: xtreamNode.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor:
!xtream ? Colors.black : Colors.white,
// Set the background color to white
foregroundColor:
Colors.white, // Set the text color to black
),
),
),
),
)
],
),
SizedBox(height: mediaquarry.height * 0.08),
Container(
child: xtream
? xtreamAccount(mediaquarry)
: playListSelected(mediaquarry),
),
SizedBox(height: mediaquarry.height * 0.05),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Actions(
actions: <Type, Action<Intent>>{
RightButtonIntent: CallbackAction<RightButtonIntent>(
onInvoke: (intent) =>
changeNode(context, addUserNode1)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerUrl1);
} else {
changeNode(context, containerUrl0);
}
})
},
child: Focus(
focusNode: cancelNode1,
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Container(
width: mediaquarry.width * 0.07,
child: Center(
child: Text('Cancel',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white)))),
style: ElevatedButton.styleFrom(
shape: cancelNode1.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor: Colors.grey[900],
// Set the background color to white
foregroundColor:
Colors.black, // Set the text color to black
),
),
),
),
SizedBox(
width: mediaquarry.height * 0.03,
),
Actions(
actions: <Type, Action<Intent>>{
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, cancelNode1)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, urlFieldNode1);
} else {
changeNode(context, urlFieldNode0);
}
})
},
child: Focus(
focusNode: addUserNode1,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: addUserNode1.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null),
onPressed: () {
if (state is AuthLoading) {
return;
}
},
child: state is AuthLoading
? CircularProgressIndicator()
: Text('Add User'),
),
),
),
],
),
],
),
);
},
),
),
);
}
}
</code>
<code>part of '../screens.dart';
class RegisterUserTv extends StatefulWidget {
const RegisterUserTv({Key? key}) : super(key: key);
@override
State<RegisterUserTv> createState() => _RegisterUserTvState();
}
class CustomFocusNode extends FocusNode {
bool _isDisposed = false;
@override
void dispose() {
_isDisposed = true;
super.dispose();
}
bool get isDisposed => _isDisposed;
}
class _RegisterUserTvState extends State<RegisterUserTv> {
final _playlistName = TextEditingController();
final _playlistUrl = TextEditingController();
final _xtreamAccount = TextEditingController();
final _xtreamUsername = TextEditingController();
final _xtreamPassword = TextEditingController();
final _xtreamUrl = TextEditingController();
int indexTab = 0;
bool xtream = false;
final FocusNode playListButtonNode = FocusNode();
final FocusNode xtreamNode = FocusNode();
final CustomFocusNode nameFieldNode0 = CustomFocusNode();
final CustomFocusNode urlFieldNode0 = CustomFocusNode();
final CustomFocusNode nameFieldNode1 = CustomFocusNode();
final CustomFocusNode usernameFieldNode = CustomFocusNode();
final FocusNode containerName0 = FocusNode();
final FocusNode containerName1 = FocusNode();
final FocusNode containerUrl1 = FocusNode();
final FocusNode containerUrl0 = FocusNode();
final FocusNode containerPassword = FocusNode();
final FocusNode containerUsername = FocusNode();
final CustomFocusNode passwordFieldNode = CustomFocusNode();
final CustomFocusNode urlFieldNode1 = CustomFocusNode();
final FocusNode cancelNode1 = FocusNode();
final FocusNode addUserNode1 = FocusNode();
changeNode(BuildContext context, FocusNode focusNode) {
FocusScope.of(context).requestFocus(focusNode);
setState(() {});
}
Widget buildTextField(
BuildContext context,
CustomFocusNode focusNode,
TextEditingController controller,
String hintText,
Size mediaQuerySize,
FocusNode containerFocusNode,
FocusNode focusBefore,
FocusNode focusAfter,
) {
return Shortcuts(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.enter): ActivateIntent(),
// Mapping "OK" button (Enter key) to ActivateIntent
},
child: Actions(
actions: {
ActivateIntent: CallbackAction(
onInvoke: (intent) {
if (containerFocusNode.hasFocus) {
changeNode(context, focusNode);
}
return null;
},
),
ButtomButtonIntent: CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
changeNode(context, focusAfter);
},
),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
// Unfocus the text field before changing focus
changeNode(context, focusBefore);
},
),
},
child: Focus(
focusNode: containerFocusNode,
child: Container(
width: mediaQuerySize.width * 0.7,
height: mediaQuerySize.height * 0.1,
child: TextField(
focusNode: focusNode,
onSubmitted: (object) {
focusNode.dispose();
changeNode(context, containerFocusNode);
},
controller: controller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: hintText,
fillColor: containerFocusNode.hasFocus
? Colors.grey[850]
: Colors.grey[900],
filled: true,
contentPadding: EdgeInsets.symmetric(
vertical: mediaQuerySize.height * 0.02,
horizontal: mediaQuerySize.width * 0.03,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(mediaQuerySize.height * 0.05),
right: Radius.circular(mediaQuerySize.height * 0.05),
),
borderSide: BorderSide.none,
),
),
),
),
),
),
);
}
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) {
playListButtonNode.requestFocus();
setState(() {});
});
super.initState();
}
@override
void dispose() {
_playlistName.dispose();
_xtreamAccount.dispose();
_xtreamPassword.dispose();
_xtreamUrl.dispose();
_xtreamUsername.dispose();
xtreamNode.dispose();
nameFieldNode0.dispose();
urlFieldNode0.dispose();
nameFieldNode1.dispose();
usernameFieldNode.dispose();
passwordFieldNode.dispose();
urlFieldNode1.dispose();
cancelNode1.dispose();
addUserNode1.dispose();
super.dispose();
}
Widget playListSelected(Size mediaquarry) {
return Column(
children: [
buildTextField(
context, nameFieldNode0, _playlistName, "Name", mediaquarry,containerName0,playListButtonNode,containerUrl0),
SizedBox(height: mediaquarry.height * 0.05),
buildTextField(
context, urlFieldNode0, _playlistUrl, "Url", mediaquarry,containerUrl0,containerName0,cancelNode1),
],
);
}
Widget xtreamAccount(Size mediaquarry) {
return Column(
children: [
Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent: CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) => changeNode(context, usernameFieldNode)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) => changeNode(context, playListButtonNode))
},
child: buildTextField(
context, nameFieldNode1, _xtreamAccount, "Account", mediaquarry,containerName1,playListButtonNode,containerUsername)
),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, usernameFieldNode, _xtreamUsername, "Username", mediaquarry,containerUsername,containerName1,containerPassword),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, passwordFieldNode, _xtreamPassword, "Password", mediaquarry,containerPassword,containerUsername,containerUrl1),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, urlFieldNode1, _xtreamUrl, "http://url.domain.net:8080", mediaquarry,containerUrl1,containerPassword,cancelNode1),
],
);
}
@override
Widget build(BuildContext context) {
final mediaquarry = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.blueGrey[900],
body: SafeArea(
child: BlocConsumer<AuthBloc, AuthState>(
listener: (context, state) {
if (state is AuthSuccess) {
Get.snackbar("Success", "User registered successfully");
Navigator.pop(context);
} else if (state is AuthFailed) {
// Handle error state (e.g., show error message)
Get.snackbar(
"Error", "Failed to register user: ${state.message}");
}
},
builder: (context, state) {
return Shortcuts(
shortcuts: <LogicalKeySet, Intent>{
LogicalKeySet(LogicalKeyboardKey.arrowLeft): LeftButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowRight):
RightButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowDown):
ButtomButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowUp): TopButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.enter): const ActivateIntent(),
},
child: ListView(
children: [
Center(
child: Padding(
padding: EdgeInsets.symmetric(
vertical: mediaquarry.width * 0.01),
child: Text(
"Add playlist",
style: TextStyle(
color: Colors.white,
fontSize: 21,
fontWeight: FontWeight.bold,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent:
CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerName1);
} else {
changeNode(context, containerName0);
}
}),
RightButtonIntent: CallbackAction<RightButtonIntent>(
onInvoke: (intent) =>
changeNode(context, xtreamNode)),
ActivateIntent: CallbackAction<ActivateIntent>(
onInvoke: (ActivateIntent intent) => {
setState(() {
xtream = false;
})
},
)
},
child: Focus(
focusNode: playListButtonNode,
child: ElevatedButton(
onPressed: () {
setState(() {
xtream = false;
});
},
child: Container(
width: mediaquarry.width * 0.18,
child: Center(
child: Text('Playlist',
style: TextStyle(
fontWeight: FontWeight.bold,
color: !xtream
? Colors.black
: Colors.white)))),
style: ElevatedButton.styleFrom(
shape: playListButtonNode.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor:
xtream ? Colors.black : Colors.white,
// Set the background color to white
foregroundColor:
Colors.black, // Set the text color to black
),
),
),
),
SizedBox(
width: mediaquarry.height * 0.03,
),
Actions(
actions: <Type, Action<Intent>>{
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, playListButtonNode))
},
child: Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent:
CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerName1);
} else {
changeNode(context, containerName0);
}
}),
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, playListButtonNode)),
ActivateIntent: CallbackAction<ActivateIntent>(
onInvoke: (ActivateIntent intent) => {
setState(() {
xtream = true;
})
},
),
},
child: Focus(
focusNode: xtreamNode,
child: ElevatedButton(
onPressed: () {
setState(() {
xtream = true;
});
},
child: Container(
width: mediaquarry.width * 0.18,
child: Center(
child: Text(
'Xtream Account',
style: TextStyle(
color: xtream
? Colors.black
: Colors.white,
fontWeight: FontWeight.bold),
))),
style: ElevatedButton.styleFrom(
shape: xtreamNode.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor:
!xtream ? Colors.black : Colors.white,
// Set the background color to white
foregroundColor:
Colors.white, // Set the text color to black
),
),
),
),
)
],
),
SizedBox(height: mediaquarry.height * 0.08),
Container(
child: xtream
? xtreamAccount(mediaquarry)
: playListSelected(mediaquarry),
),
SizedBox(height: mediaquarry.height * 0.05),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Actions(
actions: <Type, Action<Intent>>{
RightButtonIntent: CallbackAction<RightButtonIntent>(
onInvoke: (intent) =>
changeNode(context, addUserNode1)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerUrl1);
} else {
changeNode(context, containerUrl0);
}
})
},
child: Focus(
focusNode: cancelNode1,
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Container(
width: mediaquarry.width * 0.07,
child: Center(
child: Text('Cancel',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white)))),
style: ElevatedButton.styleFrom(
shape: cancelNode1.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor: Colors.grey[900],
// Set the background color to white
foregroundColor:
Colors.black, // Set the text color to black
),
),
),
),
SizedBox(
width: mediaquarry.height * 0.03,
),
Actions(
actions: <Type, Action<Intent>>{
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, cancelNode1)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, urlFieldNode1);
} else {
changeNode(context, urlFieldNode0);
}
})
},
child: Focus(
focusNode: addUserNode1,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: addUserNode1.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null),
onPressed: () {
if (state is AuthLoading) {
return;
}
},
child: state is AuthLoading
? CircularProgressIndicator()
: Text('Add User'),
),
),
),
],
),
],
),
);
},
),
),
);
}
}
</code>
part of '../screens.dart';
class RegisterUserTv extends StatefulWidget {
const RegisterUserTv({Key? key}) : super(key: key);
@override
State<RegisterUserTv> createState() => _RegisterUserTvState();
}
class CustomFocusNode extends FocusNode {
bool _isDisposed = false;
@override
void dispose() {
_isDisposed = true;
super.dispose();
}
bool get isDisposed => _isDisposed;
}
class _RegisterUserTvState extends State<RegisterUserTv> {
final _playlistName = TextEditingController();
final _playlistUrl = TextEditingController();
final _xtreamAccount = TextEditingController();
final _xtreamUsername = TextEditingController();
final _xtreamPassword = TextEditingController();
final _xtreamUrl = TextEditingController();
int indexTab = 0;
bool xtream = false;
final FocusNode playListButtonNode = FocusNode();
final FocusNode xtreamNode = FocusNode();
final CustomFocusNode nameFieldNode0 = CustomFocusNode();
final CustomFocusNode urlFieldNode0 = CustomFocusNode();
final CustomFocusNode nameFieldNode1 = CustomFocusNode();
final CustomFocusNode usernameFieldNode = CustomFocusNode();
final FocusNode containerName0 = FocusNode();
final FocusNode containerName1 = FocusNode();
final FocusNode containerUrl1 = FocusNode();
final FocusNode containerUrl0 = FocusNode();
final FocusNode containerPassword = FocusNode();
final FocusNode containerUsername = FocusNode();
final CustomFocusNode passwordFieldNode = CustomFocusNode();
final CustomFocusNode urlFieldNode1 = CustomFocusNode();
final FocusNode cancelNode1 = FocusNode();
final FocusNode addUserNode1 = FocusNode();
changeNode(BuildContext context, FocusNode focusNode) {
FocusScope.of(context).requestFocus(focusNode);
setState(() {});
}
Widget buildTextField(
BuildContext context,
CustomFocusNode focusNode,
TextEditingController controller,
String hintText,
Size mediaQuerySize,
FocusNode containerFocusNode,
FocusNode focusBefore,
FocusNode focusAfter,
) {
return Shortcuts(
shortcuts: {
LogicalKeySet(LogicalKeyboardKey.enter): ActivateIntent(),
// Mapping "OK" button (Enter key) to ActivateIntent
},
child: Actions(
actions: {
ActivateIntent: CallbackAction(
onInvoke: (intent) {
if (containerFocusNode.hasFocus) {
changeNode(context, focusNode);
}
return null;
},
),
ButtomButtonIntent: CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
changeNode(context, focusAfter);
},
),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
// Unfocus the text field before changing focus
changeNode(context, focusBefore);
},
),
},
child: Focus(
focusNode: containerFocusNode,
child: Container(
width: mediaQuerySize.width * 0.7,
height: mediaQuerySize.height * 0.1,
child: TextField(
focusNode: focusNode,
onSubmitted: (object) {
focusNode.dispose();
changeNode(context, containerFocusNode);
},
controller: controller,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: hintText,
fillColor: containerFocusNode.hasFocus
? Colors.grey[850]
: Colors.grey[900],
filled: true,
contentPadding: EdgeInsets.symmetric(
vertical: mediaQuerySize.height * 0.02,
horizontal: mediaQuerySize.width * 0.03,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.horizontal(
left: Radius.circular(mediaQuerySize.height * 0.05),
right: Radius.circular(mediaQuerySize.height * 0.05),
),
borderSide: BorderSide.none,
),
),
),
),
),
),
);
}
@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback((_) {
playListButtonNode.requestFocus();
setState(() {});
});
super.initState();
}
@override
void dispose() {
_playlistName.dispose();
_xtreamAccount.dispose();
_xtreamPassword.dispose();
_xtreamUrl.dispose();
_xtreamUsername.dispose();
xtreamNode.dispose();
nameFieldNode0.dispose();
urlFieldNode0.dispose();
nameFieldNode1.dispose();
usernameFieldNode.dispose();
passwordFieldNode.dispose();
urlFieldNode1.dispose();
cancelNode1.dispose();
addUserNode1.dispose();
super.dispose();
}
Widget playListSelected(Size mediaquarry) {
return Column(
children: [
buildTextField(
context, nameFieldNode0, _playlistName, "Name", mediaquarry,containerName0,playListButtonNode,containerUrl0),
SizedBox(height: mediaquarry.height * 0.05),
buildTextField(
context, urlFieldNode0, _playlistUrl, "Url", mediaquarry,containerUrl0,containerName0,cancelNode1),
],
);
}
Widget xtreamAccount(Size mediaquarry) {
return Column(
children: [
Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent: CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) => changeNode(context, usernameFieldNode)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) => changeNode(context, playListButtonNode))
},
child: buildTextField(
context, nameFieldNode1, _xtreamAccount, "Account", mediaquarry,containerName1,playListButtonNode,containerUsername)
),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, usernameFieldNode, _xtreamUsername, "Username", mediaquarry,containerUsername,containerName1,containerPassword),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, passwordFieldNode, _xtreamPassword, "Password", mediaquarry,containerPassword,containerUsername,containerUrl1),
SizedBox(height: mediaquarry.height * 0.01),
buildTextField(
context, urlFieldNode1, _xtreamUrl, "http://url.domain.net:8080", mediaquarry,containerUrl1,containerPassword,cancelNode1),
],
);
}
@override
Widget build(BuildContext context) {
final mediaquarry = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: Colors.blueGrey[900],
body: SafeArea(
child: BlocConsumer<AuthBloc, AuthState>(
listener: (context, state) {
if (state is AuthSuccess) {
Get.snackbar("Success", "User registered successfully");
Navigator.pop(context);
} else if (state is AuthFailed) {
// Handle error state (e.g., show error message)
Get.snackbar(
"Error", "Failed to register user: ${state.message}");
}
},
builder: (context, state) {
return Shortcuts(
shortcuts: <LogicalKeySet, Intent>{
LogicalKeySet(LogicalKeyboardKey.arrowLeft): LeftButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowRight):
RightButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowDown):
ButtomButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.arrowUp): TopButtonIntent(),
LogicalKeySet(LogicalKeyboardKey.enter): const ActivateIntent(),
},
child: ListView(
children: [
Center(
child: Padding(
padding: EdgeInsets.symmetric(
vertical: mediaquarry.width * 0.01),
child: Text(
"Add playlist",
style: TextStyle(
color: Colors.white,
fontSize: 21,
fontWeight: FontWeight.bold,
),
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent:
CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerName1);
} else {
changeNode(context, containerName0);
}
}),
RightButtonIntent: CallbackAction<RightButtonIntent>(
onInvoke: (intent) =>
changeNode(context, xtreamNode)),
ActivateIntent: CallbackAction<ActivateIntent>(
onInvoke: (ActivateIntent intent) => {
setState(() {
xtream = false;
})
},
)
},
child: Focus(
focusNode: playListButtonNode,
child: ElevatedButton(
onPressed: () {
setState(() {
xtream = false;
});
},
child: Container(
width: mediaquarry.width * 0.18,
child: Center(
child: Text('Playlist',
style: TextStyle(
fontWeight: FontWeight.bold,
color: !xtream
? Colors.black
: Colors.white)))),
style: ElevatedButton.styleFrom(
shape: playListButtonNode.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor:
xtream ? Colors.black : Colors.white,
// Set the background color to white
foregroundColor:
Colors.black, // Set the text color to black
),
),
),
),
SizedBox(
width: mediaquarry.height * 0.03,
),
Actions(
actions: <Type, Action<Intent>>{
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, playListButtonNode))
},
child: Actions(
actions: <Type, Action<Intent>>{
ButtomButtonIntent:
CallbackAction<ButtomButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerName1);
} else {
changeNode(context, containerName0);
}
}),
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, playListButtonNode)),
ActivateIntent: CallbackAction<ActivateIntent>(
onInvoke: (ActivateIntent intent) => {
setState(() {
xtream = true;
})
},
),
},
child: Focus(
focusNode: xtreamNode,
child: ElevatedButton(
onPressed: () {
setState(() {
xtream = true;
});
},
child: Container(
width: mediaquarry.width * 0.18,
child: Center(
child: Text(
'Xtream Account',
style: TextStyle(
color: xtream
? Colors.black
: Colors.white,
fontWeight: FontWeight.bold),
))),
style: ElevatedButton.styleFrom(
shape: xtreamNode.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor:
!xtream ? Colors.black : Colors.white,
// Set the background color to white
foregroundColor:
Colors.white, // Set the text color to black
),
),
),
),
)
],
),
SizedBox(height: mediaquarry.height * 0.08),
Container(
child: xtream
? xtreamAccount(mediaquarry)
: playListSelected(mediaquarry),
),
SizedBox(height: mediaquarry.height * 0.05),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Actions(
actions: <Type, Action<Intent>>{
RightButtonIntent: CallbackAction<RightButtonIntent>(
onInvoke: (intent) =>
changeNode(context, addUserNode1)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, containerUrl1);
} else {
changeNode(context, containerUrl0);
}
})
},
child: Focus(
focusNode: cancelNode1,
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Container(
width: mediaquarry.width * 0.07,
child: Center(
child: Text('Cancel',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white)))),
style: ElevatedButton.styleFrom(
shape: cancelNode1.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null,
backgroundColor: Colors.grey[900],
// Set the background color to white
foregroundColor:
Colors.black, // Set the text color to black
),
),
),
),
SizedBox(
width: mediaquarry.height * 0.03,
),
Actions(
actions: <Type, Action<Intent>>{
LeftButtonIntent: CallbackAction<LeftButtonIntent>(
onInvoke: (intent) =>
changeNode(context, cancelNode1)),
TopButtonIntent: CallbackAction<TopButtonIntent>(
onInvoke: (intent) {
if (xtream) {
changeNode(context, urlFieldNode1);
} else {
changeNode(context, urlFieldNode0);
}
})
},
child: Focus(
focusNode: addUserNode1,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: addUserNode1.hasFocus
? RoundedRectangleBorder(
side: const BorderSide(
width: 3, color: Colors.blue),
borderRadius: BorderRadius.circular(
mediaquarry.height * 0.05))
: null),
onPressed: () {
if (state is AuthLoading) {
return;
}
},
child: state is AuthLoading
? CircularProgressIndicator()
: Text('Add User'),
),
),
),
],
),
],
),
);
},
),
),
);
}
}