Back button leads to a very first page - flutter

Question

I use a DefaultTabController tabbar which looks like this
class MainTabs extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: MyAppbar(),
body: TabBarView(
children: [
CardContentPage(title: 'Tab1'),
DeviceContentPage(title: 'Tab2'),
SettingsPage(title: 'Tab2'),
],
),
),
);
}
}
But with this design the back button always leads to a very first page of the application.
How can I set up it so that back button works as expected with DefaultTabController?

Answer 1

Using a DefaultTabController you can just prevent the user from return, using the WillPopScope:
DefaultTabController(
initialIndex: 0,
length: 3,
child: WillPopScope(
onWillPop: () async {
return false;
},
child: Scaffold(
appBar: AppBar(
bottom: TabBar(tabs: [
Tab(text: 'First',),
Tab(text: 'Second',),
Tab(text: 'Third',),
]),
),
body: TabBarView(
children: [
Container(color: Colors.red,),
Container(color: Colors.yellow,),
Container(color: Colors.green,),
],
),
),
),
);
But with a TabController you can set the route to the previous page:
class TabPage extends StatefulWidget {
#override
_TabPageState createState() => _TabPageState();
}
class _TabPageState extends State<TabPage> with SingleTickerProviderStateMixin {
TabController tabController;
#override
void initState() {
tabController = TabController(length: 3, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
bottom: TabBar(
controller: tabController,
tabs: [
Tab(
text: 'First',
),
Tab(
text: 'Second',
),
Tab(
text: 'Third',
),
],
),
),
body: TabBarView(
controller: tabController,
children: [
Container(
color: Colors.red,
),
WillPopScope(
onWillPop: () async {
tabController.animateTo(0, duration: Duration(milliseconds: 500),);
return false;
},
child: Container(
color: Colors.yellow,
),
),
WillPopScope(
onWillPop: ()async {
tabController.animateTo(1, duration: Duration(milliseconds: 500),);
return false;
},
child: Container(
color: Colors.green,
),
),
],
),
);
}
}