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

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