How to design scale line like design in flutter

Question

I want to design below like scale line scrolling design in flutter as pageview. it is used for select product quantity. is there any way to achieve this .

This is my figma design

I want to design below like scale line scrolling design in flutter as pageview. it is used for select product quantity. is there any way to achieve this. Thanks for advance

Answer 1

You can use the ruler_scale_picker package.

import 'package:flutter/material.dart';

import 'package:ruler_scale_picker/ruler_scale_picker.dart';

void main() async {
  runApp(DefaultPage());
}

class DefaultPage extends StatelessWidget {
  const DefaultPage({super.key, this.title});

  final String? title;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(title ?? 'Default'),
          scrolledUnderElevation: 0,
        ),
        body: const SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Expanded(child: NumericRulerScalePicker()),
              Expanded(
                child: NumericRulerScalePicker(
                  options: RulerScalePickerOptions(orientation: Axis.vertical),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}