flutter-quill icon indicating copy to clipboard operation
flutter-quill copied to clipboard

`QuillEditor` does not rebuild when scrolling

Open putnokiabel opened this issue 8 months ago • 12 comments

Is there an existing issue for this?

Flutter Quill version

9.3.21

Steps to reproduce

  1. Create a new app with flutter create quill_test
  2. Replace main.dart with the code sample
  3. Run the app
  4. Note that QuillEditor is scrollable
  5. Switch to tab 2 by tapping on "2" in the top right corner
  6. Note that QuillEditor is no longer scrollable

Additionally, note that if in tab 2 you make a scrolling motion (even though the widget does not scroll yet), and then tap on QuillEditor, it is now scrolled. This indicates that the QuillEditor widget does properly receive the scroll gesture, but the widget does not rebuild (and show the scrolled state) until you tap on it. If you then go back to tab 1, the same issue occurs. See video demonstration below.

Expected results

QuillEditor is scrollable regardless of the tab, and regardless of whether you tap on the widget or not.

Actual results

When QuillEditor is within a TabBarView, it is no longer scrollable after switching tabs. See video demonstration below.

Code sample

Code sample
import 'package:flutter/material.dart';

import 'package:flutter_quill/flutter_quill.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Quill scroll bug',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: DefaultTabController(
        length: 2,
        child: Column(
          children: [
            TabBar(
              tabs: [
                Tab(text: '1'),
                Tab(text: '2'),
              ],
            ),
            Expanded(
              child: TabBarView(
                children: [
                  QuillTest(),
                  QuillTest(),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  State<QuillTest> createState() => _QuillTestState();
}

class _QuillTestState extends State<QuillTest> {
  final QuillController controller = QuillController(
    document: Document()
      ..insert(
        0,
        [for (var i = 0; i < 100; i++) i.toString()].join('\n'),
      ),
    selection: const TextSelection.collapsed(offset: 0),
    readOnly: true,
  );

  @override
  Widget build(BuildContext context) {
    return QuillEditor.basic(
      configurations: QuillEditorConfigurations(
        controller: controller,
        scrollable: true,
        autoFocus: true,
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration https://github.com/singerdmx/flutter-quill/assets/29568469/d1328ee4-f8bf-469b-9543-77a0226f313f

Logs

Logs

No logs.

putnokiabel avatar Jun 10 '24 10:06 putnokiabel