Карусель Флаттера странное поведение

Question

Мне нужна карусель виджетов, которая будет содержать некоторый текст, а внизу должна отображаться картинка для каждого виджета, а также точечная навигация. Кроме того, между каруселью и точечной навигацией должно быть пространство, так как мне нужно добавить немного контента и кнопки, которые будут фиксироваться между каруселью и точечной навигацией. Поэтому я использовал виджет Column и создал два контейнера, один для карусели, а другой для точечной навигации.

Теперь проблема в том, что когда я использую приведенный ниже код для изменения карусели через 5 секунд, я получаю странное поведение точечной навигации. Изменение виджета с 1-го на 2-е через 5 секунд. Точечная навигация выглядит следующим образом 1 -> 2 -> 1 -> 2. Я не понимаю, почему он возвращается к 1-й точке и снова возвращается ко 2-й. Это прекрасно работает на жест пальцем. Мне нужно решение для этого странного поведения.

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

Вот код.

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

Я запустил ваш код, но исключил таймер, и он сработал так, как и предполагалось, поэтому проблема, вероятно, заключается в вашем таймере. Может случиться так, что вы скажете программе добавить один кадр (: _controller.index++);), и в следующий раз при запуске вы попросите ее вернуться на один кадр (_controller.length - 1? 0).

Теперь я не эксперт в этом, так что не принимайте мои слова как должное, но, возможно, стоит попробовать.

Удачи