The code works properly in a simplified version of the program I wrote. Here's the code:
import 'package:flutter/material.dart';
class GrandParent extends StatelessWidget {
const GrandParent({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('FocusNode Test'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => const Parent()),
);
},
child: Text('Go to Parent')),
),
);
}
}
class Parent extends StatefulWidget {
const Parent({super.key});
@override
State<Parent> createState() => _ParentState();
}
class _ParentState extends State<Parent> {
FocusNode? _focusNode1;
FocusNode? _focusNode2;
@override
void initState() {
super.initState();
_focusNode1 = FocusNode();
_focusNode2 = FocusNode();
WidgetsBinding.instance.addPostFrameCallback((_) {
_focusNode1!.requestFocus();
});
}
@override
void dispose() {
_focusNode1!.dispose();
_focusNode2!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final bool isSmallScreen = MediaQuery.of(context).size.width < 600;
return Scaffold(
appBar: AppBar(
title: Text('FocusNode Test'),
),
body: Center(
child: isSmallScreen
? ChildOne(
focusNode1: _focusNode1,
focusNode2: _focusNode2,
)
: ChildTwo(
focusNode1: _focusNode1,
focusNode2: _focusNode2,
),
),
);
}
}
class ChildOne extends StatelessWidget {
final FocusNode? focusNode1;
final FocusNode? focusNode2;
const ChildOne(
{super.key, required this.focusNode1, required this.focusNode2});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.amber[600],
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Small Screen Widget',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(
height: 8,
),
TextField(
focusNode: focusNode1,
decoration: InputDecoration(hintText: 'FocusNode 1'),
),
TextField(
focusNode: focusNode2,
decoration: InputDecoration(hintText: 'FocusNode 2'),
),
],
),
);
}
}
class ChildTwo extends StatelessWidget {
final FocusNode? focusNode1;
final FocusNode? focusNode2;
const ChildTwo(
{super.key, required this.focusNode1, required this.focusNode2});
@override
Widget build(BuildContext context) {
return Container(
color: Colors.amberAccent,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Large Screen Widget'),
SizedBox(
height: 8,
),
TextField(
focusNode: focusNode1,
decoration: InputDecoration(hintText: 'FocusNode 1'),
),
TextField(
focusNode: focusNode2,
decoration: InputDecoration(hintText: 'FocusNode 2'),
),
],
),
);
}
}
I've already put a breakpoint on the dispose() method's instance and tested the behavior of the FocusNode, which behaves as expected through the following output demonstration:
I will also be monitoring the focus state of the FocusNode instance here.
My concern is, do I make it right? The primary reason why I am asking is that I was thinking if I need to use InheritedWidget class or if this given demonstration is considered production-ready.
Additionally, does this approach offer performance efficiency or not?
