简体   繁体   中英

How to set index of TabBarView?

I'm trying to mount BottomNavigationBar to TabBarView . How to set the index of TabBarView so I can display 2nd item (search page)? should I use Ontap and switch case ? still how to set the index?

body: SafeArea(
      // child: (pages[currentIndex1]),
      child: TabBarView(
        children: <Widget>[
          Home(),
          Search(),
        ].toList(),
        // controller: ,
      ),
    ),

    bottomNavigationBar: BottomNavigationBar(
      currentIndex: currentIndex1,
      type: BottomNavigationBarType.shifting,
     
      showUnselectedLabels: false,
      showSelectedLabels: false,
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
            backgroundColor: Colors.blue),
        BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
            backgroundColor: Colors.blue),
        
      ],

you need to provide TabController on TabBarView , then you can switch tabItems using this controller.

you can check this example

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("home"),
    );
  }
}

class Search extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("Search"),
    );
  }
}

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

  @override
  _NavTestState createState() => _NavTestState();
}

class _NavTestState extends State<NavTest> with SingleTickerProviderStateMixin {
  final widgets = [
    Home(),
    Search(),
  ];
  int currentIndex1 = 0;

  late TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: widgets.length, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        // child: (pages[currentIndex1]),
        child: TabBarView(
          children: widgets,
          controller: controller,
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex1,
        type: BottomNavigationBarType.shifting,
        showUnselectedLabels: false,
        showSelectedLabels: false,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
            backgroundColor: Colors.blue,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
            backgroundColor: Colors.blue,
          ),
        ],
        onTap: (value) {
          setState(() {
            // currentIndex1 = value;
            controller.index = value;
          });
        },
      ),
    );
  }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM