Flutter Quantity Widget: A Complete Guide for Developers

When building modern mobile apps, one common UI element is the quantity selector (or stepper) widget. Whether it’s an e-commerce app where users adjust product quantities, a food delivery app for adding items to the cart, or an inventory management system, this type of widget makes the user experience smoother.

In this article, we’ll explore what a quantity widget is, why it’s important, and how you can implement one in Flutter effectively.

What is a Flutter Quantity Widget?

A quantity widget is a small UI component that lets users increase or decrease numeric values with ease, usually with +and – buttons. In Flutter, this can be customized to fit the look and feel of your application.

For example:

• E-commerce apps → Change product quantity in cart.
• Booking apps → Select number of guests, seats, or tickets.
• Inventory apps → Adjust stock levels quickly.

Why Use a Quantity Widget in Flutter?

A dedicated  widget like this can improve:

✅ User Experience – Makes quantity adjustment quick and intuitive.
✅ Consistency – Provides a standardized way to modify numbers.
✅ Error Reduction – Prevents invalid inputs like negative numbers.
✅ Customization – Easy to style with Flutter’s UI capabilities.

How to Build a Simple Quantity Widget in Flutter

Here’s a quick example of a reusable Flutter Quantity Widget:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quantity Widget Demo',
      home: Scaffold(
        appBar: AppBar(title: Text('Quantity Selector')),
        body: Center(
          child: QuantityWidget(
            initialValue: 2,
            minValue: 1,
            maxValue: 10,
            onChanged: (value) {
              print("Selected Quantity: $value"); // callback for updates
            },
          ),
        ),
      ),
    );
  }
}

class QuantityWidget extends StatefulWidget {
  final int initialValue;
  final int minValue;
  final int maxValue;
  final Function(int) onChanged;

  const QuantityWidget({
    Key? key,
    this.initialValue = 1,
    this.minValue = 1,
    this.maxValue = 99,
    required this.onChanged,
  }) : super(key: key);

  @override
  _QuantityWidgetState createState() => _QuantityWidgetState();
}

class _QuantityWidgetState extends State<QuantityWidget> {
  late int _value;

  @override
  void initState() {
    super.initState();
    _value = widget.initialValue;
  }

  void _increment() {
    if (_value < widget.maxValue) {
      setState(() => _value++);
      widget.onChanged(_value);
    }
  }

  void _decrement() {
    if (_value > widget.minValue) {
      setState(() => _value--);
      widget.onChanged(_value);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(icon: Icon(Icons.remove), onPressed: _decrement),
        Text(
          '$_value',
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        IconButton(icon: Icon(Icons.add), onPressed: _increment),
      ],
    );
  }
}

The output should look something like this:

Usage Example

You can use the widget inside your Flutter app like this:

QuantityWidget(
  initialValue: 2,
  minValue: 1,
  maxValue: 10,
  onChanged: (value) {
    print("Selected quantity: $value");
  },
),

Best Practices for a Flutter Quantity Widget

1. Define min and max values – Avoid negative or unrealistic quantities.
2. Responsive design – Ensure it looks good across devices.
3. Accessibility – Use proper labels for screen readers.
4. Custom styling – Match your brand’s theme with custom icons, colors, and animations.

Conclusion

The Flutter Quantity Widget is a must-have for apps that require numeric input adjustments, especially in e-commerce, food delivery, and booking apps. With Flutter’s flexibility, you can build a custom, reusable, and scalable quantity widget that enhances user experience and functionality.

By implementing the example above, you’ll have a ready-to-use quantity selector that can be tailored to your project’s needs.

Find More Content on Deadloq, Happy Learning!!