How to make simple carousel only use PageView flutter?

Question

How to make a simple carousel only using PageView flutter? because I need to know how to make a carousel using PageController.animeToPage on flutter, this is available documentation https://docs.flutter.dev/cookbook/animation/page-route-animation

Answer 1

import 'dart:async';

import 'package:flutter/material.dart';

class SignInPage extends StatefulWidget {
  static const routeName = "/sign-in";

  const SignInPage({Key? key}) : super(key: key);

  @override
  State<SignInPage> createState() => _SignInPageState();
}

class _SignInPageState extends State<SignInPage> {
  int _selectedPage = 0;
  late final _pageController = PageController(initialPage: _selectedPage);

  late final Timer? _timer;

  List<int> get _pageItem => [0, 1, 2, 3];

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(Duration(seconds: 3), (time) async {
      final nexPage = (_pageController.page?.toInt() ?? 0) + 1;
      await _pageController.animateToPage(
        nexPage,
        duration: Duration(seconds: 1),
        curve: Curves.easeOut,
      );
    });
  }

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

  void _pageChanged(int currentPage) {
    print("current page $currentPage");
    _selectedPage = currentPage % _pageItem.length;
    print("selected page $_selectedPage");
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Expanded(
              child: PageView.builder(
                controller: _pageController,
                onPageChanged: _pageChanged,
                itemBuilder: (context, index) {
                  return Center(
                    child: Text(_pageItem[_selectedPage].toString()),
                  );
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ...List.generate(
                  _pageItem.length,
                  (index) => Icon(
                    Icons.circle,
                    color: index == _selectedPage ? Colors.blue : Colors.white,
                  ),
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: ElevatedButton(
                child: Text(
                  "Button",
                ),
                onPressed: () async {
              
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

from this code you only use PageView, PageController, and Timer Periodic for make it carousel