plate_number 0.0.1 copy "plate_number: ^0.0.1" to clipboard
plate_number: ^0.0.1 copied to clipboard

A Flutter package for capturing and displaying vehicle plate numbers.

Plate Number Input Package #

A Flutter package that provides a customizable widget for collecting vehicle or motorcycle license plate numbers from users.

Examples #

Default usage example
Default usage example.
Real project implementation
Real project implementation.

Features #

  • Dynamic Spacing: Adjust spacing between widgets using the spacingScale parameter.
  • Custom Widgets: Option to add custom widgets for letters and removal actions.
  • Flexible Styling: Customize text styles for numbers and letters, as well as border radius.
  • Interactive Letter Selection: Callback for handling letter selection.
  • Input Validation: Prevents the entry of invalid characters such as ".", "-", and " " in numeric text fields.

Installation #

To use this package, add it to your pubspec.yaml file:

dependencies:
  plate_number: ^0.0.1

Then run the following command to install the package:

flutter pub get

Usage #

To get started with the package, you need to create a PlateCardBloc that manages the state of the selected plate type. This bloc should be defined in your widget tree using BlocProvider. Below is an example of how to implement this in your Flutter application:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:plate_number/bicycle_plate/index.dart';
import 'package:plate_number/car_plate/index.dart';
import 'package:plate_number/widgets/show_plate.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late PlateCardBloc bloc;
  late PlateType selectedType;

  @override
  void initState() {
    bloc = PlateCardBloc(PlateType.irCar);
    selectedType = bloc.plateType;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plate Number Input Example'),
        ),
        body: BlocProvider(
          create: (BuildContext context) {
            return bloc;
          },
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              BlocBuilder<PlateCardBloc, PlateCardState>(
                builder: (BuildContext context, PlateCardState state) {
                  switch (state.plateType) {
                    case PlateType.irCar:
                      return const CarPlateNumber(
                        activeColor: Colors.pinkAccent,
                        inactiveColor: Colors.blueGrey,
                        backgroundColor: Colors.white,
                        spacingScale: 6,
                      );
                    case PlateType.irBicycle:
                      return const BicyclePlateNumber(
                        activeColor: Colors.blueAccent,
                        inactiveColor: Colors.blueGrey,
                        backgroundColor: Colors.white,
                        spacingScale: 6,
                      );
                  }
                },
              ),
              const ShowPlate(),
              PlateTypeSelector(
                onValueChanged: (PlateType type) {
                  setState(() {
                    selectedType = type;
                  });
                  bloc.add(TypeIsChanged(type));
                },
                selectedType: selectedType,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class PlateTypeSelector extends StatelessWidget {
  const PlateTypeSelector({super.key, required this.onValueChanged, required this.selectedType});

  final ValueChanged<PlateType> onValueChanged;
  final PlateType selectedType;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        CupertinoSegmentedControl<PlateType>(
          padding: const EdgeInsets.symmetric(vertical: 10),
          selectedColor: Colors.blueAccent,
          unselectedColor: Colors.white,
          children: {
            for (var type in PlateType.values)
              type: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 5),
                child: Text(
                  type.parseToString(),
                  style: const TextStyle(fontSize: 15),
                ),
              )
          },
          onValueChanged: onValueChanged,
          groupValue: selectedType,
        ),
      ],
    );
  }
}

Important Note #

To use the CarPlateNumber widget, make sure to import the relevant index file:

import 'package:plate_number/car_plate/index.dart';

And for the BicyclePlateNumber widget:

import 'package:plate_number/bicycle_plate/index.dart';

Remember to create the PlateCardBloc beforehand and define the BlocProvider in the widget tree.

Contributing #

Contributions are welcome! If you have suggestions or improvements, feel free to open an issue or submit a pull request.

0
likes
110
points
23
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter package for capturing and displaying vehicle plate numbers.

Repository (GitHub)

Documentation

API reference

License

unknown (license)

Dependencies

bloc, bloc_concurrency, flutter, flutter_bloc

More

Packages that depend on plate_number