how to manage 'TabBarView' in flutter?

Uranus_ly 0
Viewed 33

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.

dart flutter
1 Answers

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

Vishal Parmar0
Related