Flutter change page from bottomappbar

Question

I'm new on Flutter and I'm trying to have 2 navigation Bar. My TabBar is working as well but my BottomAppBar isn't working for page changing. Yes I want to keep the design of my FAB BottomAppBar that's why I don't want to use BottomNavigationBar.

I have read this following answer : but my body is already assigned so I cannot make a PageView.

My Code :

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DefaultTabController(
        length: 6,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              isScrollable: true,
              tabs: [
                Tab(text: "NewPay1.1"),
                Tab(text: "NewMall 1.0"),
                Tab(text: "海报"),
                Tab(text: "企业版"),
                Tab(text: "个版"),
                Tab(text: "poa")
              ],
            ),
            title: Text('tabBar'),
          ),
          body: TabBarView(
            children: [
              TaskListPage(),
              TestPage(),
            ],
          ),
          bottomNavigationBar: BottomAppBar(
            color: Colors.white,
            shape: CircularNotchedRectangle(),
            child: Row(
              children: <Widget>[
                IconButton(onPressed: () {
                  print("home clicked");
                  TaskListPage();
                  },
                  icon: Icon(Icons.home),),
                SizedBox(),
                IconButton(onPressed: () {
                  print("third clicked");
                  TestPage();
                },
                    icon: Icon(Icons.more))
              ],
              mainAxisAlignment: MainAxisAlignment.spaceAround,
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: (){
              return TestPage().createState();
            },
            child: Icon(Icons.add),
          ),
          floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        ),
      ),
    );
  }
}

Answer 1

Output:

Here is what you need.

class _MyAppState extends State<MyApp> with TickerProviderStateMixin {
  TabController _tabController; // use this instead of DefaultTabController

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 6, vsync: this); // initialise it here
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: Scaffold(
        appBar: AppBar(
          bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: [
              Tab(text: "NewPay1.1"),
              Tab(text: "NewMall 1.0"),
              Tab(text: "海报"),
              Tab(text: "企业版"),
              Tab(text: "个版"),
              Tab(text: "poa"),
            ],
          ),
          title: Text('tabBar'),
        ),
        body: TabBarView(
          controller: _tabController,
          children: [ // these are your pages 
            Page1(),
            Page2(),
            Page3(),
            Page4(),
            Page5(),
            Page6(),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          color: Colors.white,
          shape: CircularNotchedRectangle(),
          child: Row(
            children: <Widget>[
              IconButton(
                onPressed: () => _tabController.animateTo(0), // go to page1
                icon: Icon(Icons.home),
              ),
              SizedBox(),
              IconButton(onPressed: () => _tabController.animateTo(1), // go to page 2
              icon: Icon(Icons.more))
            ],
            mainAxisAlignment: MainAxisAlignment.spaceAround,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      ),
    );
  }
}