Flutter Segmented Control and Quantity Selector — Free Components

Two of the most common selection UI patterns in Flutter apps — and two that developers rebuild from scratch more often than they should. FlutterKit's Segmented Control and Quantity Selector give you clean, production-ready versions with full Dart code.

Flutter Segmented Control

A horizontal group of buttons where exactly one is selected at a time. Think of it as a radio group with a button-bar appearance — clean, compact, and immediately clear to the user.

When to use:

• View switching — "List | Grid | Map"
• Time period selection — "Day | Week | Month | Year"
• Category filter — "All | Active | Completed"
• Size selection — "S | M | L | XL"
• Chart type — "Line | Bar | Pie"

Features in the FlutterKit version:

• Any number of segments (2-5 practical limit)
• Icon-only, text-only, or icon + text segments
• Smooth animated selection transition
• Disabled state support
• Custom active/inactive colours

👉 Flutter Segmented Control

Flutter Quantity Selector

A plus/minus stepper for selecting an integer value within a defined range. Cleaner than a text input for quantities, more controlled than a slider.

When to use:

• Cart quantity in e-commerce
• Number of tickets or seats in booking
• Number of guests or rooms
• Serving size in recipe apps
• Retry count or limit settings

Features in the FlutterKit version:

• Configurable min and max values
• Disabled state for plus/minus at limits
• Custom increment step (default 1)
• Compact and standard size variants
• Count display between the buttons

👉 Flutter Quantity Selector

How to Use Either Component

1. Visit the component page (Segmented Control or Quantity Selector)
2. Preview all variants in the live browser preview
3. Copy the Dart code
4. Paste directly into your Flutter project

No external packages required — Flutter SDK only.

Segmented Control vs Bottom Nav Bar

A common source of confusion — both are multi-option selectors but they serve different purposes:

Segmented Control — switches between views or filters within a single screen. The content below it changes but the navigation context stays the same.

Bottom Nav Bar — switches between primary sections of the app. Completely different screens, different stacks.

Use a segmented control for in-screen view switching. Use the Bottom Nav Bar for app-level navigation.

Related FlutterKit Selection Components

• Slider — continuous value selection
• Range Slider — min/max range selection
• Choice Chips — chip-form single selection
• Filter Chips — chip-form multi-selection
• Star Rating — interactive rating input

All free at rohansurve.in/flutterkit.

Production Components, Zero Setup

The Segmented Control and Quantity Selector are the kind of components you build once, use everywhere. FlutterKit gives you the built version — copy, paste, ship.