Draggable (or click) labels changing the parameters in flutter

Question

The following illustration most probably will be able to tell my question in an easier way.

as seen in the image, when the user drags the text "CLASS 5" horizontally to the left, text will go to "CLASS 6" and if right, the text will be "CLASS 4".

Or if the user taps (or presses) the right and the left buttons, it will change the similarly.

When the text changed, the value of the text will be changed and the content in the page will be updated.

This feature is mostly used in calendar components. But since it's a bit complicated, I wished to know if I can make this simply.

Thank you for all support.

Answer 1

You can use GestureDetector, IconButton, and Text widgets to achieve the above functionality.

Basically, you have to maintain the currently active page/title state.

Here is a sample page bar for you.

    import 'package:flutter/material.dart';

class PageBar extends StatefulWidget {
  const PageBar({required this.onPageChanged, super.key});

  final void Function(int index) onPageChanged;

  static final titles = [
    'Class 1',
    'Class 2',
    'Class 3',
    'Class 4',
    'Class 5',
    'Class 6',
    'Class 7',
  ];

  @override
  State<PageBar> createState() => _PageBarState();
}

class _PageBarState extends State<PageBar> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        IconButton(
            onPressed: _navigateToPrevious,
            icon: const Icon(
              Icons.arrow_back_ios,
              color: Colors.red,
            )),
        const SizedBox(width: 16),
        Expanded(
          child: GestureDetector(
            onHorizontalDragUpdate: (details) {},
            onHorizontalDragEnd: (details) {
              if (details.primaryVelocity! > 0) {
                _navigateToPrevious();
              } else if (details.primaryVelocity! < 0) {
                _navigateToNext();
              }
            },
            child: Text(
              PageBar.titles[currentIndex],
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.red,
              ),
            ),
          ),
        ),
        const SizedBox(width: 16),
        IconButton(
          onPressed: _navigateToNext,
          icon: const Icon(
            Icons.arrow_forward_ios,
            color: Colors.red,
          ),
        ),
      ],
    );
  }

  void _navigateToPrevious() {
    setState(() {
      currentIndex--;
      if (currentIndex < 0) {
        currentIndex = 0;
      }
    });

    widget.onPageChanged(currentIndex);
  }

  void _navigateToNext() {
    setState(() {
      currentIndex++;
      if (currentIndex >= PageBar.titles.length) {
        currentIndex = 0;
      }
    });

    widget.onPageChanged(currentIndex);
  }
}

Usage:

 PageBar(
  onPageChanged: (index) {
   debugPrint("Page changed to: ${PageBar.titles[index]}");
  },
 )

Result: