In the Home Page I have a button called Select Language. When the button is clicked it will navigate to the new page where we can select the language.
Now what I want to achieve is when I navigate to the language selection page The talkback focus should be the AppBar() title.But it always goes to the back button in the AppBar(). So I used the Focus() Widget to programatically change the focus to the AppBar title.After warping the Text() widget with the Focus() widget, The talkback focus was always in the title but only in the debug build. In the release build the talkback focus was in the back button and rarely in the title.
From the last two days of digging what I found is the accessibility focus and input focus are two different things. We can't change the accessibility focus with the FocusNode(). Well in some cases it did change.
These are some of the forms I referred
https://github.com/flutter/flutter/issues/94523
https://github.com/flutter/flutter/issues/107069
https://github.com/flutter/flutter/issues/59594
https://github.com/flutter/flutter/issues/97747 - still open
With the latest update in the flutter is there anyway to change the accessibility focus programatically?
Home Page Code:
import 'package:device_info/language_selection.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () => Navigator.push(
context,
CupertinoPageRoute(
builder: (context) => const LanguagePage(),
),
),
child: const Text(
"Select Language",
style: TextStyle(color: Colors.white),
),
),
),
);
}
}
Language Selection Page:
import 'package:flutter/material.dart';
class LanguagePage extends StatefulWidget {
const LanguagePage({super.key});
@override
State<LanguagePage> createState() => _LanguagePageState();
}
class _LanguagePageState extends State<LanguagePage> {
FocusNode languageFoucsNode = FocusNode();
String language = "";
List<String> languageList = [
"Tamil",
"Malayalam",
"Telugu",
"English",
"Kanadam",
"Hindi"
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
excludeHeaderSemantics: true,
leading: IconButton(
onPressed: () => Navigator.pop(context),
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
),
title: Focus(
autofocus: true,
focusNode: languageFoucsNode,
child: Text(
language.isNotEmpty ? language : "Please Select a Language",
style: const TextStyle(color: Colors.white),
),
),
),
body: ListView.builder(
shrinkWrap: true,
itemCount: languageList.length,
itemBuilder: (BuildContext context, int index) {
return TextButton(
onPressed: () {
setState(() {
language = languageList[index];
});
Navigator.pop(context);
},
child: Text(
languageList[index],
textAlign: TextAlign.left,
style: const TextStyle(color: Colors.black),
),
);
},
),
);
}
}