flutter - Issue with the TabBarView and TabBar on swiping

Question

the issue is illustrated in the gif attached below, on swiping to right works perfectly, but on swiping to left icons in the bottom TabBar responses really weirdly. It goes back by 2 steps and only then goes to normal desired index. For example, I'm on page with person icon, on swiping left it goes to the shopping card icon and only then to favorite icon. But it works only for the icons on the bottom, pages are animated perfectly. Any help will be greatly appreciated.

import 'package:flutter/material.dart';

import '../colors.dart';

class MyTabPage extends StatefulWidget {
  @override
  _MyTabPageState createState() => _MyTabPageState();
}

class _MyTabPageState extends State<MyTabPage> with TickerProviderStateMixin {
  int _selectedIndex = 0;
  TabController _tabController;

  void onTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  void initState() {
    _tabController = new TabController(
      length: 4,
      vsync: this,
    );
    _tabController.addListener(() {
        setState(() {
          _selectedIndex = _tabController.index;
        });
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: Container(
        height: 70,
        color: blue,
        child: Center(
          child: TabBar(
            tabs: List<Widget>.generate(
              4,
              (index) => Container(
                margin: EdgeInsets.symmetric(horizontal: 8),
                child: Icon(
                  icons[index],
                  color: _selectedIndex == index ? Colors.black : white,
                ),
              ),
            ),
            unselectedLabelColor: const Color(0xffacb3bf),
            indicatorColor: Colors.transparent,
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorWeight: 1.0,
            isScrollable: true,
            controller: _tabController,
            onTap: onTap,
            labelPadding: EdgeInsets.all(0),
          ),
        ),
      ),
      body: Container(
        child: TabBarView(
          controller: _tabController,
          children: List<Widget>.generate(
            4,
            (index) => Container(
              child: Center(
                child: Text("$index"),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

List<IconData> icons = [
  Icons.home,
  Icons.shopping_cart,
  Icons.favorite,
  Icons.person,
];

enter image description here

Answer 1

等待大神答复