flutter-quill
flutter-quill copied to clipboard
singerdmx
Custom toolbar bug
Have you checked for an existing issue?
- [x] I have searched the existing issues
Flutter Quill Version
11.1.0
Steps to Reproduce
Create a custom toolbar like this :
Column(
children: [
Row(
children: [
QuillToolbarToggleStyleButton(
controller: controller,
attribute: Attribute.list,
baseOptions: QuillToolbarBaseButtonOptions(),
options: QuillToolbarToggleStyleButtonOptions(
childBuilder: (_, __){
return Container(
height: 50,
width: 50,
color: Colors.red,
);
}
),
)
],
),
Expanded(
child: QuillEditor(
focusNode: focusNode,
scrollController: ScrollController(),
controller: controller
)
)
],
)
Expected results
A button in form of red quadrate.
Actual results
Exception:
The following _TypeError was thrown building QuillToolbarToggleStyleButton(dirty, state: QuillToolbarToggleStyleButtonState#1b19f):
TypeError: Instance of '(QuillToolbarToggleStyleButtonOptions, QuillToolbarToggleStyleButtonExtraOptions) => Container': type '(QuillToolbarToggleStyleButtonOptions, QuillToolbarToggleStyleButtonExtraOptions) => Container' is not a subtype of type '((dynamic, dynamic) => Widget)?'
Additional Context
Screenshots / Video demonstration
[Attach media here]
Logs
[Paste logs here]
Could you send me the full stack trace? It would be very helpful to know exactly where the error is.
To answer your question, no, we didn't change the implementation of childBuilder at any point. It should always accept any widget you return. In itself, it's strange that it's already throwing this error.
======== Exception caught by widgets library =======================================================
The following _TypeError was thrown building QuillToolbarToggleStyleButton(dirty, state: QuillToolbarToggleStyleButtonState#db6d6):
TypeError: Instance of '(QuillToolbarToggleStyleButtonOptions, QuillToolbarToggleStyleButtonExtraOptions)
=> Container': type
'(QuillToolbarToggleStyleButtonOptions, QuillToolbarToggleStyleButtonExtraOptions)
=> Container' is not a subtype of type '((dynamic, dynamic) => Widget)?'
The relevant error-causing widget was:
QuillToolbarToggleStyleButton =>
QuillToolbarToggleStyleButton:file:///Users/iosiffuterman/IdeaProjects/quill_test/lib/main.dart:78:15
When the exception was thrown, this was the stack:
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 288:3 throw_
dart-sdk/lib/_internal/js_dev_runtime/private/profile.dart 110:39 _failedAsCheck
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1395:3 _generalNullableAsCheckImplementation
dart-sdk/lib/_internal/js_shared/lib/rti.dart 1278:30 _installSpecializedAsCheck
packages/flutter_quill/src/toolbar/base_button/base_button_options_resolver.dart 36:7 get childBuilder
packages/flutter_quill/src/toolbar/base_button/base_value_button.dart 56:24 get childBuilder
packages/flutter_quill/src/toolbar/buttons/toggle_style_button.dart 109:31 build
packages/flutter/src/widgets/framework.dart 5743:27 build
packages/flutter/src/widgets/framework.dart 5631:15 performRebuild
packages/flutter/src/widgets/framework.dart 5794:11 performRebuild
packages/flutter/src/widgets/framework.dart 5347:7 rebuild
packages/flutter/src/widgets/framework.dart 5613:5 [_firstBuild]
packages/flutter/src/widgets/framework.dart 5785:11 [_firstBuild]
packages/flutter/src/widgets/framework.dart 5607:5 mount
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});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
localizationsDelegates: FlutterQuillLocalizations.localizationsDelegates,
theme: ThemeData(
// This is the theme of your application.
//
// TRY THIS: Try running your application with "flutter run". You'll see
// the application has a purple toolbar. Then, without quitting the app,
// try changing the seedColor in the colorScheme below to Colors.green
// and then invoke "hot reload" (save your changes or press the "hot
// reload" button in a Flutter-supported IDE, or press "r" if you used
// the command line to start the app).
//
// Notice that the counter didn't reset back to zero; the application
// state is not lost during the reload. To reset the state, use hot
// restart instead.
//
// This works for code too, not just values: Most code changes can be
// tested with just a hot reload.
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final controller = QuillController(
document: Document(),
selection: TextSelection.collapsed(offset: 0)
);
final focusNode = FocusNode();
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
body: Column(
children: [
Row(
children: [
QuillToolbarToggleStyleButton(
controller: controller,
attribute: Attribute.list,
baseOptions: QuillToolbarBaseButtonOptions(),
options: QuillToolbarToggleStyleButtonOptions(
childBuilder: (_, __){
return Container(
height: 50,
width: 50,
color: Colors.yellow,
);
}
),
)
],
),
Expanded(
child: QuillEditor(
focusNode: focusNode,
scrollController: ScrollController(),
controller: controller
)
)
],
)
);
}
}
Thanks so much for the full bug report. As soon as I finish the PRs I currently have open, I'll focus on figuring out why this is suddenly failing.
I have this same bug myself. Worked around it by casting the function (in this case, childBuilder function for QuillToolbarSelectHeaderStyleButtonsOptions)
....
childBuilder:
((options, extraOptions) => IconButton(onPressed: () {}, icon: const Icon(Icons.text_fields)))
as QuillToolbarButtonOptionsChildBuilder<
QuillToolbarSelectHeaderStyleButtonsOptions,
QuillToolbarSelectHeaderStyleButtonsExtraOptions
>,
...
This is still an issue in flutter_quill 11.4.1, the workaround of @minoesteban doesn't work for me.
I have created a Wrapper function that avoids this issues.
Widget Function(dynamic options, dynamic extraOptions)? quillToggleWrapper(
Widget Function(
QuillToolbarToggleStyleButtonOptions options,
QuillToolbarToggleStyleButtonExtraOptions extraOptions,
)
builder,
) {
return (options, extraOptions) {
return builder(
options as QuillToolbarToggleStyleButtonOptions,
extraOptions as QuillToolbarToggleStyleButtonExtraOptions,
);
};
}
Widget Function(dynamic options, dynamic extraOptions)? quillLinkWrapper(
Widget Function(
QuillToolbarLinkStyleButtonOptions options,
QuillToolbarLinkStyleButtonExtraOptions extraOptions,
)
builder,
) {
return (options, extraOptions) {
return builder(
options as QuillToolbarLinkStyleButtonOptions,
extraOptions as QuillToolbarLinkStyleButtonExtraOptions,
);
};
}
QuillToolbarToggleStyleButton(
controller: controller,
attribute: attribute,
options: QuillToolbarToggleStyleButtonOptions(
childBuilder: quillToggleWrapper((options, extraOptions) {
return ...
}),
),
),
QuillToolbarLinkStyleButton(
controller: controller,
options: QuillToolbarLinkStyleButtonOptions(
childBuilder: quillLinkWrapper((options, extraOptions) {
return ...
}),
),
),
I am on flutter_quill: ^11.5.0
I guess title should be changed to childBuilder always throws an error of is not a subtype of type '((dynamic, dynamic) => Widget)?'
And this is not limited to custom toolbar only. My use case is as follows:
troublesome truncated snippet of my code:
QuillSimpleToolbar(
controller: _controller,
config: QuillSimpleToolbarConfig(
buttonOptions: QuillSimpleToolbarButtonOptions(
color: QuillToolbarColorButtonOptions(
childBuilder: (_, __) {
return MenuAnchor(
menuChildren: [Icon(Icons.abc)],
builder: (context, controller, child) {
return IconButton(
onPressed: () {
if (controller.isOpen) {
controller.close();
return;
}
controller.open();
},
icon: Icon(Icons.color_lens),
);
},
);
},
),
),
),
),
simplest and shortest workaround (added dynamic):
QuillSimpleToolbar(
controller: _controller,
config: QuillSimpleToolbarConfig(
buttonOptions: QuillSimpleToolbarButtonOptions(
color: QuillToolbarColorButtonOptions(
childBuilder: (dynamic _, dynamic __) { // <==== here
return MenuAnchor(
menuChildren: [Icon(Icons.abc)],
builder: (context, controller, child) {
return IconButton(
onPressed: () {
if (controller.isOpen) {
controller.close();
return;
}
controller.open();
},
icon: Icon(Icons.color_lens),
);
},
);
},
),
),
),
),
this is definitely inconvenient (but in the above case i am not too bothered by it)
copy of debug log:
════════ Exception caught by widgets library ═══════════════════════════════════
The following _TypeError was thrown building QuillToolbarColorButton(dirty, state: QuillToolbarColorButtonState#2180f):
type '(QuillToolbarColorButtonOptions, QuillToolbarColorButtonExtraOptions) => MenuAnchor' is not a subtype of type '((dynamic, dynamic) => Widget)?'
The relevant error-causing widget was:
QuillSimpleToolbar QuillSimpleToolbar:file:///home/hazem/Development/project_name/lib/features/Consultation/views/edit_consultation_summary_screen.dart:63:13
When the exception was thrown, this was the stack:
#0 QuillToolbarButtonOptionsResolver.childBuilder (package:flutter_quill/src/toolbar/base_button/base_button_options_resolver.dart:36:24)
base_button_options_resolver.dart:36
#1 QuillToolbarCommonButtonState.childBuilder (package:flutter_quill/src/toolbar/base_button/base_value_button.dart:56:24)
base_value_button.dart:56
#2 QuillToolbarColorButtonState.build (package:flutter_quill/src/toolbar/buttons/color/color_button.dart:133:31)
color_button.dart:133
#3 StatefulElement.build (package:flutter/src/widgets/framework.dart:5833:27)
framework.dart:5833
#4 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5723:15)
framework.dart:5723
#5 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5884:11)
framework.dart:5884
#6 Element.rebuild (package:flutter/src/widgets/framework.dart:5435:7)
framework.dart:5435
(truncated)
lemme know if any additional information is needed. hoping this gets fixed quickly
