Changing tab by clicking a button-CodePudding

I am creating app which contains tabbars and I want to open specific bar by clicking floating button. I am new in Flutter that is why cannot apply others answers into my code.

Here is my all code:

            import 'package:flutter/material.dart';

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatefulWidget {
      @override
      State<StatefulWidget> createState() {
        return MyAppState();}
    }

    class MyAppState extends State<MyApp> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(title: 'Title of Application',
          theme: ThemeData(scaffoldBackgroundColor: const Color(0x10101010)),
          home: const MyHomePage(),);}}

    class MyHomePage extends StatelessWidget {
      const MyHomePage({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return DefaultTabController(
            length: 2,
            child: Scaffold(
              appBar: AppBar(bottom: createTabBar(),),),
              body: TabBarView(
                children: [const Center(
                        margin: const EdgeInsets.only(top: 15.0, bottom: 15.0),
                        width: 500,child: FloatingActionButton(onPressed: () {},),
                      
                  ),
                  const Center(
                      child: Text("Portfolio",style: TextStyle(color: Colors.white,),)),
                ],
              ),));
              }

      TabBar createTabBar() {
        return TabBar(tabs: [Row(children: const [Icon(Icons.home_rounded,),SizedBox(width: 5),Text("Home",)]),
            Row(children: const [Icon(Icons.palette_rounded),SizedBox(width: 5),Text("Portfolio")]),],
        );
      }
    }

CodePudding user response：

You will have to create a TabBarController and keep that in your state. Therefore change your MyHomePage-stateless widget to stateful.

Then you can call that controller from the FloatingActionButton and let the controller change index.

So instead you need to do:

class MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: 2); // This would best not to be hard coded, but I saw that you had two tabs...
  }

 @override
 void dispose() {
   _tabController.dispose();
   super.dispose();
 }

  @override
  Widget build(BuildContext context) {
  ...
  TabBarView(
    controller: _tabController,
    ...
  )
}

and your floating action button should do:

FloatingActionButton(
  onPressed: () {
    _tabController.animateTo(index); // where index is the tab you want to go to..
  },
)

CodePudding user response：

In your case you need to use tabcontroller.

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late TabController controller;
  @override
  void initState() {
    controller = TabController(vsync: this, length: 2);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: createTabBar(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            controller.animateTo(1);
          },
          child: Icon(Icons.move_down),
        ),
        body: TabBarView(
          controller: controller,
          children: [
            Center(
              child: Container(),
            ),
            const Center(
              child: Text(
                "Portfolio",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  TabBar createTabBar() {
    return TabBar(
      tabs: [
        Row(children: const [
          Icon(
            Icons.home_rounded,
          ),
          SizedBox(width: 5),
          Text(
            "Home",
          )
        ]),
        Row(children: const [
          Icon(Icons.palette_rounded),
          SizedBox(width: 5),
          Text("Portfolio")
        ]),
      ],
    );
  }
}