how to manage 'TabBarView' in flutter? - flutter

Question

I tried to make TabBarView in TabBar, but When I put the code below, It became white screen totally and there's nothing and not specific error.. How Çan I solve it? please advice me and appreciate it.
class Buttons extends StatefulWidget {
const Buttons({Key? key}) : super(key: key);
#override
State<Buttons> createState() => _ButtonsState();
}
class _ButtonsState extends State<Buttons> with TickerProviderStateMixin { // 다중 AnimationController를 사용할 때..???
#override
Widget build(BuildContext context) {
TabController _tabController = TabController(length: 3, vsync: this);
return Container(
child: Column(
children: [
Container(
child: TabBar(
controller: _tabController,
tabs: [
Tab(icon: ClipRRect(child: Text("Shop"),),),
Tab(icon: ClipRRect(child: Text("Donate"),),),
Tab(icon: ClipRRect(child: Text("BId"),),)
],
),
),
Container(
// width: double.maxFinite,
height: 300,
child: TabBarView(
controller: _tabController,
children: [
ShopPage(),
DonatePage(),
BidPage()
],
)
)
])
);
}
}
In children, Each pages are in other file and I imported those.

Answer 1

I have checked your code there are some corrections in it I have made it so please try the below code. I have checked with the below code and it works well.
class Buttons extends StatefulWidget {
const Buttons({Key? key}) : super(key: key);
#override
State<Buttons> createState() => _ButtonsState();
}
class _ButtonsState extends State<Buttons> with TickerProviderStateMixin { // 다중 AnimationController를 사용할 때..???
late TabController _tabController;
#override
Widget build(BuildContext context) {
#override
void initState() {
// TODO: implement initState
super.initState();
_tabController = TabController(length: 3, vsync: this);
}
return Scaffold(
appBar: AppBar(
centerTitle: false,
title: Text(
'Tabbar Demo',
style: TextStyle(
fontSize: 20
),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(50),
child: Container(
child: TabBar(
controller: _tabController,
tabs: [
Tab(icon: ClipRRect(child: Text("Shop", style: TextStyle(color: Colors.white),),),),
Tab(icon: ClipRRect(child: Text("Donate", style: TextStyle(color: Colors.white)),),),
Tab(icon: ClipRRect(child: Text("BId", style: TextStyle(color: Colors.white)),),)
],
),
),
),
),
body: SafeArea(
child: Container(
child: Column(
children: [
Expanded(
child: Container(
child: TabBarView(
controller: _tabController,
children: [
Container(color: Colors.red,),
Container(color: Colors.black87,),
Container(color: Colors.yellow,)
],
)
),
)
])
),
)
);
}
}
Here is the out put from the above code
Let me know if any query