CODEWITHSUNDEEP
fluttertabbarcontroller
Globe
Globe

Reputation: 564

Navigate to another screen in TabBarView without getting rid of the TabBar

My app launches to a TabBarView controlled 5 tabs. It starts at the home page which has a feed of posts. When a user clicks on the header of the post, the app needs to navigate to the profile screen. However, if I just use the code Navigator.push(context, MaterialPageRoute(builder: (context) => ProfileScreen(username: username)));, the profile screen replaces the TabBarView instead of just showing the screen behind the TabBarView. How can I navigate to a different screen in the same tab without replacing the TabBarView? Here is my main.dart code:

var firstCamera;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // Obtain a list of the available cameras on the device.
  final cameras = await availableCameras();

  // Get a specific camera from the list of available cameras.
  firstCamera = cameras.first;

  await Firebase.initializeApp();
  runApp(MyApp());
}

// void main() async {
//   WidgetsFlutterBinding.ensureInitialized();
//   await Firebase.initializeApp();
//   runApp(MyApp());
// }

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GLOBE',
      debugShowCheckedModeBanner: false,
      home: const MyHome(),
      routes: {
        LoginScreen.id: (context) => LoginScreen(),
        SignupScreen.id: (context) => SignupScreen(),
        HomeScreen.id: (context) => HomeScreen()
      },
    );
  }
}

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

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

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {

  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        children: [
          HomeScreen(),
          HomeScreen(),
          TakePictureScreen(camera: firstCamera),
          HomeScreen(),
          ProfileScreen(username: "cjmofficial")
        ],
        controller: _tabController
      ),
      extendBody: true,
      bottomNavigationBar: Container(
        color: Colors.transparent,
        padding: EdgeInsets.symmetric(vertical: 40, horizontal: 40),
        child: ClipRRect(
          clipBehavior: Clip.hardEdge,
          borderRadius: BorderRadius.circular(50.0),
          child: Container(
            height: 55,
            color: Colors.grey[200],
            child: TabBar(
                labelColor: Colors.teal[200],
                unselectedLabelColor: Colors.blueGrey,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(color: Colors.teal),
                    insets: EdgeInsets.fromLTRB(50, 0, 50, 40)
                ),
                indicatorColor: Colors.teal,
                tabs: [
                  Tab(icon: Icon(Icons.home_outlined)),
                  Tab(icon: Icon(Icons.explore_outlined)),
                  Tab(icon: Icon(Icons.camera_alt_outlined)),
                  Tab(icon: Icon(Icons.movie_outlined)),
                  Tab(icon: Icon(Icons.person_outline))
                ],
                controller: _tabController),
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Views: 780

Answers (1)

MindStudio
MindStudio

Reputation: 786

Use _tabController.animateTo(pageIndex) instead of the Navigator.

Here is the official documentation and an easy to understand example: https://api.flutter.dev/flutter/material/TabController-class.html

Also from this page: To get index of current tab use tabController.index

Upvotes: 0

Related Questions