flutter_unit_ruler 0.0.14

A Digital ruler for measuring various units like weight (kg, lbs) and length (ft, cm, meter, km), perfect for construction, fitness, and educational apps..

flutter_unit_ruler

flutter_unit_ruler is a versatile Flutter package providing a digital ruler for measuring various units like weight (kg, pounds) and length (feet, cm). Ideal for apps in fields such as construction, fitness, and education, it offers accurate, user-friendly measurement tools, enabling easy display and interaction with diverse measurement scales. (pub.dev).

Screenshots

Usage

To use this package :

• add the dependency to your pubspec.yaml file.

dependencies:
   flutter:
     sdk: flutter
   flutter_unit_ruler:

How to use

Ruler Example This example demonstrates how to create a customizable vertical ruler using the flutter_unit_ruler package. You can use this ruler to display measurements in units like inches, centimeters, or any custom unit you define.

Import Packages First, import the necessary packages:

import 'package:flutter/material.dart';
import 'package:flutter_unit_ruler/flutter_unit_ruler.dart';
import 'package:flutter_unit_ruler/unit.dart';
import 'package:flutter_unit_ruler/scale_controller.dart';
import 'package:flutter_unit_ruler/scale_line.dart';

Below is the full code to create a ruler with centimeter units that dynamically updates as you scroll.

class RulerExample extends StatefulWidget {
  const RulerExample({super.key});

  @override
  State<RulerExample> createState() => _RulerExampleState();
}

class _RulerExampleState extends State<RulerExample> {
  final darkThemeColor = const Color(0xFF0b1f28); // Background color for the ruler
  late final ScaleController _scaleController; // Controller to manage the current value

  double currentHeight = 180.0; // Initial height value

  @override
  void initState() {
    _scaleController = ScaleController(value: currentHeight); // Initialize the controller
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: darkThemeColor,
      appBar: AppBar(
        title: const Text('Unit Ruler Demo'),
      ),
      body: Center(
        child: Stack(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 100.0),
              child: UnitRuler(
                height: 300, // Height of the ruler
                width: MediaQuery.of(context).size.width, // Width of the ruler
                unitName: UnitType.length.centimeter, // Set unit to centimeters
                controller: _scaleController, // Use scale controller for dynamic updates
                scrollDirection: Axis.vertical, // Set ruler orientation to vertical
                backgroundColor: darkThemeColor, // Background color
                scaleAlignment: Alignment.topRight, // Align scale to the top-right
                scalePadding: const EdgeInsets.only(left: 0, right: 40, top: 10), // Padding for the scale
                scaleMargin: 120, // Margin for scale placement
                scaleMarker: Container(
                  height: 1.2,
                  width: 240,
                  color: const Color(0xFF3EB48C), // Color of scale marker
                ),
                scaleMarkerPositionTop: 10, // Top position of the scale marker
                scaleMarkerPositionLeft: 20, // Left position of the scale marker
                scaleIntervalText: (index, value) => value.toInt().toString(), // Format interval text
                scaleIntervalTextStyle: const TextStyle(
                  color: Color(0xFFBCC2CB),
                  fontSize: 14,
                ),
                scaleIntervalTextPosition: 80, // Text position on the scale
                scaleIntervalStyles: const [
                  ScaleIntervalStyle(color: Colors.yellow, width: 1, height: 35, scale: -1),
                  ScaleIntervalStyle(color: Colors.blue, width: 1.5, height: 50, scale: 0),
                  ScaleIntervalStyle(color: Colors.redAccent, width: 1, height: 40, scale: 5),
                ],
                onValueChanged: (value) => setState(() => currentHeight = value.toDouble()), // Update height value
              ),
            ),
            Positioned(
              bottom: 220,
              left: 110,
              child: Text(
                "${currentHeight.toInt()} Cm", // Display current height in centimeters
                style: const TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Key Features

Customizable Unit: You can specify a unit, such as UnitType.length.centimeter here, or define your own unit if needed. Dynamic Value Updates: The ScaleController allows the ruler to dynamically update and display the current height in real-time. Flexible Styling: Control background colors, alignment, padding, margin, scale marker styles, and interval text styles to create the ruler design that suits your app.

Usage

Use this example to implement a scrollable vertical or horizontal ruler in your app. Modify parameters like scrollDirection and unitName for additional configurations, and feel free to style the ruler's scale markers and interval text to match your app's theme.

Pull Requests

Pull requests are most welcome. It usually will take me within 24-48 hours to respond to any issue or request.

1. Please keep PR titles easy to read and descriptive of changes, this will make them easier to merge :)
2. Pull requests must be made against develop branch. Any other branch (unless specified by the maintainers) will get rejected.

Created & Maintained By

If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of ☕

• PayPal

License

Copyright (c) 2024 [Mohammad Saboor]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.