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