Flutter - TextField focus changes TabBar selected index - flutter

Question

I have a Scaffold, within it I have a TabBar, TabBarView and a TextField.
The TabBar has 3 tabs (e.g. tabs A, B and C), the TabBarView has 3 views and this TextField is at the last tab (tab C).
Everything is working, but whenever I put the focus on the TextField to type something, the TabBar is changed from tab C to tab A. Very annoying. This should not happen. The TabBarView remains unchanged.
I created the controller in the initState. like this:
#override
void initState() {
super.initState();
widget._tabBarController =
new TabController(length: 3, vsync: this);
}
Any idea why it happens?
Code:
class AtendimentoOrtoWidget extends StatefulWidget {
TabController _tabBarController;
#override
_AtendimentoOrtoWidgetState createState() => _AtendimentoOrtoWidgetState();
}
class _AtendimentoOrtoWidgetState extends State<AtendimentoOrtoWidget>
with SingleTickerProviderStateMixin {
#override
void initState() {
super.initState();
widget._tabBarController =
new TabController(length: 3, vsync: this);
}
#override
Widget build(BuildContext context) {
return SafeArea(
top: false,
child: new DefaultTabController(
length: 3,
child: new Scaffold(
resizeToAvoidBottomPadding: false,
appBar: new AppBar(
toolbarOpacity: 0.5,
automaticallyImplyLeading: true,
backgroundColor: Colors.white,
elevation: 2.0,
title: new TabBar(
controller: widget._tabBarController,
unselectedLabelColor: Colors.black,
indicatorColor: Colors.black,
labelColor: Colors.black,
// indicatorWeight: 0.0,
isScrollable: true,
labelStyle: new TextStyle(
fontSize: 16.0,
fontFamily: 'Caecilia',
fontWeight: FontWeight.w700),
tabs: <Widget>[
new Tab(
text: "TAB A",
),
new Tab(
text: "TAB B",
),
new Tab(
text: "TAB C",
)
],
),
),
backgroundColor: Colors.white,
body: new TabBarView(
controller: widget._tabBarController,
children: <Widget>[
new Container(),
new Container(),
new TextField()
],
))));
}
}

Answer 1

I tried it. Check the below code. If you still facing the same issue then share your implementation.
import 'package:flutter/material.dart';
class TabScreen extends StatefulWidget {
#override
_TabScreenState createState() => _TabScreenState();
}
class _TabScreenState extends State<TabScreen> with SingleTickerProviderStateMixin {
GlobalKey<ScaffoldState> _scaffoldKey = new GlobalObjectKey<ScaffoldState>('TabScreen');
TabController tabController;
#override
void initState() {
super.initState();
tabController = new TabController(length: 3, vsync: this);
}
#override
void dispose() {
super.dispose();
tabController.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("Tab Demo"),
),
backgroundColor: Colors.white,
body: Column(
children: <Widget>[
TabBar(
controller: tabController,
tabs: <Widget>[
Tab(
child: Container(
child: new Text(
'A',
style: TextStyle(color: Colors.black),
),
),
),
Tab(
child: Container(
child: Text(
'B',
style: TextStyle(color: Colors.black),
),
),
),
Tab(
child: Container(
child: Text(
'C',
style: TextStyle(color: Colors.black),
),
),
)
],
),
Flexible(
child: TabBarView(
controller: tabController,
children: <Widget>[
Placeholder(),
Placeholder(),
ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(labelText: "Name"),
),
),
],
),
],
))
],
),
);
}
}