Flutter's carousel weird behavior

Question

I need a carousel of widgets which will contain some text and an image per widget plus dot navigation should be shown at the bottom. Plus there should be space between the carousel and dot navigation as I need to add few content and button which will be fixed between the carousel and dot navigation. So I have used Column widget and created two containers one for carousel and other for dot navigation.

Now the issue is when I use below code to change carousel after 5sec I get a weird behavior of dot navigation. The widget change from 1st to 2nd after 5sec the dot navigation goes like this 1 -> 2 -> 1 -> 2. I don't understand why it goes back to 1st dot and comes to 2nd again. This works fine on finger swipe gesture. I need a solution for this weird behavior.

Timer.periodic(new Duration(seconds: 5), (_) {
    _controller.animateTo(
      _controller.index == _controller.length - 1
        ? 0
        : _controller.index++);
  });

Here is the code.

import 'dart:async';
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin{
  TabController _controller;
  Timer _time;
  @override
  void initState() {
    _controller = TabController(length: 5, vsync: this);
      _time = Timer.periodic(new Duration(seconds: 5), (_) {
        _controller.animateTo(
          _controller.index == _controller.length - 1
            ? 0
            : _controller.index++);
      });

    super.initState();
  }
  @override
  void dispose() {
    _controller.dispose();
    _time.cancel();
    super.dispose();
  }
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: <Widget>[
            Container(
              color: Colors.red, height:100.0, width:100.0,
              child: DefaultTabController(
                length: 5,
                child: TabBarView(
                  controller: _controller,
                  children: <Widget>[
                    Container(color: Colors.red, height:100.0, width:100.0),
                    Container(color: Colors.blue, height:100.0, width:100.0),
                    Container(color: Colors.green, height:100.0, width:100.0),
                    Container(color: Colors.yellow, height:100.0, width:100.0),
                    Container(color: Colors.grey, height:100.0, width:100.0),
                  ],
                ),
              ),
            ),
            Container(
              child: TabPageSelector(
                controller: _controller,
                selectedColor: Colors.grey,
                color: Colors.white,
              ),
            )
          ]
        )
      ),
    );
  }
}

Answer 1

I ran your code but excluded the timer and it worked as it's supposed to, so the problem probably lies in your timer. It could be that you tell the program to add one frame ( : _controller.index++); ) and the next time it runs, you tell it to go back one frame ( _controller.length - 1 ? 0).

Now I'm not an expert on this, so don't take my word for granted, but maybe worth a try.

Good luck