plate_number

Description:

plate number

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.




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
copied to clipboard
Then run the following command to install the package:
flutter pub get
copied to clipboard
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,
),
],
);
}
}
copied to clipboard
Important Note #
To use the CarPlateNumber widget, make sure to import the relevant index file:
import 'package:plate_number/car_plate/index.dart';
copied to clipboard
And for the BicyclePlateNumber widget:
import 'package:plate_number/bicycle_plate/index.dart';
copied to clipboard
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.