Dfyjkt

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,
 ),
 )
 ]
 )
 ),
 );