flutter TextField with auto textDirection

Question

I want to use TextField in the Flutter to enter two languages (one of them is RTL and the other is LTR) so that one language is entered in each line. How can this be done so that the textDirection display that line correctly in TextField? This is done properly in WhatsApp and messaging applications. How can I do this in the flutter?

Answer 1

you can use any text editor plugin e.g: flutter_quill, html_editor_enhanced, fleather, .. . I used fleather and I think it's the best Flutter text editor you can use the editor area only without the editor bar, and this is the samble code to use it:

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

class FlexibleDir extends StatefulWidget {
  const FlexibleDir({super.key});
  @override
  State<FlexibleDir> createState() => _FlexibleDirState();
}

class _FlexibleDirState extends State<FlexibleDir> {
  FleatherController? _controller;

  @override
  void initState() {
    super.initState();
    if (mounted) {
      _controller = FleatherController();
    }
  }

  @override
  void dispose() {
    if (!mounted) _controller?.dispose();
    super.dispose();
  }

  String get text => _controller!.plainTextEditingValue.text;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              'Multi direction field',
              style: Theme.of(context).textTheme.labelLarge,
            ),
            Container(
              height: 80,
              width: 200,
              decoration: BoxDecoration(
                  color: Colors.yellow[300],
                  borderRadius: BorderRadius.circular(8)),
              child: FleatherEditor(
                controller: _controller!,
              ),
            ),
          ],
        ),
      ),
    );
  }
}