How to use TabController - flutter

Question

I just learned flutter, I was confused how to use the TabController, I had followed what was described on the official website, but an error appeared, and I don't know how to fix it.
I just want to change the title and leading from the appbar when changing tabs.
final List<ChangeTitleAndLeading> _data = [
new ChangeTitleAndLeading(title: "Home", leading: Icon(Icons.home)),
new ChangeTitleAndLeading(title: "Profile", leading: Icon(Icons.person)),
new ChangeTitleAndLeading(title: "Friends", leading: Icon(Icons.people))
];
ChangeTitleAndLeading _handler;
TabController _controller;
#override
void initState() {
super.initState();
_checkEmailVerification();
_controller = TabController(vsync: this, length: 3);
_handler = _data[0];
_controller.addListener(_handleSelected);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
void _handleSelected() {
setState(() {
_handler = _data[_controller.index];
});
}
return MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.teal,
),
home: new Scaffold(
appBar: new AppBar(
leading: Icon(Icons.home),
title: new Text("Home"),
bottom: new TabBar(
controller: _controller,
tabs: _tabs,
),
),
body: TabBarView(
controller: _controller,
children: _pages,
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
print('Current Index: ${_handler.title}');
}
),
class ChangeTitleAndLeading {
final String title;
final Widget leading;
ChangeTitleAndLeading({
#required this.title,
#required this.leading
}) :
assert(title != null),
assert(leading != null);
}
Error log:
Error Log:
I/flutter (19638): No TabController for TabBarView.
I/flutter (19638): When creating a TabBarView, you must either provide an explicit TabController using the "controller"
I/flutter (19638): property or you must ensure that there is a DefaultTabController above the TabBarView.
I/flutter (19638): In this case, there was neither an explicit controller nor a default controller.
════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter (19638): Another exception was thrown: No TabController for TabBar.
And when i change this:
leading: Icon(Icons.home), to leading: _handler.leading,
and this:
title: new Text("Home"), to title: new Text(_handler.title),
always return error _handler.leading or _handler.title was null
Image

Answer 1

Try this solution :-
don't forget to inhert
TickerProviderStateMixin
class HomePage extends StatefulWidget {
const HomePage();
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
late TabController tabController;
#override
void initState() {
super.initState();
tabController = TabController(
initialIndex: 0,
length: 2,
vsync: this,
);
}
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: Row(
children: [
Image.asset(
'assets/images/png/logo.png',
height: 60,
width: 60,
),
Spacer(),
Container(
width: 400,
child: TabBar(
labelColor: Color.fromRGBO(4, 2, 46, 1),
labelStyle: theme.textTheme.headline1,
indicatorColor: Color.fromRGBO(4, 2, 46, 1),
unselectedLabelColor: Colors.grey,
controller: tabController,
tabs: [
Text('الفاتورة'),
Text('دليفري'),
],
),
),
],
),
),
body: Container(
child: TabBarView(
controller: tabController,
children: [
Container(
color: Colors.red,
),
Container(
color: Colors.orange,
),
],
),
),
);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
}

Answer 2

The issue is that you are missing a tabbarcontroller
Your code should be:
return MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.teal,
),
home: DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
leading: Icon(Icons.home),
title: new Text("Home"),
bottom: new TabBar(
controller: _controller,
tabs: _tabs,
),
),
body: TabBarView(
controller: _controller,
children: _pages,
)...