Hint text of FleatherField not vertically aligned in center

[kevin-hintz]

The hint text of the FleatherField is not aligned vertically in center. When tipping something in the field there is a visible shift between the hint text and the normal text.

[amantoux]

@kevin-hintz can you please provide an example?

[kevin-hintz]

thanks for your fast reply. Of course, this is just a basic example:

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

class EditorPage extends StatefulWidget {
  const EditorPage({super.key});

  @override
  EditorPageState createState() => EditorPageState();
}

class EditorPageState extends State<EditorPage> {
  late FleatherController _controller;
  late FocusNode _focusNode;

  @override
  void initState() {
    super.initState();

    final document = _loadDocument();
    _controller = FleatherController(document: document);
    _focusNode = FocusNode();
  }

  @override
  Widget build(BuildContext context) {
    TextBlockTheme defaultTheme = TextBlockTheme(
      style: Theme.of(context).textTheme.bodyMedium!,
      spacing: VerticalSpacing(top: 0, bottom: 0),
      decoration: BoxDecoration(),
    );

    FleatherThemeData fleatherTheme = FleatherThemeData(
      bold: TextStyle(fontWeight: FontWeight.bold),
      italic: TextStyle(fontStyle: FontStyle.italic),
      underline: TextStyle(decoration: TextDecoration.underline),
      strikethrough: TextStyle(decoration: TextDecoration.lineThrough),
      link: TextStyle(color: Colors.black),
      paragraph: TextBlockTheme(
        style: Theme.of(context).textTheme.bodyMedium!,
        spacing: VerticalSpacing(top: 0, bottom: 0),
        decoration: BoxDecoration(),
      ),
      heading1: defaultTheme,
      heading2: defaultTheme,
      heading3: defaultTheme,
      heading4: defaultTheme,
      heading6: defaultTheme,

      heading5: defaultTheme,
      lists: defaultTheme,
      quote: defaultTheme,
      code: defaultTheme,
      inlineCode: InlineCodeThemeData(
        style: TextStyle(),
        backgroundColor: Colors.grey.shade200,
      ),
      horizontalRule: HorizontalRuleThemeData(
        height: 2,
        thickness: 1,
        color: Colors.grey,
      ),
    );

    return Scaffold(
      backgroundColor: Colors.white,
      body: Theme(
        data: ThemeData(
          textSelectionTheme: TextSelectionThemeData(
            selectionColor: Colors.grey.shade200,
            selectionHandleColor: Colors.grey.shade800,
            cursorColor: Colors.grey.shade800,
          ),
        ),
        child: Center(
          child: Container(
            height: 500,
            width: 500,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.grey.shade300),
              borderRadius: BorderRadius.circular(8),
              color: Colors.grey.shade50,
            ),
            child: FleatherTheme(
              data: fleatherTheme,
              child: Column(
                children: [
                  FleatherToolbar.basic(controller: _controller),
                  Expanded(
                    child: FleatherField(
                      controller: _controller,
                      focusNode: _focusNode,
                      minHeight: 200,
                      maxHeight: 300,

                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Add content',

                        fillColor: Colors.grey.shade200,

                        hintStyle:
                            Theme.of(context).textTheme.bodyMedium!.copyWith(),

                        contentPadding: EdgeInsets.all(20),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  /// Loads the document to be edited in Fleather.
  ParchmentDocument _loadDocument() {
    // For simplicity we hardcode a simple document with one line of text
    // saying "Fleather Quick Start".
    // (Note that delta must always end with newline.)
    final Delta delta = Delta()..insert('Fleather Quick Start\n');
    return ParchmentDocument.fromDelta(delta);
  }
}

The hint text "Add content" is not aligned correctly and there is a shift when the real text appears.

[amantoux]

Can you please provide:

• Flutter version
• Fleather version
• platform

I cannot repro on lastest version of Flutter & Fleather & macOS

A video capture would be much appreciated

[kevin-hintz]

I have had Fleather v1.22. I upgraded the Flutter SDK to newest and also Fleather to the newest version. The issue does not appear anymore in the newer version.

Sorry for taking your time and thanks for the fast reply!