Flutter TabBar resets index when returning from detail view

Question

This is my scenario:

• The App has a Tabbar with 5 Tabs
• Some Views have a detail view

Implementation of the detail view:

onTap: () => Navigator.push(context,
          MaterialPageRoute(builder: (context) => RPlanDetail(lesson))),

(RPlanDetail is the detail view and lesson is the passed data)

The base view

Now to the problem: When I return to the base view the index on the tabbar is wrong. So the tabbar indicates that you are on the first view while you are on another view.

How can I fix this?

Please let me know if you need additional information.
Thank you for your help!

Answer 1

Set your Tab Controller inside 'initState();'

Never put Tab Controller in 'build(BuildContext context)'

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

Answer 2

I have a code demo as below:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: TabBarDemo(),
    ),
  );
}

class TabBarDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return TabBarDemoState();
  }
}

class TabBarDemoState extends State<TabBarDemo> with TickerProviderStateMixin {
  static int _index = 0;
  TabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = TabController(
        initialIndex: TabBarDemoState._index, length: 3, vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _controller,
          tabs: [
            Tab(icon: Icon(Icons.directions_car)),
            Tab(icon: Icon(Icons.directions_transit)),
            Tab(icon: Icon(Icons.directions_bike)),
          ],
          onTap: (int index) {
            TabBarDemoState._index = index;
          },
        ),
        title: Text('Tabs Demo'),
      ),
      body: TabBarView(
        controller: _controller,
        children: [
          Center(
            child: FlatButton(
              color: Colors.red,
              child: Text("Go to Detail page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (ct) => DetailPage(TabBarDemoState._index)));
              },
            ),
          ),
          Center(
            child: FlatButton(
              color: Colors.red,
              child: Text("Go to Detail page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (ct) => DetailPage(TabBarDemoState._index)));
              },
            ),
          ),
          Center(
            child: FlatButton(
              color: Colors.red,
              child: Text("Go to Detail page"),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (ct) => DetailPage(TabBarDemoState._index)));
              },
            ),
          ),
        ],
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  DetailPage(this.index);
  final int index;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text("Detail page $index"),
      ),
    );
  }
}

I hope it can help you. But I have an advise for you that you should replace Navigator.push to Navigator.pushName and use Navigate with named routes, Because it don't create a new screen. You can read more: https://flutter.dev/docs/cookbook/navigation/named-routes