How to fix No TabController for TabBar - flutter

Question

I'm new in flutter and I'm trying to make a TabBar view like in the figure. But it shows "No TabController for TabBar" and When creating a TabBarView, you must either provide an explicit TabController using the "controller" property, or you must ensure that there is a DefaultTabController above the TabBarView.
In this case, there was neither an explicit controller nor a default controller.
I have tried a suggestion that mentioned in the internet but still got error. Can anyone help me how to fix it?? Thank you
class _TransactionState extends State<Transaction> with SingleTickerProviderStateMixin {
int _value = 1;
TabController controller;
#override
void initState() {
controller = new TabController(vsync: this, length: 2);
super.initState();
}
#override
void dispose() {
controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Transaction'),
actions: <Widget>[
DropdownButton(
dropdownColor: primary,
value: _value,
items: [
DropdownMenuItem(
child: Text(
"Daily",
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
),
),
value: 1,
),
DropdownMenuItem(
child: Text("Monthly",
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
),),
value: 2,
),
DropdownMenuItem(
child: Text("Yearly",
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
),),
value: 3,
),
],
onChanged: (int value){
setState(() {
_value = value;
});
//Padding(padding: EdgeInsets.all(20.0));
style: new TextStyle(
color: Colors.white,
);
},
),
],
automaticallyImplyLeading: false,
backgroundColor: secondary,
bottom: new TabBar(
controller: controller,
tabs: <Widget>[
new Tab(icon: new Icon(Icons.add_shopping_cart),text: "Expense",),
new Tab(icon: new Icon(Icons.attach_money),text: "Income",),
],
),
),
body: TabBarView(
controller: controller,
children: <Widget>[
new expense.TransactionExpense(),
new income.TransactionIncome(),
],
),
);
}
}

Answer 1

This should solve it.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: MyAppState()
);
}
}
class MyAppState extends StatefulWidget{
#override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyAppState> with TickerProviderStateMixin {
TabController _controller;
final List<Tab> topTabs = <Tab>[
new Tab(text: 'Profile'),
new Tab(text: 'Match'),
new Tab(text: 'Chat'),
];
#override
void initState() {
super.initState();
_controller = TabController(vsync: this, length: 3);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MyApp'),
bottom: TabBar(
controller: _controller,
tabs: topTabs,
),
),
body: TabBarView(
controller: _controller,
children: [
new Container(
color: Colors.lightBlueAccent,
child: Center(child: Text('Profile', style: TextStyle(color: Colors.white),),),
),
new Container(
color: Colors.purpleAccent,
child: Center(child: Text('Match', style: TextStyle(color: Colors.white),),),
),
new Container(
color: Colors.lightGreenAccent,
child: Center(child: Text('Chat', style: TextStyle(color: Colors.white),),),
)
]),
);
}
}