0

Criei um Widget Aqui para tentar implementar, pensando na logica que se eu tentar ir para tras no primeiro item, eu iria dar um jump para a ultima pagina e se eu tivesse na ultima page eu daria um jump para a primeira, mas apenas fico entre as 3 e nao consigo realizar essas operações que tentei, alguem conseguiria me ajudar?

class CircularItemList extends StatefulWidget {
  const CircularItemList({super.key});

  @override
  CircularItemListState createState() => CircularItemListState();
}

class CircularItemListState extends State<CircularItemList> {
  List<String> items = ['item 1', 'item 2', 'item 3'];
  late PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: _currentPage);
    _pageController.addListener(_pageListener);
  }

  void _pageListener() {
    if (_pageController.page == _pageController.page!.roundToDouble()) {
      setState(() {
        _currentPage = _pageController.page!.toInt();
      });
    }
  }

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

  void _scrollToNext() {
    if (_currentPage < items.length - 1) {
      _pageController.animateToPage(
        _currentPage + 1,
        duration: Duration(milliseconds: 500),
        curve: Curves.ease,
      );
    } else {
      _pageController.jumpToPage(0);
    }
  }

  void _scrollToPrevious() {
    if (_currentPage > 0) {
      _pageController.animateToPage(
        _currentPage - 1,
        duration: Duration(milliseconds: 500),
        curve: Curves.ease,
      );
    } else {
      _pageController.jumpToPage(items.length - 1);
    }
  }

  Widget _buildItem(String item) {
    return Center(
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 10.0),
        child: Text(item),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: GestureDetector(
          onHorizontalDragEnd: (details) {
            if (details.velocity.pixelsPerSecond.dx > 0) {
              _scrollToPrevious();
            } else if (details.velocity.pixelsPerSecond.dx < 0) {
              _scrollToNext();
            }
          },
          child: PageView.builder(
            controller: _pageController,
            itemCount: items.length,
            itemBuilder: (context, index) {
              return _buildItem(items[index]);
            },
          ),
        ),
      ),
    );
  }
}
0

1 Resposta 1

0

O construtor PageView.builder é infinito por padrão em Flutter, caso você não passe o parâmetro itemCount. Portanto, para obter o comportamento desejado, remova esse parâmetro do seu construtor:

child: PageView.builder(
            controller: _pageController,
            itemBuilder: (context, index) {
              return _buildItem(items[index % items.length]);
            },
          ),

Note que para manter a noção de qual página construir, usamos o operador de módulo (%), que traz o resto da divisão de um número pelo outro.

Ou seja, quando chegarmos na página de índice 4, se tivermos 3 itens, a divisão de 4 por 3 dá resto 1, o que equivaleria à página de índice 1. Mais sobre isso pode ser lido aqui no site mesmo, por exemplo aqui.

Os métodos _scrollToNext e _scrollToPrevious não precisam saber em que página estamos e para qual página pular. Eles podem simplesmente utilizar os métodos análogos do PageController. São eles o nextPage() e o previousPage():

void _scrollToNext() {
    _pageController.nextPage(
      duration: const Duration(milliseconds: 500),
      curve: Curves.ease,
    );
  }

  void _scrollToPrevious() {
    _pageController.previousPage(
      duration: const Duration(milliseconds: 500),
      curve: Curves.ease,
    );
  }

Por último, como não é mais utilizado, podemos remover todas as referências a variável _currentPage, que não é necessária. Também não precisamos do método _pageListener. O initState pode ser simplificado para:

@override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

Poderíamos mesmo fazer a atribuição da variável _pageController diretamente na declaração dela, sem usar o modificador late, e o initState não seria necessário neste caso.

Fazendo essas alterações você deve ter o comportamento desejado. Mais sobre o assunto pode ser lido nesta pergunta do StackOverflow (em inglês).

3
  • Funcionou perfeitamente, mas acabei achando uma solução mais bonita utilizando o pacote carousel_pro_nullsafety, que implementa um carousle perfeitamente com animações e tudo mais, mas sua solução ficou perfeita, muito obrigado! Commented 31/05/2023 às 18:33
  • @GuilhermeQueirozRibeiro Se a solução apresentada funcionou, acredito que deva aceitá-la para colaborar com o site. Você pode fazer isso clicando no símbolo de ✔️ ao lado da resposta. Fazer isso contribui com a categorização e eventuais buscas no site. Um abraço
    – Naslausky
    Commented 31/05/2023 às 20:48
  • 1
    muito obrigado! Não sabia que funcionava assim Commented 2/06/2023 às 17:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .