segmented_circular_next_button 0.0.1

A Flutter widget that provides a circular next button with an animated segmented progress ring for onboarding flows

Segmented Circular Next Button

A self-contained Flutter widget that renders a circular next button surrounded by an animated segmented progress ring. Designed for onboarding flows.

Features

• Animated ring that fills segment-by-segment as the user advances through pages
• Smooth, curved animation between states driven internally — no external animation controller needed
• Fully themeable: colors, stroke width, gap size, button size, and icon are all configurable
• Falls back to ColorScheme.primary with zero configuration beyond the required fields
• Single-file, zero external dependencies beyond Flutter itself

Installation

Add the file segmented_circular_next_button.dart to your project and import it:

import 'segmented_circular_next_button.dart';

Usage

SegmentedCircularNextButton(
  currentPage: _currentPage,   // zero-based index
  totalPages: 4,
  onTap: () {
    setState(() => _currentPage++);
  },
)

The widget handles all animation internally. Simply update currentPage from your setState call and the ring will animate to the new position.

Parameters

Required

Parameter	Type	Description
currentPage	int	Zero-based index of the active page.
totalPages	int	Total number of pages; also determines the number of ring segments.
onTap	VoidCallback	Called when the button is tapped.

Ring appearance

Parameter	Type	Default	Description
ringColor	Color?	ColorScheme.primary	Filled segment color.
ringBackgroundColor	Color?	ringColor at 12 % opacity	Unfilled segment color.
ringStrokeWidth	double	3.0	Stroke width of the ring arc.
ringGapAngle	double	0.1	Gap between segments, in radians.

Button appearance

Parameter	Type	Default	Description
buttonSize	double	60.0	Outer bounding box size (ring + button).
innerButtonSize	double	50.0	Diameter of the tappable inner circle.
buttonColor	Color?	ColorScheme.primary	Inner circle fill color.
buttonShadowColor	Color?	buttonColor at 20 % opacity	Shadow color for the inner circle.
icon	IconData	Icons.arrow_forward	Icon displayed inside the button.
iconColor	Color	Colors.white	Icon color.
iconSize	double	24.0	Icon size.

Animation

Parameter	Type	Default	Description
animationDuration	Duration	400 ms	Duration of the fill animation.
animationCurve	Curve	Curves.easeInOut	Easing curve for the animation.

Example

See the included example/ directory for a full onboarding screen demo.

Requirements

• Flutter ≥ 3.0
• Dart ≥ 3.0