Skip to content

[BUG] - Task checkboxes are not aligned with text #2850

@Hannnes1

Description

@Hannnes1

Package Version
super_editor 0.3.0-dev.40

User Info
Solid Red AB

To Reproduce
Steps to reproduce the behavior:

  1. Create a document with a TaskNode
  2. See misalignment

Minimal Reproduction Code

Minimal, Runnable Code Sample
import 'package:flutter/material.dart';
import 'package:super_editor/super_editor.dart';

void main() {
runApp(const MainApp());
}

class MainApp extends StatelessWidget {
const MainApp({super.key});

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: _HomePage(),
  );
}
}

class _HomePage extends StatefulWidget {
const _HomePage();

@override
State<_HomePage> createState() => __HomePageState();
}

class __HomePageState extends State<_HomePage> {
late final MutableDocument _document;
late final MutableDocumentComposer _composer;
late final Editor _editor;

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

  _document = MutableDocument(
    nodes: [
      TaskNode(
        id: Editor.createNodeId(),
        text: AttributedText('Example task'),
        isComplete: false,
      ),
    ],
  );

  _composer = MutableDocumentComposer();

  _editor = createDefaultDocumentEditor(document: _document, composer: _composer);
}

@override
Widget build(context) {
  return Scaffold(
    appBar: AppBar(),
    body: SuperEditor(
      editor: _editor,
      componentBuilders: [
        ...defaultComponentBuilders,
        TaskComponentBuilder(_editor),
      ],
    ),
  );
}
}

Actual behavior
Text is above the checkbox

Expected behavior
The text should be centered vertically to the checkbox

Platform
iOS, Android, web. Most obvious on iOS and Android

Flutter version
3.38.1

Screenshots

From Android:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    type_bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions