SlidingTile

main.dart

import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      routes: {
        '/': (context) => const HomeScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: SlidingTile(
                    length: Colors.primaries.length,
                    builder: (context, index) => ColoredBox(
                      color: Colors.primaries[index],
                      child: Center(
                        child: Text(
                          index.toString(),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: SlidingTile(
                    length: Colors.accents.length,
                    builder: (context, index) => ColoredBox(
                      color: Colors.accents[index],
                      child: Center(
                        child: Text(
                          index.toString(),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: SlidingTile(
                    length: ThemeMode.values.length,
                    builder: (context, index) => Center(
                      child: Text(
                        ThemeMode.values[index].name,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: SlidingTile(
                    length: ThemeMode.values.length,
                    builder: (context, index) => Center(
                      child: Text(
                        ThemeMode.values[index].name,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: SlidingTile(
                    length: Colors.primaries.length,
                    builder: (context, index) => ColoredBox(
                      color: Colors.primaries[index],
                      child: Center(
                        child: Text(
                          index.toString(),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: SlidingTile(
                    length: Colors.accents.length,
                    builder: (context, index) => ColoredBox(
                      color: Colors.accents[index],
                      child: Center(
                        child: Text(
                          index.toString(),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: SlidingTile(
                    length: Colors.accents.length,
                    builder: (context, index) => ColoredBox(
                      color: Colors.accents[index],
                      child: Center(
                        child: Text(
                          index.toString(),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: SlidingTile(
                    length: ThemeMode.values.length,
                    builder: (context, index) => Center(
                      child: Text(
                        ThemeMode.values[index].name,
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: SlidingTile(
                    length: Colors.primaries.length,
                    builder: (context, index) => ColoredBox(
                      color: Colors.primaries[index],
                      child: Center(
                        child: Text(
                          index.toString(),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class SlidingTile extends StatefulWidget {
  const SlidingTile({
    super.key,
    required this.length,
    required this.builder,
  }) : assert(length > 0);

  final int length;
  final IndexedWidgetBuilder builder;

  @override
  State<SlidingTile> createState() => _SlidingTileState();
}

class _SlidingTileState extends State<SlidingTile>
    with SingleTickerProviderStateMixin {
  Timer? _timer;
  late final PageController _controller;

  void _startTimer() {
    _timer?.cancel();
    _timer = Timer.periodic(const Duration(seconds: 2), (timer) {
      if (!_controller.hasClients) return;
      if (widget.length < 1) return;

      final current = (_controller.page ?? 0).round();
      final int next;
      if (current < widget.length - 1) {
        next = current + 1;
      } else {
        next = 0;
      }

      _controller.animateToPage(
        next,
        duration: const Duration(milliseconds: 500),
        curve: Curves.easeInOutCubic,
      );
    });
  }

  void _stopTimer() {
    _timer?.cancel();
    _timer = null;
  }

  @override
  void initState() {
    super.initState();
    _controller = PageController(initialPage: 0);
    _startTimer();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    final enabled = _timer != null;
    final shouldEnable = TickerMode.of(context);
    if (enabled != shouldEnable) {
      if (shouldEnable) {
        _startTimer();
      } else {
        _stopTimer();
      }
    }
  }

  @override
  void dispose() {
    _stopTimer();
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      scrollDirection: Axis.vertical,
      controller: _controller,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: widget.length,
      itemBuilder: widget.builder,
    );
  }
}