https://github.com/nicosnicolaou16/dynamic_single_text_field
This package is a dynamic single text field (it is like PIN/OTP code view but has not PIN/OTP functionalities) with top/bottom text label, and different customizations.
https://github.com/nicosnicolaou16/dynamic_single_text_field
dart dart-library dart-package dynamic-single-text flutter flutter-library library package text-field
Last synced: 11 months ago
JSON representation
This package is a dynamic single text field (it is like PIN/OTP code view but has not PIN/OTP functionalities) with top/bottom text label, and different customizations.
- Host: GitHub
- URL: https://github.com/nicosnicolaou16/dynamic_single_text_field
- Owner: NicosNicolaou16
- License: apache-2.0
- Created: 2023-07-08T20:27:37.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-06-08T21:54:56.000Z (about 1 year ago)
- Last Synced: 2025-06-08T22:21:31.002Z (about 1 year ago)
- Topics: dart, dart-library, dart-package, dynamic-single-text, flutter, flutter-library, library, package, text-field
- Language: Dart
- Homepage: https://pub.dev/packages/dynamic_single_text_field
- Size: 4.2 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Features
This package is a dynamic single text field allows for the dynamic creation of multiple text fields
based on the developer's needs (similar to OTP/passcode inputs, but without the OTP/passcode
functionality—only the UI is provided).
You can create a list of `SingleTextModel` instances, each representing a single text field. Each
`SingleTextModel` can be customized with values such as preset characters,
and additional text displayed under the field. Each `SingleTextModel` accepts a single input
character.
## Getting started
Version Minimum Flutter SDK: 3.0.0
Tested Versioning:
Flutter SDK version: 3.32.2
Dart Version: 3.8.1
## Usage
| Parameters | Description |
|----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `singleTextModelList` | This parameter is the list of model for single text. Important Note: Use this model to insert data into dynamic single text: `SingleTextModel({this.singleText = "", this.topLabelText, this.bottomLabelText});` |
| `scrollPhysics` | This parameter is the option to set scroll physics for the ListView |
| `scrollController` | This parameter is the option to set the scroll controller for the ListView |
| `singleDynamicListHeight` | This parameter is the option to set the height of the dynamic ListView, with default value 150 |
| `singleTextHeight` | This parameter is the option to set the height for the single texts, with default value 70 |
| `singleTextWidth` | This parameter is the option to set the width for the single texts, with default value 70 |
| `textFieldTextStyle` | This parameter is the option to set the single texts style |
| `singleHintText` | This parameter is the option to set the hint for the single texts |
| `singleHintTextStyle` | This parameter is the option to set the hint for single text style |
| `inputBorder` | This parameter is the option to set the input border for single texts |
| `enableInputBorder` | This parameter is the option to set the enable border for single texts |
| `disableInputBorder` | This parameter is the option to set the disable border for single texts |
| `focusedInputBorder` | This parameter is the option to set the focused border for single texts |
| `textInputType` | This parameter is the option to set the input type for single texts, with default value text |
| `cursorColor` | This parameter is the option to set the cursor color for single texts, with default value black |
| `isReadOnly` | This parameter is the option to set if the single texts is read only, with default value false |
| `isObscureText` | This parameter is the option to set if the single texts is obscure, with default value false |
| `obscuringCharacter` | This parameter is the option to set the obscuring character for single texts, with default value • |
| `singleTextFillColor` | This parameter is the option to set the fill color for single texts |
| `onChangeSingleText` | This parameter is the call back to get the character during the typing (real time) and the index of the single text |
| `onSubmitSingleText` | This parameter is the call back to get the character when press the done/return button from the keyboard |
| `onValidationBaseOnLength` | This parameter is the call back to validate the characters based on the length |
| `showLabelsType` | This parameter is the enum class to set if need label on top or bottom or both, `showBottomLabelType`, `showBothLabelsType`, `hideLabelsType` default value: `hideLabelsType` |
| `textStyleTopLabel` | This parameter is the top label text style |
| `textStyleBottomLabel` | This parameter is the bottom label text style |
| `widgetLeftMargin` | This parameter is the single texts left margin, with default value 20 |
| `topLabelMarginBottom` | This parameter is the top label text margin bottom, with default value 0 |
| `bottomLabelMarginTop` | This parameter is the bottom label text margin top, with default value 0 |
```dart
import 'package:dynamic_single_text_field/dynamic_single_text_field.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Sample Project',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
});
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
final List singleTextModelList1 = [];
final List singleTextModelList2 = [];
final List singleTextModelList3 = [];
@override
void initState() {
/**
* initializing three list with the SingleTextModel
* */
List.generate(
7,
(index) =>
singleTextModelList1.add(SingleTextModel(
singleText: "",
)));
List.generate(
7,
(index) =>
singleTextModelList2.add(SingleTextModel(
singleText: "",
topLabelText: "top label $index",
bottomLabelText: "bottom label $index")));
List.generate(
7,
(index) =>
singleTextModelList3.add(SingleTextModel(
singleText: "",
topLabelText: "top label $index",
bottomLabelText: "bottom label $index")));
super.initState();
}
InputBorder getInputBorder() =>
const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.green,
width: 3,
),
borderRadius: BorderRadius.all(
Radius.circular(
70,
),
),
);
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: SingleChildScrollView(
child: Column(
children: [
const SizedBox(
height: 100,
),
DynamicSingleTextField(
singleTextModelList: singleTextModelList1,
showLabelsType: ShowLabelsTypeEnum.hideLabelsType,
inputBorder: getInputBorder(),
singleDynamicListHeight: 70,
topLabelMarginBottom: 20,
bottomLabelMarginTop: 20,
enableInputBorder: getInputBorder(),
disableInputBorder: getInputBorder(),
focusedInputBorder: getInputBorder(),
textInputType: TextInputType.number,
onChangeSingleText: (String value, int index) {
if (kDebugMode) {
print("value: $value index: $index");
}
},
onValidationBaseOnLength: () {
if (kDebugMode) {
print("validated");
}
},
),
const SizedBox(
height: 100,
),
DynamicSingleTextField(
singleTextModelList: singleTextModelList2,
showLabelsType: ShowLabelsTypeEnum.showBothLabelsType,
inputBorder: getInputBorder(),
topLabelMarginBottom: 20,
bottomLabelMarginTop: 20,
enableInputBorder: getInputBorder(),
disableInputBorder: getInputBorder(),
focusedInputBorder: getInputBorder(),
textInputType: TextInputType.number,
onChangeSingleText: (String value, int index) {
if (kDebugMode) {
print("value: $value index: $index");
}
},
onValidationBaseOnLength: () {
if (kDebugMode) {
print("validated");
}
},
),
const SizedBox(
height: 100,
),
DynamicSingleTextField(
singleTextModelList: singleTextModelList3,
showLabelsType: ShowLabelsTypeEnum.showBothLabelsType,
inputBorder: getInputBorder(),
topLabelMarginBottom: 20,
bottomLabelMarginTop: 20,
textInputType: TextInputType.text,
onChangeSingleText: (String value, int index) {
if (kDebugMode) {
print("value: $value index: $index");
}
},
onSubmitSingleText: (String value) {
if (kDebugMode) {
print("value: $value");
}
},
onValidationBaseOnLength: () {
if (kDebugMode) {
print("validated");
}
},
),
],
),
),
);
}
}
```
## Additional information
Thank you for using my package, any feedback is welcome. You can report any bug, ask a question on
package GitHub repository.
https://github.com/NicosNicolaou16/dynamic_single_text_field/issues