multiline_prefix_text_field

A Flutter widget that provides a multiline text input field with automatically numbered prefixes (1., 2., 3., etc.). Perfect for creating numbered lists, todo items, or any scenario where you need a structured, line-numbered text input.

Features

• ✅ Automatic line numbering - Each line is automatically prefixed with a number (1., 2., 3., ...)
• ✅ Dynamic line management - Press Enter to create new lines, backspace at line start to merge with previous line
• ✅ Multiline support - Each line can expand to multiple lines as needed
• ✅ Read-only mode - Option to display content in read-only mode
• ✅ Real-time updates - Callback function provides real-time updates of the content list
• ✅ Keyboard-friendly - Smooth keyboard handling with proper focus management
• ✅ Cross-platform - Works seamlessly on both iOS and Android

Getting started

Prerequisites

• Flutter SDK (>=1.17.0)
• Dart SDK (^3.9.2)

Installation

Add multiline_prefix_text_field to your pubspec.yaml file:

dependencies:
  multiline_prefix_text_field: ^0.0.1

Then run:

flutter pub get

Usage

Basic Example

import 'package:flutter/material.dart';
import 'package:multiline_prefix_text_field/multiline_prefix_text_field.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> _items = [
    'First item',
    'Second item',
    'Third item',
  ];

  @override
  Widget build(BuildContext context) {
    return MultilinePrefixTextField(
      descriptionList: _items,
      onFinishEditing: (items) {
        setState(() {
          _items = items;
        });
      },
      isReadOnly: false,
    );
  }
}

Read-only Mode

MultilinePrefixTextField(
  descriptionList: _items,
  onFinishEditing: (items) {
    // This will still be called, but user cannot edit
    setState(() => _items = items);
  },
  isReadOnly: true,
)

Complete Example

For a complete working example, see the example directory.

API Reference

MultilinePrefixTextField

A widget that displays a multiline text field with numbered prefixes.

Properties

Property	Type	Required	Description
descriptionList	List<String>	Yes	Initial list of strings to display, one per line
onFinishEditing	OnTextReturn	Yes	Callback function called when text changes. Receives the current list of strings
isReadOnly	bool	Yes	Whether the text field should be read-only

Callback Type

typedef OnTextReturn = void Function(List<String> newContentList);

How It Works

• Creating new lines: Press Enter while typing to create a new numbered line
• Merging lines: Press Backspace at the beginning of a line to merge it with the previous line
• Line numbers: Line numbers automatically update when lines are added or removed
• Empty lines: Empty lines (containing only whitespace) are automatically removed when backspacing

Platform Considerations

The widget uses a zero-width space character internally to detect backspace events on iOS, where key events are not directly available. This ensures consistent behavior across both iOS and Android platforms.

Future Goals

The following features are planned for future releases:

• 📷 Image support from gallery - Add ability to insert images from device gallery
• 📸 Camera integration - Take photos directly from camera and insert into text fields
• 🎤 Speech-to-text - Record audio using microphone and convert speech to text automatically

These features will enhance the widget's capabilities for rich content creation and accessibility.

Additional information

License

See the LICENSE file for details.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you encounter any issues or have feature requests, please file them on the issue tracker.

Example App

Run the example app to see the widget in action:

cd example
flutter run